fix(Dashboard): Sidepanel positioning (#17200)

* Refactor * Adjust top offset * Calculate padding chart list * Check for standalone mode * Rename standaloneMode
apache · Nov 2, 2021 · a2a457b · a2a457b
1 parent 5491a4d
commit a2a457b
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 42 deletions.
diff --git 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;
diff --git 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>

diff --git 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;

diff --git 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,