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

…con (#2567) * fix(ui): Toggle class visibility, legend class border and wms stack icon Closes #2550, #2565, #2556 * fix comment layers * Remove tooltip * Remove tooltip format
Canadian-Geospatial-Platform · Nov 1, 2024 · 134cd97 · 134cd97
1 parent 6ec7769
commit 134cd97
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 49 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
@@ -19,15 +19,6 @@ export const getSxClasses = (theme: Theme): any => ({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  layerOpacityControlContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'right',
-    justifyContent: 'right',
-    '& #layerOpacity': {
-      width: { xs: '100%', sm: '100%', md: '50%', lg: '40%', xl: '40%' },
-    },
-  },
   itemsGrid: {
     width: '100%',
     '& .MuiGrid-container': {
@@ -57,6 +48,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
@@ -167,14 +167,6 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
   function renderItems(): JSX.Element {
     return (
       <Grid container direction="column" spacing={0} sx={sxClasses.itemsGrid} justifyContent="left" justifyItems="stretch">
-        {layerDetails.items.length > 1 && (
-          <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>
-            </Grid>
-          </Grid>
-        )}
         {layerDetails.items.map((item) => (
           <Grid
             container
@@ -184,8 +176,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>
@@ -262,7 +258,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
 
   function renderLayerButtons(): JSX.Element {
     return (
-      <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '15px' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '15px', marginLeft: 'auto' }}>
         {isDataTableVisible && datatableSettings[layerDetails.layerPath] && renderDetailsButton()}
         <IconButton tooltip="legend.refreshLayer" className="buttonOutline" onClick={handleRefreshLayer}>
           <RestartAltIcon />
@@ -317,6 +313,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
               justifyContent: 'space-between',
               width: '100%',
               alignItems: 'center',
+              paddingTop: '10px',
             }}
           >
             <Box sx={{ textAlign: 'left', maxWidth: '70%', [theme.breakpoints.down('md')]: { display: 'none' } }}>
@@ -327,15 +324,22 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
             </Box>
             {renderLayerButtons()}
           </Box>
-          {layerDetails.controls?.opacity !== false && (
-            <Box sx={sxClasses.layerOpacityControlContainer}>
-              <Box id="layerOpacity">
-                <LayerOpacityControl layerDetails={layerDetails} />
-              </Box>
-            </Box>
-          )}
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap-reverse' }}>
+            {layerDetails.items.length > 1 && (
+              <Grid container direction="row" alignItems="center" justifyItems="stretch">
+                <Grid size={{ xs: 'auto' }}>{renderHeaderCheckbox()}</Grid>
+                <Grid size={{ xs: 'auto' }}>
+                  <Box component="span" sx={{ fontWeight: 'bold' }}>
+                    {t('layers.toggleAllVisibility')}
+                  </Box>
+                </Grid>
+              </Grid>
+            )}
+            {layerDetails.controls?.opacity !== false && <LayerOpacityControl layerDetails={layerDetails} />}
+          </Box>
+          <Divider sx={{ marginTop: '10px', marginBottom: '20px' }} variant="middle" />
           {renderWMSImage()}
-          <Box sx={{ marginTop: '20px' }}>
+          <Box>
             {layerDetails.items?.length > 0 && renderItems()}
             {layerDetails.children.length > 0 && (
               <>
@@ -344,7 +348,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
               </>
             )}
           </Box>
-          <Divider sx={{ marginTop: '50px', marginBottom: '10x' }} variant="middle" />
+          <Divider sx={{ marginTop: '20px', marginBottom: '10px' }} variant="middle" />
           {layerDetails.layerAttribution &&
             layerDetails.layerAttribution!.map((attribution) => {
               return (

diff --git a/.../core/components/layers/right-panel/layer-opacity-control/layer-opacity-control-styles.ts b/.../core/components/layers/right-panel/layer-opacity-control/layer-opacity-control-styles.ts
@@ -8,6 +8,8 @@ export const getSxClasses = (theme: Theme): any => ({
     alignItems: 'center',
     gap: '15px',
     padding: '8px 20px 7px 15px',
+    marginLeft: 'auto',
+    width: '235px',
     backgroundColor: theme.palette.geoViewColor.bgColor.main,
     borderRadius: '10px',
     '& .MuiSlider-mark': {

diff --git a/...re/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx b/...re/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx
@@ -42,19 +42,17 @@ export function LayerOpacityControl(props: LayerOpacityControlProps): JSX.Elemen
   };
 
   return (
-    <Box style={{ padding: '16px 17px 16px 23px' }}>
-      <Box sx={sxClasses.layerOpacityControl}>
-        <Typography sx={{ fontWeight: 'bold' }}>{t('layers.opacity')}</Typography>
-        <Slider
-          min={0}
-          max={100}
-          step={1}
-          value={(layerDetails.opacity ? layerDetails.opacity : 1) * 100}
-          onChange={handleSetOpacity}
-          marks={marks}
-          valueLabelDisplay="auto"
-        />
-      </Box>
+    <Box sx={sxClasses.layerOpacityControl}>
+      <Typography sx={{ fontWeight: 'bold' }}>{t('layers.opacity')}</Typography>
+      <Slider
+        min={0}
+        max={100}
+        step={1}
+        value={(layerDetails.opacity ? layerDetails.opacity : 1) * 100}
+        onChange={handleSetOpacity}
+        marks={marks}
+        valueLabelDisplay="auto"
+      />
     </Box>
   );
 }
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]}`,
+        },
       },
     },
   },

diff --git a/packages/geoview-core/src/core/components/nav-bar/buttons/basemap-select.tsx b/packages/geoview-core/src/core/components/nav-bar/buttons/basemap-select.tsx
@@ -142,7 +142,7 @@ export default function BasemapSelect(): JSX.Element {
   };
 
   const panel: TypePanelProps = {
-    title: 'Select a basemap',
+    title: 'basemaps.select',
     icon: createElement(MapIcon),
     content: renderButtons(),
     width: 'flex',

diff --git a/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx b/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { ClickAwayListener } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import { getSxClasses } from './nav-bar-style';
 import { Popper, IconButton, DialogTitle, DialogContent, Paper, Box } from '@/ui';
 import { useAppGeoviewHTMLElement } from '@/core/stores/store-interface-and-intial-values/app-state';
@@ -23,6 +24,8 @@ export default function NavbarPanelButton({ buttonPanel }: NavbarPanelButtonType
   // Log
   logger.logTraceRender('components/nav-bar/nav-bar-panel-button');
 
+  const { t } = useTranslation<string>();
+
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
 
@@ -76,7 +79,7 @@ export default function NavbarPanelButton({ buttonPanel }: NavbarPanelButtonType
           handleKeyDown={(key, callBackFn) => handleEscapeKey(key, '', false, callBackFn)}
         >
           <Paper sx={{ width: `${buttonPanel.panel?.width ?? 300}px`, maxHeight: '500px' }}>
-            <DialogTitle sx={sxClasses.popoverTitle}>{(buttonPanel.panel?.title as string) ?? ''}</DialogTitle>
+            <DialogTitle sx={sxClasses.popoverTitle}>{t(buttonPanel.panel?.title as string) ?? ''}</DialogTitle>
             <DialogContent>
               {buttonPanel.panel?.convertHtmlContent ? (
                 <HtmlToReact htmlContent={buttonPanel.panel?.content as string} />