fix(time-slider): add layer name in right panel mobile device #1494

Canadian-Geospatial-Platform · Nov 15, 2023 · 072ec05 · 072ec05
1 parent 890530c
commit 072ec05
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 30 deletions.
diff --git a/packages/geoview-core/src/core/components/common/responsive-grid.tsx b/packages/geoview-core/src/core/components/common/responsive-grid.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { GridProps } from '@mui/material';
+import { GridProps, SxProps } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { Grid } from '@/ui';
 
@@ -10,6 +10,7 @@ interface ResponsiveGridProps extends GridProps {
 interface ResponsiveGridPanelProps extends GridProps {
   children: ReactNode;
   isLayersPanelVisible: boolean;
+  sxProps?: SxProps;
 }
 
 /**
@@ -53,15 +54,16 @@ function ResponsiveGridLeftPanel({ children, isLayersPanelVisible = false, ...re
  * @param {boolean} isLayersPanelVisible panel visibility
  * @returns JSX.Element
  */
-function ResponsiveGridRightPanel({ children, isLayersPanelVisible = false, ...rest }: ResponsiveGridPanelProps) {
+function ResponsiveGridRightPanel({ children, isLayersPanelVisible = false, sxProps = {}, ...rest }: ResponsiveGridPanelProps) {
   const theme = useTheme();
   return (
     <Grid
       item
       sx={{
         position: 'relative',
         [theme.breakpoints.up('md')]: { paddingLeft: '1rem' },
-        [theme.breakpoints.down('md')]: { display: !isLayersPanelVisible ? 'block' : 'none', minHeight: '250px' },
+        [theme.breakpoints.down('md')]: { display: !isLayersPanelVisible ? 'block' : 'none' },
+        ...sxProps,
       }}
       {...rest}
     >

diff --git a/packages/geoview-core/src/core/components/data-table/data-panel.tsx b/packages/geoview-core/src/core/components/data-table/data-panel.tsx
@@ -90,19 +90,28 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data
   return (
     <Box sx={sxClasses.dataPanel}>
       <ResponsiveGrid.Root spacing={2} sx={sxClasses.gridContainer}>
-        <ResponsiveGrid.Left xs={isLayersPanelVisible ? 12 : 0} md={3} isLayersPanelVisible={isLayersPanelVisible}>
+        <ResponsiveGrid.Left xs={isLayersPanelVisible ? 12 : 0} md={4} isLayersPanelVisible={isLayersPanelVisible}>
           <Typography component="p" sx={sxClasses.headline}>
             {t('dataTable.leftPanelHeading')}
           </Typography>
         </ResponsiveGrid.Left>
-        <ResponsiveGrid.Right
-          xs={!isLayersPanelVisible ? 12 : 0}
-          md={9}
-          sx={{ display: 'flex', justifyContent: 'right' }}
-          isLayersPanelVisible={isLayersPanelVisible}
-        >
-          <EnlargeButton isEnlargeDataTable={isEnlargeDataTable} setIsEnlargeDataTable={setIsEnlargeDataTable} />
-          {!isLoading && <CloseButton setIsLayersPanelVisible={setIsLayersPanelVisible} isLayersPanelVisible={isLayersPanelVisible} />}
+        <ResponsiveGrid.Right xs={!isLayersPanelVisible ? 12 : 0} md={8} isLayersPanelVisible={isLayersPanelVisible}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              [theme.breakpoints.up('md')]: { justifyContent: 'right' },
+              [theme.breakpoints.down('md')]: { justifyContent: 'space-between' },
+            }}
+          >
+            <Box sx={{ [theme.breakpoints.up('md')]: { display: 'none' } }}>
+              {!isLoading && <Typography component="span">{layerData![selectedLayerIndex]?.layerName![language] ?? ''}</Typography>}
+            </Box>
+            <Box>
+              <EnlargeButton isEnlargeDataTable={isEnlargeDataTable} setIsEnlargeDataTable={setIsEnlargeDataTable} />
+              {!isLoading && <CloseButton setIsLayersPanelVisible={setIsLayersPanelVisible} isLayersPanelVisible={isLayersPanelVisible} />}
+            </Box>
+          </Box>
         </ResponsiveGrid.Right>
       </ResponsiveGrid.Root>
       <ResponsiveGrid.Root sx={{ marginTop: '0.75rem' }}>
@@ -117,6 +126,7 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data
           xs={!isLayersPanelVisible ? 12 : 0}
           md={!isEnlargeDataTable ? 8 : 10.75}
           isLayersPanelVisible={isLayersPanelVisible}
+          sxProps={{ minHeight: '250px' }}
         >
           <CircularProgress
             isLoaded={!isLoading}

diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx
@@ -182,19 +182,28 @@ export function Detailspanel({ mapId }: DetailsPanelProps): JSX.Element {
       {layerDataInfo && (
         <>
           <ResponsiveGrid.Root>
-            <ResponsiveGrid.Left xs={isLayersPanelVisible ? 12 : 0} md={3} isLayersPanelVisible={isLayersPanelVisible}>
+            <ResponsiveGrid.Left xs={isLayersPanelVisible ? 12 : 0} md={4} isLayersPanelVisible={isLayersPanelVisible}>
               <Typography component="div" sx={sxClasses.panelHeaders}>
                 {t('details.availableLayers')}
               </Typography>
             </ResponsiveGrid.Left>
-            <ResponsiveGrid.Right
-              isLayersPanelVisible={false}
-              xs={!isLayersPanelVisible ? 12 : 0}
-              md={9}
-              sx={{ display: 'flex', justifyContent: 'right' }}
-            >
-              <EnlargeButton isEnlargeDataTable={isEnlargeDataTable} setIsEnlargeDataTable={setIsEnlargeDataTable} />
-              <CloseButton isLayersPanelVisible={isLayersPanelVisible} setIsLayersPanelVisible={setIsLayersPanelVisible} />
+            <ResponsiveGrid.Right isLayersPanelVisible={isLayersPanelVisible} xs={!isLayersPanelVisible ? 12 : 0} md={8}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  [theme.breakpoints.up('md')]: { justifyContent: 'right' },
+                  [theme.breakpoints.down('md')]: { justifyContent: 'space-between' },
+                }}
+              >
+                <Box sx={{ [theme.breakpoints.up('md')]: { display: 'none' } }}>
+                  <Typography component="span">{layerDataInfo.layerName}</Typography>
+                </Box>
+                <Box>
+                  <EnlargeButton isEnlargeDataTable={isEnlargeDataTable} setIsEnlargeDataTable={setIsEnlargeDataTable} />
+                  <CloseButton isLayersPanelVisible={isLayersPanelVisible} setIsLayersPanelVisible={setIsLayersPanelVisible} />
+                </Box>
+              </Box>
             </ResponsiveGrid.Right>
           </ResponsiveGrid.Root>
           <ResponsiveGrid.Root sx={{ marginTop: '1rem' }}>

diff --git a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx
@@ -53,19 +53,28 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element {
   return (
     <Box sx={sxClasses.detailsContainer}>
       <ResponsiveGrid.Root>
-        <ResponsiveGrid.Left xs={isLayersPanelVisible ? 12 : 0} md={3} isLayersPanelVisible={isLayersPanelVisible}>
+        <ResponsiveGrid.Left xs={isLayersPanelVisible ? 12 : 0} md={4} isLayersPanelVisible={isLayersPanelVisible}>
           <Typography component="p" sx={sxClasses.panelHeaders}>
             {t('details.availableLayers')}
           </Typography>
         </ResponsiveGrid.Left>
-        <ResponsiveGrid.Right
-          isLayersPanelVisible={false}
-          xs={!isLayersPanelVisible ? 12 : 0}
-          md={9}
-          sx={{ display: 'flex', justifyContent: 'right' }}
-        >
-          <EnlargeButton isEnlargeDataTable={isEnlargeDataTable} setIsEnlargeDataTable={setIsEnlargeDataTable} />
-          <CloseButton isLayersPanelVisible={isLayersPanelVisible} setIsLayersPanelVisible={setIsLayersPanelVisible} />
+        <ResponsiveGrid.Right isLayersPanelVisible={isLayersPanelVisible} xs={!isLayersPanelVisible ? 12 : 0} md={8}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              [theme.breakpoints.up('md')]: { justifyContent: 'right' },
+              [theme.breakpoints.down('md')]: { justifyContent: 'space-between' },
+            }}
+          >
+            <Box sx={{ [theme.breakpoints.up('md')]: { display: 'none' } }}>
+              <Typography component="span">{selectedLayer}</Typography>
+            </Box>
+            <Box>
+              <EnlargeButton isEnlargeDataTable={isEnlargeDataTable} setIsEnlargeDataTable={setIsEnlargeDataTable} />
+              <CloseButton isLayersPanelVisible={isLayersPanelVisible} setIsLayersPanelVisible={setIsLayersPanelVisible} />
+            </Box>
+          </Box>
         </ResponsiveGrid.Right>
       </ResponsiveGrid.Root>
       <ResponsiveGrid.Root sx={{ marginTop: '1rem' }}>