fix(ui): Toggle class visibility, legend class border and wms stack icon

Closes Canadian-Geospatial-Platform#2550, Canadian-Geospatial-Platform#2565, Canadian-Geospatial-Platform#2556
jolevesq · Nov 1, 2024 · 66dde2a · 66dde2a
1 parent 6ec7769
commit 66dde2a
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 9 deletions.
diff --git a/packages/geoview-core/public/locales/en/translation.json b/packages/geoview-core/public/locales/en/translation.json
@@ -113,6 +113,7 @@
     "reloadLayer": "Reload layer",
     "visibilityIsAlways": "Visibility is always enabled",
     "toggleVisibility": "Toggle visibility",
+    "toggleAllVisibility": "Toggle all visibility",
     "toggleCollapse": "Toggle collapse",
     "querying": "Querying",
     "layerAdded": "Layer __param__ added",

diff --git a/packages/geoview-core/public/locales/fr/translation.json b/packages/geoview-core/public/locales/fr/translation.json
@@ -113,6 +113,7 @@
     "reloadLayer": "Recharger la couche",
     "visibilityIsAlways": "La visibilité est toujours activée",
     "toggleVisibility": "Basculer la visibilité",
+    "toggleAllVisibility": "Basculer toute les visibilités",
     "toggleCollapse": "Basculer la fermeture",
     "querying": "Requête en cours",
     "layerAdded": "Couche __param__  ajoutée",

diff --git a/packages/geoview-core/src/core/components/common/layer-icon-style.ts b/packages/geoview-core/src/core/components/common/layer-icon-style.ts
@@ -37,6 +37,8 @@ export const getSxClasses = (theme: Theme): any => ({
   maxIconImg: {
     maxWidth: 24,
     maxHeight: 24,
+    padding: 1,
+    height: 'auto !important', // Make sure the WMS image is not duplicated to fill the 100% height from parent
   },
   legendIcon: {
     display: 'flex',

diff --git a/packages/geoview-core/src/core/components/common/layer-icon.tsx b/packages/geoview-core/src/core/components/common/layer-icon.tsx
@@ -50,7 +50,7 @@ function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIconStackPr
     }
     if (numOfIcons && numOfIcons > 0) {
       return (
-        <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyPress={(e) => onStackIconClick?.(e)} aria-hidden="true">
+        <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyDown={(e) => onStackIconClick?.(e)} aria-hidden="true">
           <IconButton sx={sxClasses.iconPreviewStacked} color="primary" size="small" tabIndex={-1} aria-hidden="true">
             <Box sx={sxClasses.legendIconTransparent}>
               {iconImageStacked && <Box component="img" alt="icon" src={iconImageStacked} sx={sxClasses.maxIconImg} />}
@@ -64,7 +64,7 @@ function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIconStackPr
     }
     if (layerPath !== '' && iconData.length === 0 && layerPath.charAt(0) !== '!') {
       return (
-        <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyPress={(e) => onStackIconClick?.(e)} aria-hidden="true">
+        <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyDown={(e) => onStackIconClick?.(e)} aria-hidden="true">
           <IconButton sx={sxClasses.iconPreviewStacked} color="primary" size="small" tabIndex={-1} aria-hidden="true">
             <Box sx={sxClasses.legendIconTransparent}>
               <BrowserNotSupportedIcon />

diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details-style.ts b/packages/geoview-core/src/core/components/layers/right-panel/layer-details-style.ts
@@ -57,6 +57,7 @@ export const getSxClasses = (theme: Theme): any => ({
     fontSize: theme.palette.geoViewFontSize.default,
     noWrap: true,
     marginLeft: 20,
+    alignSelf: 'center',
   },
   wmsImage: {
     maxWidth: '100%',

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
@@ -171,10 +171,13 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
           <Grid container direction="row" alignItems="center" justifyItems="stretch">
             <Grid size={{ xs: 'auto' }}>{renderHeaderCheckbox()}</Grid>
             <Grid size={{ xs: 'auto' }}>
-              <Box component="span">{t('general.name')}</Box>
+              <Box component="span" sx={{ fontWeight: 'bold' }}>
+                {t('layers.toggleAllVisibility')}
+              </Box>
             </Grid>
           </Grid>
         )}
+        <Divider sx={{ marginBottom: '10px' }} variant="middle" />
         {layerDetails.items.map((item) => (
           <Grid
             container
@@ -184,8 +187,12 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
             justifyItems="stretch"
           >
             <Grid size={{ xs: 'auto' }}>{renderItemCheckbox(item)}</Grid>
-            <Grid size={{ xs: 'auto' }}>
-              {item.icon ? <Box component="img" alt={item.name} src={item.icon} /> : <BrowserNotSupportedIcon />}
+            <Grid size={{ xs: 'auto' }} sx={{ display: 'flex' }}>
+              {item.icon ? (
+                <Box component="img" sx={{ alignSelf: 'center' }} alt={item.name} src={item.icon} />
+              ) : (
+                <BrowserNotSupportedIcon />
+              )}
               <Box component="span" style={sxClasses.tableIconLabel}>
                 {item.name}
               </Box>
@@ -344,7 +351,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
               </>
             )}
           </Box>
-          <Divider sx={{ marginTop: '50px', marginBottom: '10x' }} variant="middle" />
+          <Divider sx={{ marginTop: '50px', marginBottom: '10px' }} variant="middle" />
           {layerDetails.layerAttribution &&
             layerDetails.layerAttribution!.map((attribution) => {
               return (

diff --git a/packages/geoview-core/src/core/components/legend/legend-layer.tsx b/packages/geoview-core/src/core/components/legend/legend-layer.tsx
@@ -162,7 +162,7 @@ export function LegendLayer({ layer }: LegendLayerProps): JSX.Element {
     return (
       <List sx={sxClasses.subList}>
         {layer.items.map((item) => (
-          <ListItem key={`${item.icon}/${item.name}/${layer.items.indexOf(item)}`} className={!item.isVisible ? 'unchecked' : ''}>
+          <ListItem key={`${item.icon}/${item.name}/${layer.items.indexOf(item)}`} className={!item.isVisible ? 'unchecked' : 'checked'}>
             <ListItemIcon>{item.icon ? <Box component="img" alt={item.name} src={item.icon} /> : <BrowserNotSupportedIcon />}</ListItemIcon>
             <Tooltip title={item.name} placement="top" enterDelay={1000}>
               <ListItemText primary={item.name} />

diff --git a/packages/geoview-core/src/core/components/legend/legend-styles.ts b/packages/geoview-core/src/core/components/legend/legend-styles.ts
@@ -71,16 +71,19 @@ export const getSxClasses = (theme: Theme): any => ({
         padding: 0,
       },
       '& li': {
-        borderLeft: `5px solid ${theme.palette.geoViewColor.bgColor.dark[200]}`,
         paddingLeft: '6px',
         marginBottom: '3px',
         fontWeight: '400',
 
         '&.unchecked': {
-          borderLeft: `5px solid ${theme.palette.geoViewColor.bgColor.dark[600]}`,
+          borderLeft: `5px solid ${theme.palette.geoViewColor.bgColor.dark[200]}`,
           fontStyle: 'italic',
           color: theme.palette.geoViewColor.textColor.light[600],
         },
+
+        '&.checked': {
+          borderLeft: `5px solid ${theme.palette.geoViewColor.bgColor.dark[600]}`,
+        },
       },
     },
   },