fix(Dashboard): Sidepanel positioning (#17200)

* Refactor * Adjust top offset * Calculate padding chart list * Check for standalone mode * Rename standaloneMode
2021-11-02 19:28:16 +02:00 · 2021-11-02 19:28:16 +02:00 · a2a457b7ef
parent 5491a4d13c
commit a2a457b7ef
4 changed files with 96 additions and 42 deletions
--- a/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx
+++ b/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx
@ -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;
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@ -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 = {};

@ -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 {
@ -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) +
@ -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)`;
@ -369,7 +382,12 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
            ) : (
              <Loading />
            )}
-            {editMode && <BuilderComponentPane topOffset={barTopOffset} />}
+            {editMode && (
+              <BuilderComponentPane
+                isStandalone={!!standaloneMode}
+                topOffset={barTopOffset}
+              />
+            )}
          </StyledDashboardContent>
        </div>
      </StyledContent>
--- a/superset-frontend/src/dashboard/stylesheets/builder-sidepane.less
+++ b/superset-frontend/src/dashboard/stylesheets/builder-sidepane.less
@ -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;
--- a/superset-frontend/src/dashboard/util/constants.ts
+++ b/superset-frontend/src/dashboard/util/constants.ts
@ -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,