refactor: Make panel layouts better configurable

visualize-admin · Dec 6, 2023 · feb3e00 · feb3e00
1 parent 038f4f0
commit feb3e00
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 171 deletions.
diff --git a/app/browser/select-dataset-step.tsx b/app/browser/select-dataset-step.tsx
@@ -30,9 +30,8 @@ import {
   smoothPresenceProps,
 } from "@/components/presence";
 import {
+  PanelBodyWrapper,
   PanelLayout,
-  PanelLeftWrapper,
-  PanelMiddleWrapper,
 } from "@/configurator/components/layout";
 import { truthy } from "@/domain/types";
 import {
@@ -277,8 +276,8 @@ const SelectDatasetStepContent = () => {
           </MotionBox>
         )}
       </AnimatePresence>
-      <PanelLayout className={classes.panelLayout} key="panel">
-        <PanelLeftWrapper className={classes.panelLeft}>
+      <PanelLayout type="LM" className={classes.panelLayout} key="panel">
+        <PanelBodyWrapper type="L" className={classes.panelLeft}>
           <AnimatePresence mode="wait">
             {dataset ? (
               <MotionBox
@@ -310,8 +309,9 @@ const SelectDatasetStepContent = () => {
               </MotionBox>
             )}
           </AnimatePresence>
-        </PanelLeftWrapper>
-        <PanelMiddleWrapper
+        </PanelBodyWrapper>
+        <PanelBodyWrapper
+          type="M"
           className={classes.panelMiddle}
           sx={{ maxWidth: 1040 }}
         >
@@ -383,7 +383,7 @@ const SelectDatasetStepContent = () => {
               </MotionBox>
             )}
           </AnimatePresence>
-        </PanelMiddleWrapper>
+        </PanelBodyWrapper>
       </PanelLayout>
       <Box
         sx={{

diff --git a/app/configurator/components/configurator.tsx b/app/configurator/components/configurator.tsx
@@ -1,4 +1,5 @@
 import { Trans } from "@lingui/macro";
+import { SxProps } from "@mui/material";
 import Box from "@mui/material/Box";
 import Button, { ButtonProps } from "@mui/material/Button";
 import { useRouter } from "next/router";
@@ -19,29 +20,28 @@ import {
   DRAWER_WIDTH,
 } from "@/configurator/components/drawer";
 import {
-  LMPanelLayout,
-  LMRPanelHeaderWrapper,
-  LMRPanelLayout,
-  PanelHeaderLeftWrapper,
-  PanelHeaderMiddleWrapper,
-  PanelHeaderRightWrapper,
-  PanelLeftWrapper,
-  PanelMiddleWrapper,
+  PanelBodyWrapper,
+  PanelHeaderLayout,
+  PanelHeaderWrapper,
+  PanelLayout,
 } from "@/configurator/components/layout";
 import { ChartConfiguratorTable } from "@/configurator/table/table-chart-configurator";
 import SvgIcChevronLeft from "@/icons/components/IcChevronLeft";
 import { useDataSourceStore } from "@/stores/data-source";
 import { InteractiveFiltersProvider } from "@/stores/interactive-filters";
 import useEvent from "@/utils/use-event";
 
-const BackContainer = ({ children }: { children: React.ReactNode }) => {
+const BackContainer = (props: React.PropsWithChildren<{ sx?: SxProps }>) => {
+  const { children, sx } = props;
+
   return (
     <Box
       sx={{
         px: 2,
         minHeight: 78,
         display: "flex",
         alignItems: "center",
+        ...sx,
       }}
     >
       {children}
@@ -120,8 +120,9 @@ const ConfigureChartStep = () => {
 
   return (
     <InteractiveFiltersProvider>
-      <LMPanelLayout>
-        <PanelLeftWrapper
+      <PanelLayout type="LM">
+        <PanelBodyWrapper
+          type="L"
           sx={{
             flexGrow: 1,
             display: "flex",
@@ -139,12 +140,12 @@ const ConfigureChartStep = () => {
           ) : (
             <ChartConfigurator state={state} />
           )}
-        </PanelLeftWrapper>
-        <PanelMiddleWrapper>
+        </PanelBodyWrapper>
+        <PanelBodyWrapper type="M">
           <ChartPanel>
             <ChartPreview dataSource={state.dataSource} />
           </ChartPanel>
-        </PanelMiddleWrapper>
+        </PanelBodyWrapper>
         <ConfiguratorDrawer
           anchor="left"
           open={!!chartConfig.activeField}
@@ -171,7 +172,7 @@ const ConfigureChartStep = () => {
             )}
           </div>
         </ConfiguratorDrawer>
-      </LMPanelLayout>
+      </PanelLayout>
     </InteractiveFiltersProvider>
   );
 };
@@ -210,18 +211,19 @@ const LayoutingStep = () => {
 
   return (
     <InteractiveFiltersProvider>
-      <LMRPanelLayout>
-        <LMRPanelHeaderWrapper>
-          <PanelHeaderLeftWrapper>
+      <PanelLayout type="M" sx={{ background: "#eee" }}>
+        <PanelHeaderLayout type="LMR" sx={{ background: "#fff" }}>
+          <PanelHeaderWrapper type="L">
             <BackContainer>
               <BackButton onClick={handlePrevious}>
                 <Trans id="controls.nav.back-to-configurator">
                   Back to configurator
                 </Trans>
               </BackButton>
             </BackContainer>
-          </PanelHeaderLeftWrapper>
-          <PanelHeaderMiddleWrapper
+          </PanelHeaderWrapper>
+          <PanelHeaderWrapper
+            type="M"
             sx={{
               display: "flex",
               alignItems: "center",
@@ -230,25 +232,28 @@ const LayoutingStep = () => {
               mx: "auto",
             }}
           >
-            <Button>123</Button>
-            <Button>321</Button>
-            <Button>213</Button>
-          </PanelHeaderMiddleWrapper>
-          <PanelHeaderRightWrapper
+            <Button>Tab layout</Button>
+            <Button>Dashboard</Button>
+            <Button>Single URLs</Button>
+          </PanelHeaderWrapper>
+          <PanelHeaderWrapper
+            type="R"
             sx={{
               display: "flex",
               alignItems: "start",
               justifyContent: "flex-end",
             }}
           >
             <PublishChartButton />
-          </PanelHeaderRightWrapper>
-        </LMRPanelHeaderWrapper>
-        <PanelMiddleWrapper>
-          <ChartPanel>
-            <ChartPreview dataSource={state.dataSource} />
-          </ChartPanel>
-        </PanelMiddleWrapper>
+          </PanelHeaderWrapper>
+        </PanelHeaderLayout>
+        <PanelBodyWrapper type="M">
+          <Box sx={{ maxWidth: 980, mx: "auto" }}>
+            <ChartPanel>
+              <ChartPreview dataSource={state.dataSource} />
+            </ChartPanel>
+          </Box>
+        </PanelBodyWrapper>
         <ConfiguratorDrawer
           anchor="left"
           open={!!chartConfig.activeField}
@@ -270,7 +275,7 @@ const LayoutingStep = () => {
             </BackContainer>
           </div>
         </ConfiguratorDrawer>
-      </LMRPanelLayout>
+      </PanelLayout>
     </InteractiveFiltersProvider>
   );
 };
@@ -283,15 +288,15 @@ const PublishStep = () => {
   }
 
   return (
-    <LMPanelLayout>
-      <PanelMiddleWrapper>
+    <PanelLayout type="LM">
+      <PanelBodyWrapper type="M">
         <ChartPanel>
           <InteractiveFiltersProvider>
             <ChartPreview dataSource={state.dataSource} />
           </InteractiveFiltersProvider>
         </ChartPanel>
-      </PanelMiddleWrapper>
-    </LMPanelLayout>
+      </PanelBodyWrapper>
+    </PanelLayout>
   );
 };