Skip to content

Commit

Permalink
fix(Dashboard): Sidepanel positioning (#17200)
Browse files Browse the repository at this point in the history
* Refactor

* Adjust top offset

* Calculate padding chart list

* Check for standalone mode

* Rename standaloneMode
  • Loading branch information
geido authored and AAfghahi committed Jan 10, 2022
1 parent 08710b3 commit ae89468
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 42 deletions.
106 changes: 72 additions & 34 deletions superset-frontend/src/dashboard/components/BuilderComponentPane.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,62 +33,100 @@ import NewMarkdown from './gridComponents/new/NewMarkdown';
import SliceAdder from '../containers/SliceAdder';

export interface BCPProps {
isStandalone: boolean;
topOffset: number;
}

const SUPERSET_HEADER_HEIGHT = 59;
const SIDEPANE_ADJUST_OFFSET = 4;
const SIDEPANE_HEADER_HEIGHT = 64; // including margins
const SIDEPANE_FILTERBAR_HEIGHT = 56;

const BuilderComponentPaneTabs = styled(Tabs)`
line-height: inherit;
margin-top: ${({ theme }) => theme.gridUnit * 2}px;
`;

const BuilderComponentPane: React.FC<BCPProps> = ({ topOffset = 0 }) => (
<div
const DashboardBuilderSidepane = styled.div<{
topOffset: number;
}>`
height: 100%;
position: fixed;
right: 0;
top: 0;
.ReactVirtualized__List {
padding-bottom: ${({ topOffset }) =>
`${
SIDEPANE_HEADER_HEIGHT +
SIDEPANE_FILTERBAR_HEIGHT +
SIDEPANE_ADJUST_OFFSET +
topOffset
}px`};
}
`;

const BuilderComponentPane: React.FC<BCPProps> = ({
isStandalone,
topOffset = 0,
}) => (
<DashboardBuilderSidepane
topOffset={topOffset}
className="dashboard-builder-sidepane"
style={{
height: `calc(100vh - ${topOffset + SUPERSET_HEADER_HEIGHT}px)`,
}}
>
<ParentSize>
{({ height }) => (
<StickyContainer>
<Sticky topOffset={-topOffset} bottomOffset={Infinity}>
{({ style, isSticky }: { style: any; isSticky: boolean }) => (
<div
className="viewport"
style={isSticky ? { ...style, top: topOffset } : null}
>
<BuilderComponentPaneTabs
id="tabs"
className="tabs-components"
data-test="dashboard-builder-component-pane-tabs-navigation"
{({ style, isSticky }: { style: any; isSticky: boolean }) => {
const { pageYOffset } = window;
const hasHeader =
pageYOffset < SUPERSET_HEADER_HEIGHT && !isStandalone;
const withHeaderTopOffset =
topOffset +
(SUPERSET_HEADER_HEIGHT - pageYOffset - SIDEPANE_ADJUST_OFFSET);

return (
<div
className="viewport"
style={{
...style,
top: hasHeader ? withHeaderTopOffset : topOffset,
}}
>
<Tabs.TabPane key={1} tab={t('Components')}>
<NewTabs />
<NewRow />
<NewColumn />
<NewHeader />
<NewMarkdown />
<NewDivider />
</Tabs.TabPane>
<Tabs.TabPane
key={2}
tab={t('Charts')}
className="tab-charts"
<BuilderComponentPaneTabs
id="tabs"
className="tabs-components"
data-test="dashboard-builder-component-pane-tabs-navigation"
>
<SliceAdder
height={height + (isSticky ? SUPERSET_HEADER_HEIGHT : 0)}
/>
</Tabs.TabPane>
</BuilderComponentPaneTabs>
</div>
)}
<Tabs.TabPane key={1} tab={t('Components')}>
<NewTabs />
<NewRow />
<NewColumn />
<NewHeader />
<NewMarkdown />
<NewDivider />
</Tabs.TabPane>
<Tabs.TabPane
key={2}
tab={t('Charts')}
className="tab-charts"
>
<SliceAdder
height={
height + (isSticky ? SUPERSET_HEADER_HEIGHT : 0)
}
/>
</Tabs.TabPane>
</BuilderComponentPaneTabs>
</div>
);
}}
</Sticky>
</StickyContainer>
)}
</ParentSize>
</div>
</DashboardBuilderSidepane>
);

export default BuilderComponentPane;
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ const CLOSED_FILTER_BAR_WIDTH = 32;
const OPEN_FILTER_BAR_WIDTH = 260;
const FILTER_BAR_HEADER_HEIGHT = 80;
const FILTER_BAR_TABS_HEIGHT = 46;
const BUILDER_SIDEPANEL_WIDTH = 374;

type DashboardBuilderProps = {};

Expand Down Expand Up @@ -173,6 +174,18 @@ const StyledDashboardContent = styled.div<{
}
return theme.gridUnit * 8;
}}px;
${({ editMode, theme }) =>
editMode &&
`
max-width: calc(100% - ${
BUILDER_SIDEPANEL_WIDTH + theme.gridUnit * 16
}px);
`}
}
.dashboard-builder-sidepane {
width: ${BUILDER_SIDEPANEL_WIDTH}px;
}
.dashboard-component-chart-holder {
Expand Down Expand Up @@ -227,10 +240,10 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
rootChildId !== DASHBOARD_GRID_ID
? dashboardLayout[rootChildId]
: undefined;
const StandaloneMode = getUrlParam(URL_PARAMS.standalone);
const isReport = StandaloneMode === DashboardStandaloneMode.REPORT;
const standaloneMode = getUrlParam(URL_PARAMS.standalone);
const isReport = standaloneMode === DashboardStandaloneMode.REPORT;
const hideDashboardHeader =
StandaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE || isReport;
standaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE || isReport;

const barTopOffset =
(hideDashboardHeader ? 0 : HEADER_HEIGHT) +
Expand All @@ -257,7 +270,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {

const offset =
FILTER_BAR_HEADER_HEIGHT +
(isSticky || StandaloneMode ? 0 : MAIN_HEADER_HEIGHT) +
(isSticky || standaloneMode ? 0 : MAIN_HEADER_HEIGHT) +
(filterSetEnabled ? FILTER_BAR_TABS_HEIGHT : 0);

const filterBarHeight = `calc(100vh - ${offset}px)`;
Expand Down Expand Up @@ -369,7 +382,12 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
) : (
<Loading />
)}
{editMode && <BuilderComponentPane topOffset={barTopOffset} />}
{editMode && (
<BuilderComponentPane
isStandalone={!!standaloneMode}
topOffset={barTopOffset}
/>
)}
</StyledDashboardContent>
</div>
</StyledContent>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,6 @@
@import '../../assets/stylesheets/less/variables.less';

.dashboard-builder-sidepane {
flex: 0 0 @builder-pane-width;
position: relative;

.dashboard-builder-sidepane-header {
font-size: @font-size-l;
font-weight: @font-weight-bold;
Expand Down
1 change: 1 addition & 0 deletions superset-frontend/src/dashboard/util/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export const IN_COMPONENT_ELEMENT_TYPES = ['LABEL'];
export const ALL_FILTERS_ROOT = 'ALL_FILTERS_ROOT';

export enum DashboardStandaloneMode {
NONE = 0,
HIDE_NAV = 1,
HIDE_NAV_AND_TITLE = 2,
REPORT = 3,
Expand Down

0 comments on commit ae89468

Please sign in to comment.