switch to lightbox

Canadian-Geospatial-Platform · Jul 16, 2024 · 706c21e · 706c21e
1 parent 3a231d4
commit 706c21e
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 47 deletions.
diff --git a/packages/geoview-core/src/core/components/legend/legend-layer.tsx b/packages/geoview-core/src/core/components/legend/legend-layer.tsx
@@ -1,6 +1,5 @@
-import { Modal, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
 import {
   Box,
   ListItem,
@@ -27,52 +26,13 @@ import { useMapStoreActions } from '@/core/stores/';
 import { getSxClasses } from './legend-styles';
 import { LayerIcon } from '@/core/components/common/layer-icon';
 import { logger } from '@/core/utils/logger';
+import { LightboxSingleImage } from '../lightbox/lightbox';
 import { CV_CONST_LAYER_TYPES } from '@/api/config/types/config-constants';
-import { useGeoViewMapId } from '@/core/stores/geoview-store';
 
 interface LegendLayerProps {
   layer: TypeLegendLayer;
 }
 
-interface LegendLayerImageProps {
-  imgSrc: string;
-}
-export function LegendLayerImage(props: LegendLayerImageProps): JSX.Element {
-  const { imgSrc } = props;
-  const [open, setOpen] = useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-  const mapId = useGeoViewMapId();
-  const mapElem = document.getElementById(`shell-${mapId}`);
-
-  const style = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    bgcolor: 'background.paper'
-  };
-
-  const imgStyle = {
-    width: '100%', 
-    transform: 'scale(2)',
-    border: '2px solid #ccc',
-    boxShadow: 24,
-    borderRadius: 1,
-  }
-
-  return (
-    <>
-      <Box component="img" alt="icon" src={imgSrc} sx={{ maxWidth: '100%', cursor: 'pointer' }} onClick={handleOpen} />
-      <Modal open={open} onClose={handleClose} container={mapElem}>
-        <Box sx={style}>
-          <Box component="img" alt="icon" src={imgSrc} sx={imgStyle} onClick={handleOpen} />
-        </Box>
-      </Modal>
-    </>
-  );
-}
-
 export function LegendLayer({ layer }: LegendLayerProps): JSX.Element {
   // Log
   logger.logTraceRender('components/legend/legend-layer');
@@ -220,7 +180,7 @@ export function LegendLayer({ layer }: LegendLayerProps): JSX.Element {
     ) {
       return (
         <Collapse in={legendExpanded} sx={sxClasses.collapsibleContainer} timeout="auto">
-          <LegendLayerImage imgSrc={layer.icons[0].iconImage} />
+          <LightboxSingleImage imgSrc={layer.icons[0].iconImage} />
         </Collapse>
       );
     }

diff --git a/packages/geoview-core/src/core/components/lightbox/lightbox.tsx b/packages/geoview-core/src/core/components/lightbox/lightbox.tsx
@@ -8,6 +8,7 @@ import 'yet-another-react-lightbox/styles.css';
 
 import { CloseIcon, ArrowRightIcon, ArrowLeftIcon, DownloadIcon, Tooltip } from '@/ui';
 import { logger } from '@/core/utils/logger';
+import { Box } from '@/ui/layout';
 
 /**
  * Interface used for lightbox properties and slides
@@ -24,6 +25,25 @@ export interface LightBoxSlides {
   downloadUrl: string;
 }
 
+export interface LightboxSingleImageProps {
+  imgSrc: string;
+  alt?: string;
+}
+
+export function LightboxSingleImage(props: LightboxSingleImageProps): JSX.Element {
+  const { imgSrc, alt = '' } = props;
+  const [isOpen, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      <Box component="img" alt={alt} src={imgSrc} sx={{ maxWidth: '100%', cursor: 'pointer' }} onClick={handleOpen} />
+      <Lightbox open={isOpen} close={handleClose} slides={[{ src: imgSrc }]} />
+    </>
+  );
+}
+
 /**
  * Create an element that displays a lightbox
  *

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
@@ -74,7 +74,7 @@ export default function NavbarPanelButton({ buttonPanel }: NavbarPanelButtonType
           placement="left-end"
           onClose={handleClickAway}
           container={shellContainer}
-          sx={{ marginRight: '5px !important'}}
+          sx={{ marginRight: '5px !important' }}
         >
           <Paper sx={{ width: `${buttonPanel.panel?.width ?? 300}px`, maxHeight: '500px' }}>
             <DialogTitle sx={sxClasses.popoverTitle}>{(buttonPanel.panel?.title as string) ?? ''}</DialogTitle>

diff --git a/packages/geoview-core/src/ui/panel/panel-style.ts b/packages/geoview-core/src/ui/panel/panel-style.ts
@@ -5,7 +5,7 @@ import { Theme } from '@mui/material/styles';
 export const getSxClasses = (theme: Theme): any => ({
   panelContainer: {
     backgroundColor: theme.palette.geoViewColor?.bgColor.main,
-    height: 'calc(100% - 35px)',
+    height: 'calc(100%)',
     borderRadius: 0,
     flexDirection: 'column',
     [theme.breakpoints.down('sm')]: {

diff --git a/packages/geoview-core/src/ui/panel/panel.tsx b/packages/geoview-core/src/ui/panel/panel.tsx
@@ -12,9 +12,10 @@ import { logger } from '@/core/utils/logger';
 
 import { TypeIconButtonProps } from '@/ui/icon-button/icon-button-types';
 import { getSxClasses } from './panel-style';
-import { useUIActiveTrapGeoView } from '@/core/stores/store-interface-and-intial-values/ui-state';
+import { useUIActiveTrapGeoView, useUIMapInfoExpanded } from '@/core/stores/store-interface-and-intial-values/ui-state';
 import { useMapSize } from '@/core/stores/store-interface-and-intial-values/map-state';
 import { CV_DEFAULT_APPBAR_CORE } from '@/api/config/types/config-constants';
+import { useGeoViewMapId } from '@/core/stores/geoview-store';
 
 /**
  * Interface for panel properties
@@ -47,7 +48,9 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
 
+  const mapId = useGeoViewMapId();
   const mapSize = useMapSize();
+  const mapInfoExpanded = useUIMapInfoExpanded();
 
   // internal state
   // set the active trap value for FocusTrap
@@ -68,7 +71,6 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
     transition: `width ${theme.transitions.duration.standard}ms ease`,
     position: 'absolute',
     left: '64px',
-    height: '100%',
   };
 
   useEffect(() => {
@@ -109,6 +111,22 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
     }
   }, [mapSize, panelGroupName, open]);
 
+  /**
+   * Update the height of the panel when the mapInfo is expanded
+   */
+  useEffect(() => {
+    const mapInfo = document.getElementById(`${mapId}-mapInfo`);
+    if (panelContainerRef.current && open && mapInfo) {
+      const mapInfoHeight = mapInfo.clientHeight;
+      // panelContainerRef.current.style.height = 'calc(100%  - ' + mapInfoHeight + 'px)';
+      if (mapInfoExpanded) {
+        panelContainerRef.current.style.height = `calc(100%  - ${mapInfoHeight}px)`;
+      } else {
+        panelContainerRef.current.style.height = 'calc(100% - 35px)';
+      }
+    }
+  }, [mapInfoExpanded, mapSize]);
+
   // TODO: refactor - remove comment in tsx for production build facebook/create-react-app#9507
   return (
     <Box sx={panelContainerStyles} ref={panelContainerRef}>