Merge pull request #1474 from cphelefu/replace-table-with-grid

replace table with grid (#1474)
Canadian-Geospatial-Platform · Nov 8, 2023 · 227a455 · 227a455
2 parents d655e24 + 587d7ca
commit 227a455
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 76 deletions.
diff --git a/packages/geoview-core/src/core/components/layers/layers-style.ts b/packages/geoview-core/src/core/components/layers/layers-style.ts
@@ -111,50 +111,36 @@ export const getSxClasses = (theme: Theme) => ({
       padding: '8px 20px 7px 15px',
       backgroundColor: '#F6F6F6',
     },
+
+    itemsGrid: {
+      width: '100%',
+      '& .MuiGrid-container': {
+        '&:first-child': {
+          fontWeight: 'bold',
+          borderTop: '1px solid #ccc',
+          borderBottom: '2px solid #ccc',
+        },
+        '& .MuiGrid-item': {
+          padding: '3px 6px',
+
+          '&:first-child': {
+            width: '80px',
+          },
+          '&:nth-child(2)': {
+            flexGrow: 1,
+            textAlign: 'left',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+        },
+      },
+    },
     tableIconLabel: {
       color: 'text.primary',
       fontSize: 16,
       noWrap: true,
       marginLeft: 20,
-    },
-    table: {
-      border: '1px solid #C1C1C1',
-      borderRadius: '4px',
-      padding: '16px 17px 16px 23px',
-    },
-    tableHeader: {
-      '& th': {
-        borderBottom: '1px solid #C1C1C1',
-        height: 40,
-        backgroundColor: '#FFFFFF',
-        padding: '2px 4px 2px 4px',
-        borderRight: '1px solid #C1C1C1',
-        fontWeight: 'bold',
-      },
-      '& th:first-of-type': {
-        // The pseudo class ":x-child" is potentially unsafe when doing server-side rendering. Try changing it to ":x-of-type".
-        width: '80px',
-      },
-      '& th:nth-of-type(2)': {
-        padding: '2px 4px 2px 20px',
-      },
-    },
-    tableRow: {
-      '& td': {
-        borderBottom: '1px solid #C1C1C1',
-        height: 40,
-        margin: 0,
-        padding: '2px 4px 2px 4px',
-        alignItems: 'center',
-        borderRight: '1px solid #C1C1C1',
-      },
-      '& td:first-of-type': {
-        // The pseudo class ":x-child" is potentially unsafe when doing server-side rendering. Try changing it to ":x-of-type".
-        width: '80px',
-      },
-      '& td:nth-of-type(2)': {
-        padding: '2px 4px 2px 20px',
-      },
-    },
-  },
+    }
+  }
 });
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
@@ -1,9 +1,8 @@
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import { TypeLegendLayer } from '../types';
 import { getSxClasses } from '../layers-style';
-import { Box, CheckBoxIcon, CheckBoxOutIcon, IconButton, Paper, SliderBase, Typography, ZoomInSearchIcon } from '@/ui';
+import { Box, CheckBoxIcon, CheckBoxOutIcon, IconButton, Paper, SliderBase, Typography, ZoomInSearchIcon, Grid } from '@/ui';
 import { useLayerStoreActions } from '@/core/stores/store-interface-and-intial-values/layer-state';
 
 interface LayerDetailsProps {
@@ -53,35 +52,31 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
 
   function renderItems() {
     return (
-      <TableContainer>
-        <Table sx={sxClasses.rightPanel.table}>
-          <TableHead>
-            <TableRow sx={sxClasses.rightPanel.tableHeader}>
-              <TableCell>
-                <IconButton color="primary" onClick={() => setAllItemsVisibility(layerDetails.layerPath, !layerDetails.allItemsChecked)}>
-                  {layerDetails.allItemsChecked ? <CheckBoxIcon /> : <CheckBoxOutIcon />}
-                </IconButton>
-              </TableCell>
-              <TableCell>{t('general.name')}</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {layerDetails.items.map((item) => (
-              <TableRow key={item.name} sx={sxClasses.rightPanel.tableRow}>
-                <TableCell>
-                  <IconButton color="primary" onClick={() => toggleItemVisibility(layerDetails.layerPath, item.name)}>
-                    {item.isChecked ? <CheckBoxIcon /> : <CheckBoxOutIcon />}
-                  </IconButton>
-                </TableCell>
-                <TableCell>
-                  <img alt={item.name} src={item.icon} />
-                  <span style={sxClasses.rightPanel.tableIconLabel}>{item.name}</span>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
+      <Grid container direction="column" spacing={0} sx={sxClasses.rightPanel.itemsGrid} justifyContent="left" justifyItems="stretch">
+        <Grid container direction="row" justifyContent="center" alignItems="stretch" justifyItems="stretch">
+          <Grid item xs="auto">
+            <IconButton color="primary" onClick={() => setAllItemsVisibility(layerDetails.layerPath, !layerDetails.allItemsChecked)}>
+              {layerDetails.allItemsChecked ? <CheckBoxIcon /> : <CheckBoxOutIcon />}
+            </IconButton>
+          </Grid>
+          <Grid item xs="auto">
+            <span>{t('general.name')}</span>
+          </Grid>
+        </Grid>
+        {layerDetails.items.map((item) => (
+          <Grid container direction="row" key={item.name} justifyContent="center" alignItems="stretch">
+            <Grid item xs="auto">
+              <IconButton color="primary" onClick={() => toggleItemVisibility(layerDetails.layerPath, item.name)}>
+                {item.isChecked ? <CheckBoxIcon /> : <CheckBoxOutIcon />}
+              </IconButton>
+            </Grid>
+            <Grid item xs="auto">
+              <img alt={item.name} src={item.icon} />
+              <span style={sxClasses.rightPanel.tableIconLabel}>{item.name}</span>
+            </Grid>
+          </Grid>
+        ))}
+      </Grid>
     );
   }
 

diff --git a/packages/geoview-core/src/core/components/legend-2/legend.tsx b/packages/geoview-core/src/core/components/legend-2/legend.tsx
@@ -1,7 +1,7 @@
 import { useStore } from 'zustand';
 import { useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Box, List, Typography } from '@/ui';
+import { Box, Typography, Grid } from '@/ui';
 import { getGeoViewStore } from '@/core/stores/stores-managers';
 import { getSxClasses } from './legend-styles';
 import { LegendLayer } from './legend-layer';
@@ -23,11 +23,13 @@ export function Legend(props: LegendOverviewProps): JSX.Element {
 
   function renderLegendLayersList() {
     return (
-      <List sx={{ width: '100%', padding: '20px' }}>
+      <Grid container spacing={4} sx={{ width: '100%', padding: '20px' }}>
         {legendLayers.map((item) => (
-          <LegendLayer layer={item} key={item.layerPath} />
+          <Grid item xs={12} md={6} lg={4} key={item.layerPath}>
+            <LegendLayer layer={item} key={item.layerPath} />
+          </Grid>
         ))}
-      </List>
+      </Grid>
     );
   }