From 706c21e9eec3c332d6e3779b54ae50f9539952b4 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Tue, 16 Jul 2024 15:45:16 -0400 Subject: [PATCH] switch to lightbox --- .../core/components/legend/legend-layer.tsx | 46 ++----------------- .../src/core/components/lightbox/lightbox.tsx | 20 ++++++++ .../nav-bar/nav-bar-panel-button.tsx | 2 +- .../geoview-core/src/ui/panel/panel-style.ts | 2 +- packages/geoview-core/src/ui/panel/panel.tsx | 22 ++++++++- 5 files changed, 45 insertions(+), 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 index 386a0352d7b..aeb05f5dab0 100644 --- 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 ( - <> - - - - - - - - ); -} - 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 ( - + ); } diff --git a/packages/geoview-core/src/core/components/lightbox/lightbox.tsx b/packages/geoview-core/src/core/components/lightbox/lightbox.tsx index 94970abbc90..dea36947a35 100644 --- 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 ( + <> + + + + ); +} + /** * 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 index a6d6ee23c70..e731a8be29d 100644 --- 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' }} > {(buttonPanel.panel?.title as string) ?? ''} diff --git a/packages/geoview-core/src/ui/panel/panel-style.ts b/packages/geoview-core/src/ui/panel/panel-style.ts index 15005f98363..ce61b572935 100644 --- 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 index 3f3ac21dc74..8a0ac645b3c 100644 --- 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 (