From fd4c463bcaabc0f71ac42700a0e9216bd197d378 Mon Sep 17 00:00:00 2001 From: jolevesq Date: Wed, 4 Dec 2024 10:29:44 -0500 Subject: [PATCH] Fix styles --- .../data-table/data-table-modal.tsx | 2 +- .../core/components/data-table/data-table.tsx | 4 +- .../components/export/export-modal-style.ts | 170 +++++++++--------- .../src/core/components/nav-bar/nav-bar.tsx | 2 +- .../src/core/containers/containers-style.ts | 3 +- .../src/core/containers/focus-trap.tsx | 7 +- .../circular-progress/circular-progress.tsx | 7 +- .../geoview-core/src/ui/divider/divider.tsx | 13 +- packages/geoview-core/src/ui/tabs/tabs.tsx | 11 +- 9 files changed, 106 insertions(+), 113 deletions(-) diff --git a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx index 76300b28e0e..80626764ba4 100644 --- a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx +++ b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx @@ -157,7 +157,7 @@ export default function DataTableModal(): JSX.Element { diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/packages/geoview-core/src/core/components/data-table/data-table.tsx index 48392df9e17..cda5b847cd4 100644 --- a/packages/geoview-core/src/core/components/data-table/data-table.tsx +++ b/packages/geoview-core/src/core/components/data-table/data-table.tsx @@ -476,10 +476,10 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps): columnVirtualizerOptions: { overscan: 2 }, localization: dataTableLocalization, muiTableHeadCellProps: { - sx: () => sxClasses.tableHeadCell, + sx: sxClasses.tableHeadCell, }, muiTableHeadProps: { - sx: () => sxClasses.tableHead, + sx: sxClasses.tableHead, }, defaultColumn: { muiFilterTextFieldProps: { diff --git a/packages/geoview-core/src/core/components/export/export-modal-style.ts b/packages/geoview-core/src/core/components/export/export-modal-style.ts index 829d266697b..0da76d862df 100644 --- a/packages/geoview-core/src/core/components/export/export-modal-style.ts +++ b/packages/geoview-core/src/core/components/export/export-modal-style.ts @@ -1,85 +1,85 @@ -import { Theme } from '@mui/material/styles'; -import { SxProps } from '@mui/system'; - -type SxStyles = Record>; - -/** - * Get custom sx classes for the export modal - * - * @param {Theme} theme the theme object - * @returns {Object} the sx classes object - */ -export const getSxClasses = (theme: Theme): SxStyles => ({ - content: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - padding: theme.spacing(2), - '& .MuiFormControl-root': { - marginTop: theme.spacing(2), - }, - }, - exportContainer: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - backgroundColor: theme.palette.background.paper, - padding: theme.spacing(2), - }, - mapContainer: { - width: '100%', - marginBottom: theme.spacing(2), - '& img': { - maxWidth: '100%', - height: 'auto', - }, - }, - legendContainer: { - width: '100%', - marginTop: theme.spacing(2), - '& img': { - maxWidth: '100%', - height: 'auto', - }, - }, - exportTitle: { - width: '100%', - textAlign: 'center', - marginBottom: theme.spacing(2), - color: theme.palette.text.primary, - }, - attributionContainer: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - marginTop: theme.spacing(2), - padding: theme.spacing(1), - backgroundColor: theme.palette.background.default, - }, - northArrowContainer: { - display: 'flex', - alignItems: 'center', - '& svg': { - width: '24px', - height: '24px', - }, - }, - scaleContainer: { - display: 'flex', - alignItems: 'center', - fontSize: '0.875rem', - }, - loadingContainer: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: '100%', - height: '200px', - }, - dialogContent: { - minHeight: '400px', - maxHeight: '80vh', - overflow: 'auto', - }, -}); +import { Theme } from '@mui/material/styles'; +import { SxProps } from '@mui/system'; + +type SxStyles = Record>; + +/** + * Get custom sx classes for the export modal + * + * @param {Theme} theme the theme object + * @returns {Object} the sx classes object + */ +export const getSxClasses = (theme: Theme): SxStyles => ({ + content: { + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(2), + padding: theme.spacing(2), + '& .MuiFormControl-root': { + marginTop: theme.spacing(2), + }, + }, + exportContainer: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + backgroundColor: theme.palette.background.paper, + padding: theme.spacing(2), + }, + mapContainer: { + width: '100%', + marginBottom: theme.spacing(2), + '& img': { + maxWidth: '100%', + height: 'auto', + }, + }, + legendContainer: { + width: '100%', + marginTop: theme.spacing(2), + '& img': { + maxWidth: '100%', + height: 'auto', + }, + }, + exportTitle: { + width: '100%', + textAlign: 'center', + marginBottom: theme.spacing(2), + color: theme.palette.text.primary, + }, + attributionContainer: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + marginTop: theme.spacing(2), + padding: theme.spacing(1), + backgroundColor: theme.palette.background.default, + }, + northArrowContainer: { + display: 'flex', + alignItems: 'center', + '& svg': { + width: '24px', + height: '24px', + }, + }, + scaleContainer: { + display: 'flex', + alignItems: 'center', + fontSize: '0.875rem', + }, + loadingContainer: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: '200px', + }, + dialogContent: { + minHeight: '400px', + maxHeight: '80vh', + overflow: 'auto', + }, +}); diff --git a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx index bed4b708b1c..1b9d10b5081 100644 --- a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx +++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx @@ -190,7 +190,7 @@ export function NavBar(props: NavBarProps): JSX.Element { } return ( - + {Object.keys(buttonPanelGroups).map((key) => renderButtonPanelGroup(buttonPanelGroups[key], key))} ); diff --git a/packages/geoview-core/src/core/containers/containers-style.ts b/packages/geoview-core/src/core/containers/containers-style.ts index 1664522f151..6325cdb409e 100644 --- a/packages/geoview-core/src/core/containers/containers-style.ts +++ b/packages/geoview-core/src/core/containers/containers-style.ts @@ -29,8 +29,7 @@ export const getFocusTrapSxClasses = (theme: Theme): SxStyles => { border: 'unset', }, enableFocus: { - border: `5px solid ${borderColor} - }`, + border: `5px solid ${borderColor}`, }, }; }; diff --git a/packages/geoview-core/src/core/containers/focus-trap.tsx b/packages/geoview-core/src/core/containers/focus-trap.tsx index 800efcc6a17..b36d84e42cd 100644 --- a/packages/geoview-core/src/core/containers/focus-trap.tsx +++ b/packages/geoview-core/src/core/containers/focus-trap.tsx @@ -102,7 +102,8 @@ export function FocusTrapDialog(props: FocusTrapProps): JSX.Element { const handleExit = (evt: KeyboardEvent): void => { if (!ARROW_KEY_CODES.includes(evt.code as string)) { // remove the border from the map - mapElementStore!.style.border = sxClasses.exitFocus.border; + // TODO: Handle the focus style/stste within the store (set here, listen in map) + mapElementStore!.style.border = 'unset'; } if (evt.code === 'KeyQ' && evt.ctrlKey) { @@ -130,7 +131,7 @@ export function FocusTrapDialog(props: FocusTrapProps): JSX.Element { const handleEnable = (): void => { setOpen(false); setFocusTrap(); - document.getElementById(`mapTargetElement-${mapId}`)!.style.border = sxClasses.enableFocus.border; + document.getElementById(`mapTargetElement-${mapId}`)!.style.border = '5px solid black'; }; const handleSkip = (): void => { @@ -164,7 +165,7 @@ export function FocusTrapDialog(props: FocusTrapProps): JSX.Element { setOpen(false); exitFocus(); // remove border from the map - document.getElementById(`mapTargetElement-${mapId}`)!.style.border = sxClasses.exitFocus.border; + document.getElementById(`mapTargetElement-${mapId}`)!.style.border = 'unset'; }, { once: true } ); diff --git a/packages/geoview-core/src/ui/circular-progress/circular-progress.tsx b/packages/geoview-core/src/ui/circular-progress/circular-progress.tsx index f9817fbf619..a73256cfb60 100644 --- a/packages/geoview-core/src/ui/circular-progress/circular-progress.tsx +++ b/packages/geoview-core/src/ui/circular-progress/circular-progress.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/require-default-props */ import { CSSProperties } from 'react'; -import { useTheme } from '@mui/material/styles'; +import { SxProps, Theme, useTheme } from '@mui/material/styles'; import { CircularProgress as MaterialCircularProgress, CircularProgressProps, Box, Fade } from '@mui/material'; import { getSxClasses } from './circular-progress-style'; @@ -12,7 +12,7 @@ import { getSxClasses } from './circular-progress-style'; interface TypeCircularProgressProps extends CircularProgressProps { isLoaded: boolean; style?: CSSProperties; - sx?: CSSProperties; + sx?: SxProps; } /** @@ -27,9 +27,10 @@ export function CircularProgress(props: TypeCircularProgressProps): JSX.Element const theme = useTheme(); const sxClasses = getSxClasses(theme); + const sxMerged = { ...sxClasses.loading, ...sx }; return ( - + diff --git a/packages/geoview-core/src/ui/divider/divider.tsx b/packages/geoview-core/src/ui/divider/divider.tsx index fbcd358b0f8..cdc14ff4cb5 100644 --- a/packages/geoview-core/src/ui/divider/divider.tsx +++ b/packages/geoview-core/src/ui/divider/divider.tsx @@ -1,5 +1,5 @@ /* eslint-disable react/require-default-props */ -import { useTheme } from '@mui/material/styles'; +import { SxProps, Theme, useTheme } from '@mui/material/styles'; import { Divider as MaterialDivider, DividerProps } from '@mui/material'; import { getSxClasses } from './divider-style'; @@ -10,6 +10,7 @@ import { getSxClasses } from './divider-style'; interface TypeDividerProps extends DividerProps { orientation?: 'horizontal' | 'vertical'; grow?: boolean; + sx?: SxProps; } /** @@ -30,12 +31,6 @@ export function Divider(props: TypeDividerProps): JSX.Element { dividerOrientation = orientation === 'horizontal' ? sxClasses.horizontal : sxClasses.vertical; } - return ( - - ); + const sxMerged = { ...(grow ? sxClasses.grow : {}), ...dividerOrientation, ...sx }; + return ; } diff --git a/packages/geoview-core/src/ui/tabs/tabs.tsx b/packages/geoview-core/src/ui/tabs/tabs.tsx index df292199c20..09211ef5cc7 100644 --- a/packages/geoview-core/src/ui/tabs/tabs.tsx +++ b/packages/geoview-core/src/ui/tabs/tabs.tsx @@ -218,6 +218,9 @@ export function Tabs(props: TypeTabsProps): JSX.Element { tabPanelRef.current?.addEventListener('keydown', handleFooterbarEscapeKey); }, [selectedTab, isCollapsed, tabs, onCloseKeyboard]); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const sxMerged: any = { ...sxClasses.panel, visibility: TabContentVisibilty }; + return ( @@ -270,13 +273,7 @@ export function Tabs(props: TypeTabsProps): JSX.Element { {rightButtons as ReactNode} - + {tabPanels.map((tab, index) => { return tab ? (