646 UI components mui (#1431)

* fix(appbar): mui styles refactor Closes #646 * fix(footerTabs): mui styles refactor Closes #646 * fix(map): mui styles refactor Closes #646 * fix(mousePosition): mui styles refactor Closes #646 * fix(northArrow): mui styles refactor Closes #646 * fix(mousePosition): mui styles refactor Closes #646 * fix(mousePosition): mui styles refactor Closes #646 * fix(Scale): mui styles refactor Closes #646 * fix(Divider): mui styles refactor Closes #646 * fix(Drawer): mui styles refactor Closes #646 * fix(CheckboxList): mui styles refactor Closes #646 * fix(Modal): mui styles refactor Closes #646 * fix(Panel): mui styles refactor Closes #646 * fix(Select): mui styles refactor Closes #646 * fix(Slider): mui styles refactor Closes #646 * fix(Stepper): mui styles refactor Closes #646 * fix(Switch): mui styles refactor Closes #646 * fix(TextField): mui styles refactor Closes #646 * fix(Button): mui styles refactor Closes #646 * fix(theme): mui styles refactor Closes #646 * fix(checkboxList): single style file Closes #646 * fix(MousePosition): update native button to MUI button Closes #646 * fix(Scale): update native button to MUI button Closes #646 * fix(basemappanel): nui style refactor Closes #646 * fix(layerList): nui style refactor Closes #646 * fix(layerList): nui style refactor Closes #646 * fix(divider): nui style refactor Closes #646
Canadian-Geospatial-Platform · Oct 26, 2023 · bd5d95c · bd5d95c
1 parent 3c23569
commit bd5d95c
Show file tree

Hide file tree

Showing 54 changed files with 1,032 additions and 1,132 deletions.
diff --git a/packages/geoview-basemap-panel/src/basemap-panel-style.ts b/packages/geoview-basemap-panel/src/basemap-panel-style.ts
@@ -0,0 +1,81 @@
+/* @ts-expect-error there is no mui style in this package */
+export const getSxClasses = (theme) => ({
+  basemapCard: {
+    '& .MuiCard-root': {
+      backgroundColor: theme.palette.grey.A700,
+      color: theme.palette.primary.light,
+      display: 'flex',
+      flexDirection: 'column',
+      backgroundClip: 'padding-box',
+      border: '1px solid rgba(255,255,255,0.25)',
+      borderRadius: '6px',
+      boxShadow: 'none',
+      marginBottom: '16px',
+      transition: 'all 0.3s ease-in-out',
+      '&:last-child': {
+        marginBottom: '0px',
+      },
+    },
+    '& .MuiCardHeader-root': {
+      backgroundColor: `${theme.palette.grey.A700} !important`,
+      color: theme.basemapPanel.header,
+      fontSize: 14,
+      fontWeight: 400,
+      margin: 0,
+      padding: '0 12px',
+      height: 60,
+      width: '100%',
+      order: 2,
+    },
+    '& .MuiCardContent-root': {
+      order: 1,
+      height: 190,
+      position: 'relative',
+      padding: 0,
+      '&:last-child': {
+        padding: 0,
+      },
+      '& .basemapCardThumbnail': {
+        position: 'absolute',
+        height: '100%',
+        width: '100%',
+        objectFit: 'cover',
+        top: 0,
+        left: 0,
+      },
+      '& .basemapCardThumbnailOverlay': {
+        display: 'block',
+        height: '100%',
+        width: '100%',
+        position: 'absolute',
+        backgroundColor: theme.basemapPanel.overlayDefault,
+        transition: 'all 0.3s ease-in-out',
+      },
+    },
+    '&:hover': {
+      cursor: 'pointer',
+      borderColor: theme.basemapPanel.borderHover,
+      '& .MuiCardContent-root': {
+        '& .basemapCardThumbnailOverlay': {
+          backgroundColor: theme.basemapPanel.overlayHover,
+        },
+      },
+    },
+    '&.active': {
+      borderColor: theme.basemapPanel.borderActive,
+      '& .MuiCardContent-root': {
+        '& .basemapCardThumbnailOverlay': {
+          backgroundColor: theme.basemapPanel.overlayActive,
+        },
+      },
+      '&:hover': {
+        borderColor: 'rgba(255,255,255,0.75)',
+        '& .MuiCardContent-root': {
+          '& .basemapCardThumbnailOverlay': {
+            backgroundColor: 'rgba(0,0,0,0)',
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/packages/geoview-basemap-panel/src/basemap-panel.tsx b/packages/geoview-basemap-panel/src/basemap-panel.tsx
@@ -10,6 +10,7 @@ import {
   TypeBasemapOptions,
   TypeValidMapProjectionCodes,
 } from 'geoview-core';
+import { getSxClasses } from './basemap-panel-style';
 
 const w = window as TypeWindow;
 
@@ -25,93 +26,17 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element {
   const myMap = cgpv.api.maps[mapId];
 
   const { api, ui, react } = cgpv;
-  const { Select, Card } = ui.elements;
+  const { Select, Card, Box } = ui.elements;
 
   const { useState, useEffect } = react;
 
   const [basemapList, setBasemapList] = useState<TypeBasemapProps[]>([]);
   const [activeBasemapId, setActiveBasemapId] = useState<string>('');
   const [canSwichProjection] = useState(config.canSwichProjection);
 
-  const useStyles = ui.makeStyles((theme) => ({
-    basemapCard: {
-      backgroundColor: theme.palette.grey.A700,
-      color: theme.palette.primary.light,
-      display: 'flex',
-      flexDirection: 'column',
-      backgroundClip: 'padding-box',
-      border: `1px solid ${theme.basemapPanel.borderDefault}`,
-      borderRadius: 6,
-      boxShadow: 'none',
-      marginBottom: 16,
-      transition: 'all 0.3s ease-in-out',
-      '&:last-child': {
-        marginBottom: 0,
-      },
-      '& .MuiCardHeader-root': {
-        backgroundColor: theme.palette.grey.A700,
-        color: theme.basemapPanel.header,
-        fontSize: 14,
-        fontWeight: 400,
-        margin: 0,
-        padding: '0 12px',
-        height: 60,
-        width: '100%',
-        order: 2,
-      },
-      '& .MuiCardContent-root': {
-        order: 1,
-        height: 190,
-        position: 'relative',
-        padding: 0,
-        '&:last-child': {
-          padding: 0,
-        },
-        '& .basemapCardThumbnail': {
-          position: 'absolute',
-          height: '100%',
-          width: '100%',
-          objectFit: 'cover',
-          top: 0,
-          left: 0,
-        },
-        '& .basemapCardThumbnailOverlay': {
-          display: 'block',
-          height: '100%',
-          width: '100%',
-          position: 'absolute',
-          backgroundColor: theme.basemapPanel.overlayDefault,
-          transition: 'all 0.3s ease-in-out',
-        },
-      },
-      '&:hover': {
-        cursor: 'pointer',
-        borderColor: theme.basemapPanel.borderHover,
-        '& .MuiCardContent-root': {
-          '& .basemapCardThumbnailOverlay': {
-            backgroundColor: theme.basemapPanel.overlayHover,
-          },
-        },
-      },
-      '&.active': {
-        borderColor: theme.basemapPanel.borderActive,
-        '& .MuiCardContent-root': {
-          '& .basemapCardThumbnailOverlay': {
-            backgroundColor: theme.basemapPanel.overlayActive,
-          },
-        },
-        '&:hover': {
-          borderColor: 'rgba(255,255,255,0.75)',
-          '& .MuiCardContent-root': {
-            '& .basemapCardThumbnailOverlay': {
-              backgroundColor: 'rgba(0,0,0,0)',
-            },
-          },
-        },
-      },
-    },
-  }));
-  const classes = useStyles();
+  const theme = ui.useTheme();
+
+  const sxClasses = getSxClasses(theme);
 
   // TODO: change the path for getting projection on schema refactor
   const projections: number[] =
@@ -220,7 +145,7 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element {
   }, []);
 
   return (
-    <div>
+    <Box sx={sxClasses.basemapCard}>
       {canSwichProjection && (
         <Select
           fullWidth
@@ -247,7 +172,6 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element {
         return (
           <Card
             tabIndex={0}
-            classes={{ root: classes.basemapCard }}
             className={basemap.basemapId === activeBasemapId ? 'active' : ''}
             onClick={() => setBasemap(basemap.basemapId as string)}
             onKeyPress={() => setBasemap(basemap.basemapId as string)}
@@ -269,6 +193,6 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element {
           />
         );
       })}
-    </div>
+    </Box>
   );
 }
diff --git a/packages/geoview-core/src/api/plugin/plugin-types.ts b/packages/geoview-core/src/api/plugin/plugin-types.ts
@@ -1,6 +1,5 @@
 import { AnySchemaObject } from 'ajv';
 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import { TypeJsonObject, TypeJsonValue } from '@/core/types/global-types';
 import { API } from '../api';
 
@@ -17,7 +16,6 @@ export type TypePluginStructure = {
   translate: TypeJsonValue;
   translations: TypeJsonObject;
   configObj: TypeJsonObject;
-  makeStyles: typeof makeStyles;
   schema?: () => AnySchemaObject;
   defaultConfig?: () => TypeJsonObject;
   added?: () => void;

diff --git a/packages/geoview-core/src/api/plugin/plugin.ts b/packages/geoview-core/src/api/plugin/plugin.ts
@@ -1,12 +1,11 @@
+import { useTheme } from '@mui/material/styles';
 import React from 'react';
 
 import i18next from 'i18next';
 import * as translate from 'react-i18next';
 
 import Ajv from 'ajv';
 
-import makeStyles from '@mui/styles/makeStyles';
-
 import { showError } from '@/core/utils/utilities';
 import { MapViewer } from '@/geo/map/map-viewer';
 
@@ -180,7 +179,7 @@ export class Plugin {
           react: { value: React },
           props: { value: props !== undefined && props !== null ? props : {} },
           translate: { value: translate },
-          makeStyles: { value: makeStyles },
+          useTheme: { value: useTheme },
           configObj: { value: pluginConfigObj },
         });
 

diff --git a/packages/geoview-core/src/app.tsx b/packages/geoview-core/src/app.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 
 import { useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import makeStyles from '@mui/styles/makeStyles';
 
 import 'ol/ol.css';
 import '@/ui/style/style.css';
@@ -155,7 +154,6 @@ export const cgpv: types.TypeCGPV = {
   ui: {
     useTheme,
     useMediaQuery,
-    makeStyles,
     elements: UI,
   },
   useTranslation,

diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar-style.ts b/packages/geoview-core/src/core/components/app-bar/app-bar-style.ts
@@ -0,0 +1,70 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  appBar: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    minWidth: 64,
+    zIndex: theme.zIndex.appBar,
+    pointerEvents: 'all',
+    backgroundColor: theme.appBar.background,
+    border: theme.appBar.border,
+  },
+  appBarList: {
+    width: 60,
+    '& li': {
+      backgroundColor: 'transparent',
+      justifyContent: 'center',
+      margin: '16px 0',
+      padding: 0,
+      '&:hover': {
+        backgroundColor: 'transparent',
+        color: theme.palette.primary.light,
+      },
+    },
+    '& hr': {
+      width: '80%',
+      marginLeft: '7px',
+    },
+  },
+
+  appBarButtons: {
+    borderRightColor: theme.appBar.border,
+    borderRightWidth: 1,
+    borderRightStyle: 'solid',
+    width: 64,
+  },
+  appBarButton: {
+    backgroundColor: theme.appBar.btnDefaultBg,
+    color: theme.palette.primary.light,
+    height: 44,
+    width: 44,
+    transition: 'background-color 0.3s ease-in-out',
+    '&:hover': {
+      backgroundColor: theme.appBar.btnHoverBg,
+      color: theme.palette.primary.light,
+    },
+    '&:focus': {
+      backgroundColor: theme.appBar.btnFocusBg,
+      color: theme.palette.primary.light,
+    },
+    '&:active': {
+      backgroundColor: theme.appBar.btnActiveBg,
+      color: theme.palette.primary.light,
+    },
+    '&.active': {
+      backgroundColor: theme.appBar.btnActiveBg,
+      color: theme.palette.background.paper,
+    },
+    '& .MuiSvgIcon-root': {
+      height: 20,
+      width: 20,
+    },
+  },
+  versionButtonDiv: {
+    position: 'absolute',
+    bottom: 0,
+  },
+  appBarPanels: {},
+});