Merge branch 'labeling-panel' into lucide-icons

swisstopo · Sep 4, 2024 · 2520955 · 2520955
2 parents b698b20 + 4037b42
commit 2520955
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 257 deletions.
diff --git a/src/client/cypress/e2e/editor/labeling.cy.js b/src/client/cypress/e2e/editor/labeling.cy.js
@@ -0,0 +1,35 @@
+import { newUneditableBorehole, startBoreholeEditing, stopBoreholeEditing } from "../helpers/testHelpers.js";
+
+describe.skip("Test labeling tool", () => {
+  it("can show labeling panel", () => {
+    newUneditableBorehole().as("borehole_id");
+    // only show in editing mode
+    cy.get('[data-cy="labeling-toggle-button"]').should("not.exist");
+
+    // panel is closed by default
+    startBoreholeEditing();
+    cy.get('[data-cy="labeling-toggle-button"]').should("exist");
+    cy.get('[data-cy="labeling-panel"]').should("not.exist");
+
+    // panel can be opened and closed
+    cy.get('[data-cy="labeling-toggle-button"]').click();
+    cy.get('[data-cy="labeling-panel"]').should("exist");
+    cy.get('[data-cy="labeling-toggle-button"]').click();
+    cy.get('[data-cy="labeling-panel"]').should("not.exist");
+
+    // panel open state should be reset when editing is stopped, panel position should be preserved
+    cy.get('[data-cy="labeling-toggle-button"]').click();
+    cy.get('[data-cy="labeling-panel"]').should("exist");
+    cy.get('[data-cy="labeling-panel-position-right"]').should("have.class", "Mui-selected");
+    cy.get('[data-cy="labeling-panel-position-bottom"]').click();
+    cy.get('[data-cy="labeling-panel-position-right"]').should("not.have.class", "Mui-selected");
+    cy.get('[data-cy="labeling-panel-position-bottom"]').should("have.class", "Mui-selected");
+
+    stopBoreholeEditing();
+    cy.get('[data-cy="labeling-panel"]').should("not.exist");
+    startBoreholeEditing();
+    cy.get('[data-cy="labeling-panel"]').should("not.exist");
+    cy.get('[data-cy="labeling-toggle-button"]').click();
+    cy.get('[data-cy="labeling-panel-position-bottom"]').should("have.class", "Mui-selected");
+  });
+});
diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts
@@ -39,8 +39,11 @@ export const theme = createTheme({
       secondary: "#a65462",
     },
     ai: {
+      background: "#46596B",
       main: "#5B21B6",
-      secondary: "#4F46E5",
+      mainEnd: "#8B5CF6",
+      active: "#4F46E5",
+      activeEnd: "#E53940",
       contrastText: "#ffffff",
     },
     boxShadow: "#DFE4E9",

diff --git a/src/client/src/components/buttons/labelingButton.tsx b/src/client/src/components/buttons/labelingButton.tsx
@@ -36,7 +36,8 @@ export const LabelingToggleButton = forwardRef<HTMLButtonElement, LabelingToggle
         borderRadius: panelPosition === "right" ? "4px 0 0 4px" : "4px 0 0 0",
         right: 0,
         bottom: panelPosition === "bottom" ? "0" : undefined,
-      }}>
+      }}
+      data-cy="labeling-toggle-button">
       {panelOpen ? panelPosition === "right" ? <ChevronRight /> : <ChevronDown /> : <Sparkles />}
     </IconButton>
   );

diff --git a/src/client/src/mui.theme.d.ts b/src/client/src/mui.theme.d.ts
@@ -1,5 +1,8 @@
 import { Theme, ThemeOptions } from "@mui/material/styles";
-import { ComponentType, SVGProps } from "react";
+import { Breakpoints } from "@mui/system";
+import { BreakpointsOptions } from "@mui/system/createTheme/createBreakpoints";
+import { Typography } from "@mui/material";
+import { TypographyOptions } from "@mui/material/styles/createTypography";
 
 declare module "@mui/material/IconButton" {
   interface IconButtonPropsColorOverrides {
@@ -45,8 +48,11 @@ declare module "@mui/material/styles" {
       secondary: string;
     };
     ai: {
+      background: string;
       main: string;
-      secondary: string;
+      mainEnd: string;
+      active: string;
+      activeEnd: string;
       contrastText: string;
     };
     boxShadow: string;
@@ -61,268 +67,62 @@ declare module "@mui/material/styles" {
     border: string;
   }
 
-  interface AppThemeTypography {
+  interface AppThemeTypography extends Typography {
     fontFamily: string;
-    h6: {
-      fontSize: string;
-      lineHeight: string;
-      fontWeight: number | string;
-      color: string;
-    };
-    h5: {
-      fontSize: string;
-      lineHeight: string;
-      fontWeight: number | string;
-      color: string;
-    };
-    h2: {
-      fontSize: string;
-      lineHeight: string;
-      fontWeight: number | string;
-      color: string;
-    };
-    subtitle1: {
-      fontSize: string;
-      color: string;
-      lineHeight: string;
-    };
-    subtitle2: {
+    fullPageMessage: {
       fontSize: string;
       color: string;
-      lineHeight: string;
-    };
-    body2: {
-      fontSize: string;
     };
-    fullPageMessage: {
+  }
+
+  interface AppThemeTypographyOptions extends TypographyOptions {
+    fontFamily: string;
+    fullPageMessage?: {
       fontSize: string;
       color: string;
     };
   }
 
-  interface AppThemeBreakpoints {
-    values: {
-      xs: number;
-      sm: number;
-      md: number;
-      lg: number;
-      xl: number;
-    };
+  interface AppThemeComponents extends Components {
+    MuiButtonBase: object;
+    MuiButton: object;
+    MuiIconButton: object;
+    MuiToggleButtonGroup: object;
+    MuiToggleButton: object;
+    MuiSelect: object;
+    MuiFormControl: object;
+    MuiTab: object;
+    MuiBadge: object;
+    MuiDialogContentText: object;
+    MuiTableCell: object;
   }
 
-  interface AppThemeComponents {
-    MuiButtonBase: {
-      defaultProps: {
-        disableRipple: boolean;
-      };
-    };
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          fontFamily: string;
-          fontWeight: string | number;
-          textTransform: string;
-          whiteSpace: string;
-          minWidth: string;
-          marginLeft: string;
-          padding: string;
-          borderRadius: string;
-          boxShadow: string;
-          "&:hover": {
-            boxShadow: string;
-          };
-        };
-        contained: {
-          backgroundColor: string;
-          "&:hover": {
-            backgroundColor: string;
-          };
-          "&:focus-visible": {
-            backgroundColor: string;
-            boxShadow: string;
-          };
-          "&:active": {
-            backgroundColor: string;
-          };
-          "&:disabled": {
-            backgroundColor: string;
-          };
-        };
-        outlined: {
-          color: string;
-          backgroundColor: string;
-          "&:hover": {
-            color: string;
-            backgroundColor: string;
-          };
-          "&:focus-visible": {
-            color: string;
-            backgroundColor: string;
-            boxShadow: string;
-          };
-          "&:active": {
-            color: string;
-            backgroundColor: string;
-          };
-          "&:disabled": {
-            backgroundColor: string;
-            color: string;
-          };
-        };
-      };
-    };
-    MuiIconButton: {
-      styleOverrides: {
-        root: {
-          "& .MuiTouchRipple-root": {
-            display: string;
-          };
-        };
-        colorPrimary: {
-          backgroundColor: string;
-          color: string;
-          "&:hover": {
-            backgroundColor: string;
-          };
-          "&:focus-visible": {
-            backgroundColor: string;
-            boxShadow: string;
-          };
-          "&:active": {
-            backgroundColor: string;
-          };
-          "&:disabled": {
-            backgroundColor: string;
-          };
-        };
-        colorError: {
-          "&:hover": {
-            color: string;
-            backgroundColor: string;
-          };
-        };
-        colorAi: {
-          color: string;
-          background: string;
-          "&:hover": {
-            background: string;
-          };
-          "&:focus-visible": {
-            background: string;
-            boxShadow: string;
-          };
-          "&:active": {
-            background: string;
-          };
-          "&:disabled": {
-            background: string;
-          };
-        };
-      };
-    };
-    MuiToggleButtonGroup: {
-      styleOverrides: {
-        root: {
-          backgroundColor: string;
-        };
-      };
-    };
-    MuiToggleButton: {
-      styleOverrides: {
-        root: {
-          border: string;
-          borderRadius: string;
-          margin: string;
-          padding: string;
-          color: string;
-          "&.Mui-selected": {
-            color: string;
-            backgroundColor: string;
-          };
-        };
-      };
-    };
-    MuiSelect: {
-      defaultProps: {
-        IconComponent: ComponentType<SVGProps<SVGSVGElement> & { title?: string | undefined }>;
-      };
-    };
-    MuiFormControl: {
-      styleOverrides: {
-        root: {
-          "& .MuiFilledInput-root": {
-            backgroundColor: string;
-          };
-          "& .MuiFilledInput-root:hover:not(.Mui-disabled, .Mui-error):before": {
-            borderColor: string;
-          };
-          "& .MuiFilledInput-root:not(.Mui-error):before": {
-            borderColor: string;
-          };
-          "& .MuiFilledInput-root:not(.Mui-error):after": {
-            borderColor: string;
-          };
-        };
-      };
-    };
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          fontFamily: string;
-          fontWeight: string | number;
-          textTransform: string;
-          fontSize: string;
-        };
-      };
-    };
-    MuiBadge: {
-      styleOverrides: {
-        badge: {
-          backgroundColor: string;
-          color: string;
-        };
-      };
-    };
-    MuiDialogContentText: {
-      styleOverrides: {
-        root: {
-          fontSize: string;
-          color: string;
-        };
-      };
-    };
-    MuiTableCell: {
-      styleOverrides: {
-        head: {
-          fontSize: string;
-          fontWeight: number | string;
-          padding: string;
-          flex: number | string;
-          verticalAlign: string;
-        };
-        body: {
-          paddingRight: string;
-          paddingLeft: string;
-          flex: number | string;
-          fontSize: string;
-        };
-      };
-    };
+  interface AppThemeComponentsOptions extends ComponentsOptions {
+    MuiButtonBase: object;
+    MuiButton: object;
+    MuiIconButton: object;
+    MuiToggleButtonGroup: object;
+    MuiToggleButton: object;
+    MuiSelect: object;
+    MuiFormControl: object;
+    MuiTab: object;
+    MuiBadge: object;
+    MuiDialogContentText: object;
+    MuiTableCell: object;
   }
 
   interface AppTheme extends Theme {
     palette: AppThemePalette;
     typography: AppThemeTypography;
-    breakpoints: AppThemeBreakpoints;
+    breakpoints: Breakpoints;
     components: AppThemeComponents;
   }
 
-  // allow configuration using `createTheme`
   interface AppThemeOptions extends ThemeOptions {
     palette: AppThemePalette;
-    typography: AppThemeTypography;
-    breakpoints: AppThemeBreakpoints;
-    components: AppThemeComponents;
+    typography: AppThemeTypographyOptions;
+    breakpoints: BreakpointsOptions;
+    components: AppThemeComponentsOptions;
   }
   export function createTheme(options?: AppThemeOptions): AppTheme;
 }