remove makeStyle from code (#2175)

* remove makeStyle from code * renaming styles * after build
Canadian-Geospatial-Platform · May 29, 2024 · 7fb4088 · 7fb4088
1 parent dda82bf
commit 7fb4088
Show file tree

Hide file tree

Showing 19 changed files with 148 additions and 147 deletions.
diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
@@ -323,7 +323,7 @@ export function AppBar(props: AppBarProps): JSX.Element {
                         aria-label={buttonPanel.button.tooltip}
                         tooltip={buttonPanel.button.tooltip}
                         tooltipPlacement="right"
-                        className={`style3 ${tabId === buttonPanel.button.id && isOpen ? 'active' : ''}`}
+                        className={`buttonFilled ${tabId === buttonPanel.button.id && isOpen ? 'active' : ''}`}
                         size="small"
                         onClick={() => handleButtonClicked(buttonPanel.button.id!, groupName)}
                       >
@@ -349,7 +349,7 @@ export function AppBar(props: AppBarProps): JSX.Element {
           {appBarComponents.includes(CV_DEFAULT_APPBAR_CORE.EXPORT) && interaction === 'dynamic' && (
             <List sx={sxClasses.appBarList}>
               <ListItem>
-                <ExportButton className={` style3 ${activeModalId ? 'active' : ''}`} />
+                <ExportButton className={` buttonFilled ${activeModalId ? 'active' : ''}`} />
               </ListItem>
             </List>
           )}

diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx
@@ -79,7 +79,7 @@ export default function Version(): JSX.Element {
           tooltip="appbar.version"
           tooltipPlacement="bottom-end"
           onClick={handleClick}
-          className={`${interaction === 'dynamic' ? 'style3' : 'style4'} ${open ? 'active' : ''}`}
+          className={`${interaction === 'dynamic' ? 'buttonFilled' : 'style4'} ${open ? 'active' : ''}`}
         >
           <SvgIcon viewBox="-4 -2 38 36">
             <GeoCaIcon />

diff --git a/packages/geoview-core/src/core/components/common/full-screen-dialog.tsx b/packages/geoview-core/src/core/components/common/full-screen-dialog.tsx
@@ -12,7 +12,7 @@ function FullScreenDialog({ open, onClose, children }: FullScreenDialogProps): J
   return (
     <Dialog fullScreen maxWidth="xl" open={open} onClose={onClose} disablePortal>
       <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
-        <IconButton onClick={onClose} color="primary" className="style2" sx={{ marginBottom: '1.5rem' }}>
+        <IconButton onClick={onClose} color="primary" className="buttonFilledOutline" sx={{ marginBottom: '1.5rem' }}>
           <CloseIcon />
         </IconButton>
         {children}

diff --git a/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx b/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx
@@ -124,7 +124,7 @@ const ResponsiveGridLayout = forwardRef(
           size="small"
           color="primary"
           variant="contained"
-          className="style2"
+          className="buttonFilledOutline"
           startIcon={isEnlarged ? <ArrowForwardIcon /> : <ArrowBackIcon />}
           sx={{ height: '40px', borderRadius: '1.5rem', boxShadow: 'none', [theme.breakpoints.down('md')]: { display: 'none' } }}
           onClick={() => handleIsEnlarge(!isEnlarged)}
@@ -143,7 +143,7 @@ const ResponsiveGridLayout = forwardRef(
           size="small"
           color="primary"
           variant="contained"
-          className="style2"
+          className="buttonFilledOutline"
           sx={{
             height: '40px',
             borderRadius: '1.5rem',
@@ -176,7 +176,7 @@ const ResponsiveGridLayout = forwardRef(
           size="small"
           onClick={() => handleOpenGuide()}
           tooltip={t('general.openGuide')!}
-          className="style2"
+          className="buttonFilledOutline"
           color="primary"
         >
           <QuestionMarkIcon />
@@ -190,7 +190,7 @@ const ResponsiveGridLayout = forwardRef(
           size="small"
           onClick={() => setIsFullScreen(!isFullScreen)}
           tooltip={isFullScreen ? t('general.closeFullscreen')! : t('general.openFullscreen')!}
-          className="style2"
+          className="buttonFilledOutline"
           color="primary"
         >
           <FullscreenIcon />

diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/packages/geoview-core/src/core/components/data-table/data-table.tsx
@@ -411,17 +411,20 @@ function DataTable({ data, layerPath, tableHeight = 600 }: DataTableProps): JSX.
         </Box>
         <Box>
           <Box>
-            <MRTToggleFiltersButton className="style1" table={table} />
+            <MRTToggleFiltersButton className="buttonOutline" table={table} />
             <FilterMap layerPath={layerPath} isGlobalFilterOn={!!globalFilter?.length} />
             {/* enable column pinning options is override, so that pinning option in menu can be hide. */}
-            <MRTShowHideColumnsButton className="style1" table={{ ...table, options: { ...table.options, enableColumnPinning: false } }} />
-            <MRTToggleDensePaddingButton className="style1" table={table} />
+            <MRTShowHideColumnsButton
+              className="buttonOutline"
+              table={{ ...table, options: { ...table.options, enableColumnPinning: false } }}
+            />
+            <MRTToggleDensePaddingButton className="buttonOutline" table={table} />
             <ExportButton rows={rows} columns={columns}>
               <JSONExportButton features={data.features as TypeFeatureInfoEntry[]} layerPath={layerPath} />
             </ExportButton>
           </Box>
           <Box sx={{ marginLeft: 'auto', maxWidth: '15rem', marginRight: '1rem' }}>
-            <MRTGlobalFilterTextField className="style1" table={table} />
+            <MRTGlobalFilterTextField className="buttonOutline" table={table} />
           </Box>
         </Box>
       </Box>

diff --git a/packages/geoview-core/src/core/components/data-table/export-button.tsx b/packages/geoview-core/src/core/components/data-table/export-button.tsx
@@ -94,7 +94,7 @@ function ExportButton({ rows, columns, children }: ExportButtonProps): JSX.Eleme
 
   return (
     <>
-      <IconButton onClick={handleClick} className="style1">
+      <IconButton onClick={handleClick} className="buttonOutline">
         <Tooltip title={t('dataTable.exportBtn')} placement="bottom" enterDelay={100}>
           <DownloadIcon />
         </Tooltip>

diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx
@@ -447,7 +447,7 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
                   tooltip="details.clearAllfeatures"
                   tooltipPlacement="top"
                   onClick={() => handleClearAllHighlights()}
-                  className="style1"
+                  className="buttonOutline"
                   disabled={checkedFeatures.length === 0}
                 >
                   <LayersClearOutlinedIcon />
@@ -462,7 +462,7 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
                   tooltipPlacement="top"
                   onClick={() => handleFeatureNavigateChange(-1)}
                   disabled={currentFeatureIndex <= 0}
-                  className="style1"
+                  className="buttonOutline"
                 >
                   <ArrowBackIosOutlinedIcon />
                 </IconButton>
@@ -473,7 +473,7 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
                   tooltipPlacement="top"
                   onClick={() => handleFeatureNavigateChange(1)}
                   disabled={!memoSelectedLayerData?.features || currentFeatureIndex + 1 >= memoSelectedLayerData!.features!.length}
-                  className="style1"
+                  className="buttonOutline"
                 >
                   <ArrowForwardIosOutlinedIcon />
                 </IconButton>

diff --git a/packages/geoview-core/src/core/components/details/feature-info-new.tsx b/packages/geoview-core/src/core/components/details/feature-info-new.tsx
@@ -146,7 +146,7 @@ export function FeatureInfo({ features, currentFeatureIndex }: TypeFeatureInfoPr
               sx={sxClasses.selectFeatureCheckbox}
             />
           </Tooltip>
-          <IconButton color="primary" onClick={(e) => handleZoomIn(e)} className="style1">
+          <IconButton color="primary" onClick={(e) => handleZoomIn(e)} className="buttonOutline">
             <Tooltip title={t('details.zoomTo')} placement="top" enterDelay={1000}>
               <ZoomInSearchIcon />
             </Tooltip>

diff --git a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx
@@ -374,7 +374,7 @@ export function FooterBar(props: FooterBarProps): JSX.Element | null {
             <IconButton
               onClick={handleDynamicFocus}
               tooltip={isFocusToMap ? 'footerBar.focusToMap' : 'footerBar.focusToFooter'}
-              className="style3"
+              className="buttonFilled"
               disabled={
                 isCollapsed || isMapFullScreen || footerPanelResizeValues[footerPanelResizeValues.length - 1] === footerPanelResizeValue
               }

diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
@@ -210,22 +210,28 @@ export function SingleLayer({ depth, layer, setIsLayersListPanelVisible, index,
     }
     if (layer.layerStatus === 'error') {
       return (
-        <IconButton edge="end" size="small" onClick={handleReloadLayer} tooltip="layers.reloadLayer" className="style1">
+        <IconButton edge="end" size="small" onClick={handleReloadLayer} tooltip="layers.reloadLayer" className="buttonOutline">
           <RestartAltIcon />
         </IconButton>
       );
     }
 
     if (isLayerAlwaysVisible) {
       return (
-        <IconButton edge="end" size="small" tooltip="layers.visibilityIsAlways" className="style1" disabled>
+        <IconButton edge="end" size="small" tooltip="layers.visibilityIsAlways" className="buttonOutline" disabled>
           <VisibilityOutlinedIcon color="disabled" />
         </IconButton>
       );
     }
 
     return (
-      <IconButton edge="end" size="small" onClick={() => handleToggleVisibility()} tooltip="layers.toggleVisibility" className="style1">
+      <IconButton
+        edge="end"
+        size="small"
+        onClick={() => handleToggleVisibility()}
+        tooltip="layers.toggleVisibility"
+        className="buttonOutline"
+      >
         {(() => {
           if (!getVisibilityFromOrderedLayerInfo(layer.layerPath)) return <VisibilityOffOutlinedIcon />;
           return <VisibilityOutlinedIcon />;
@@ -246,7 +252,7 @@ export function SingleLayer({ depth, layer, setIsLayersListPanelVisible, index,
           size="small"
           onClick={handleExpandGroupClick}
           tooltip="layers.toggleCollapse"
-          className="style1"
+          className="buttonOutline"
         >
           {isGroupOpen ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
         </IconButton>

diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
@@ -195,12 +195,12 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
   function renderDetailsButton(): JSX.Element {
     if (layerDetails.controls?.table !== false)
       return (
-        <IconButton id="table-details" tooltip="legend.tableDetails" className="style1" onClick={handleOpenTable}>
+        <IconButton id="table-details" tooltip="legend.tableDetails" className="buttonOutline" onClick={handleOpenTable}>
           <TableViewIcon />
         </IconButton>
       );
     return (
-      <IconButton id="table-details" className="style1" disabled>
+      <IconButton id="table-details" className="buttonOutline" disabled>
         <TableViewIcon color="disabled" />
       </IconButton>
     );
@@ -212,13 +212,13 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
         <IconButton
           tooltip="legend.highlightLayer"
           onClick={handleHighlightLayer}
-          className={highlightedLayer === layerDetails.layerPath ? 'style1 active' : 'style1'}
+          className={highlightedLayer === layerDetails.layerPath ? 'buttonOutline active' : 'buttonOutline'}
         >
           <HighlightOutlinedIcon />
         </IconButton>
       );
     return (
-      <IconButton className="style1" disabled>
+      <IconButton className="buttonOutline" disabled>
         <HighlightOutlinedIcon color="disabled" />
       </IconButton>
     );
@@ -227,12 +227,12 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
   function renderZoomButton(): JSX.Element {
     if (layerDetails.controls?.zoom !== false)
       return (
-        <IconButton tooltip="legend.zoomTo" onClick={handleZoomTo} className="style1" disabled={layerDetails.bounds === undefined}>
+        <IconButton tooltip="legend.zoomTo" onClick={handleZoomTo} className="buttonOutline" disabled={layerDetails.bounds === undefined}>
           <ZoomInSearchIcon />
         </IconButton>
       );
     return (
-      <IconButton className="style1" disabled>
+      <IconButton className="buttonOutline" disabled>
         <ZoomInSearchIcon color="disabled" />
       </IconButton>
     );
@@ -242,7 +242,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
     return (
       <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '15px' }}>
         {isDataTableVisible && selectedLayer?.features?.length && renderDetailsButton()}
-        <IconButton tooltip="legend.refreshLayer" className="style1" onClick={handleRefreshLayer}>
+        <IconButton tooltip="legend.refreshLayer" className="buttonOutline" onClick={handleRefreshLayer}>
           <RestartAltIcon />
         </IconButton>
         {renderHighlightButton()}

diff --git a/packages/geoview-core/src/core/components/legend/legend-layer.tsx b/packages/geoview-core/src/core/components/legend/legend-layer.tsx
@@ -110,7 +110,7 @@ export function LegendLayer(props: LegendLayerProps): JSX.Element {
           <IconButton
             edge="end"
             tooltip="layers.visibilityIsAlways"
-            className="style1"
+            className="buttonOutline"
             onClick={(e) => handleToggleVisibility(e)}
             disabled={!isLayerVisible}
           >
@@ -119,12 +119,12 @@ export function LegendLayer(props: LegendLayerProps): JSX.Element {
           <IconButton
             tooltip="legend.highlightLayer"
             sx={{ marginTop: '-0.3125rem' }}
-            className="style1"
+            className="buttonOutline"
             onClick={(e) => handleHighlightLayer(e)}
           >
             {highlightedLayer === layer.layerPath ? <HighlightIcon /> : <HighlightOutlinedIcon />}
           </IconButton>
-          <IconButton tooltip="legend.zoomTo" className="style1" onClick={(e) => handleZoomTo(e)}>
+          <IconButton tooltip="legend.zoomTo" className="buttonOutline" onClick={(e) => handleZoomTo(e)}>
             <ZoomInSearchIcon />
           </IconButton>
         </Stack>
@@ -203,7 +203,7 @@ export function LegendLayer(props: LegendLayerProps): JSX.Element {
             />
           </Tooltip>
           {!!(layer.children?.length > 1 || layer.items?.length > 1) && (
-            <IconButton sx={{ marginBottom: '20px' }} className="style1" edge="end" size="small" tooltip="layers.toggleCollapse">
+            <IconButton sx={{ marginBottom: '20px' }} className="buttonOutline" edge="end" size="small" tooltip="layers.toggleCollapse">
               {isGroupOpen ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
             </IconButton>
           )}

diff --git a/packages/geoview-core/src/core/components/map/map-style.ts b/packages/geoview-core/src/core/components/map/map-style.ts
@@ -5,5 +5,73 @@ export const sxClasses = {
     width: '100%',
     height: '100%',
     position: 'relative',
+
+    '& .ol-overviewmap.ol-custom-overviewmap': {
+      bottom: 'auto',
+      left: 'auto',
+      right: '5px',
+      top: '5px',
+      margin: 5,
+      order: 1,
+      padding: 0,
+      position: 'absolute',
+      borderRadius: 4,
+
+      '& .ol-overviewmap-map': {
+        border: 'none',
+        display: 'block !important',
+        '-webkit-transition': '300ms linear',
+        '-moz-transition': '300ms linear',
+        '-o-transition': '300ms linear',
+        '-ms-transition': '300ms linear',
+        transition: '300ms linear',
+      },
+      '&.ol-uncollapsible': {
+        bottom: 'auto',
+        left: 'auto',
+        right: 100,
+        top: 100,
+        margin: 5,
+      },
+      '&:not(.ol-collapsed)': {
+        boxShadow: '0 1px 5px rgb(0 0 0 / 65%)',
+        borderRadius: '4px',
+        border: 'none',
+      },
+      '&:is(.ol-collapsed)': {
+        boxShadow: '0 1px 5px rgb(0 0 0 / 65%)',
+        borderRadius: 4,
+        border: 'none',
+      },
+      '& button': {
+        zIndex: 100,
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        left: 'auto !important',
+        bottom: 'auto !important',
+        backgroundColor: '#cccccc',
+      },
+      '&::before': {
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        width: 0,
+        height: 0,
+        borderRadius: 2,
+        zIndex: 100,
+        right: 0,
+        top: 0,
+      },
+      '& .ol-overviewmap-box': {
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+      },
+      '& .ol-viewport': {
+        borderRadius: '4px',
+        '& .ol-layer': {
+          backgroundColor: '#FFF',
+        },
+      },
+    },
   },
 };
diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx
@@ -153,7 +153,7 @@ export default function Notifications(): JSX.Element {
             tooltip="appbar.notifications"
             tooltipPlacement="bottom-end"
             onClick={handleOpenPopover}
-            className={`${interaction === 'dynamic' ? 'style3' : 'style4'} ${open ? 'active' : ''}`}
+            className={`${interaction === 'dynamic' ? 'buttonFilled' : 'style4'} ${open ? 'active' : ''}`}
             color="primary"
           >
             {!hasNewNotification && <NotificationsIcon />}

diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle-styles.ts b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle-styles.ts
@@ -0,0 +1,23 @@
+export const sxClasses = {
+  toggleBtn: {
+    transform: 'rotate(45deg)',
+    color: 'black',
+    zIndex: 150,
+    '&:hover': {
+      cursor: 'pointer',
+    },
+
+    '&.minimapOpen': {
+      transform: 'rotate(-45deg)',
+    },
+    '&.minimapClosed': {
+      transform: 'rotate(135deg)',
+    },
+  },
+  toggleBtnContainer: {
+    zIndex: 150,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+};