From 66dde2a9e9f16cfa252167ad8be1a93dfc3863b0 Mon Sep 17 00:00:00 2001
From: Johann Levesque <Johann.Levesque@canada.ca>
Date: Fri, 25 Oct 2024 15:45:13 -0400
Subject: [PATCH] fix(ui): Toggle class visibility, legend class border and wms
 stack icon Closes #2550, #2565, #2556

---
 .../public/locales/en/translation.json            |  1 +
 .../public/locales/fr/translation.json            |  1 +
 .../core/components/common/layer-icon-style.ts    |  2 ++
 .../src/core/components/common/layer-icon.tsx     |  4 ++--
 .../layers/right-panel/layer-details-style.ts     |  1 +
 .../layers/right-panel/layer-details.tsx          | 15 +++++++++++----
 .../src/core/components/legend/legend-layer.tsx   |  2 +-
 .../src/core/components/legend/legend-styles.ts   |  7 +++++--
 8 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/geoview-core/public/locales/en/translation.json b/packages/geoview-core/public/locales/en/translation.json
index 63a4b5e634a..5898d347359 100644
--- 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
index 48440f01909..6aac062092c 100644
--- 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
index 7bb964cb81d..574f15eee2d 100644
--- 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
index 618ff2ae91d..1c007808f79 100644
--- 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
index 198affce063..5a19af3a31b 100644
--- 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
index 6177b73db7d..43a5807a311 100644
--- 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
index bc411792ea3..70d07b043e7 100644
--- 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
index 7a94031b37f..f5bb1a29c63 100644
--- 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]}`,
+        },
       },
     },
   },