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 (