From 7fb4088ef89f6b4ee2a4099d55d7f617f27fdd3b Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 29 May 2024 08:59:16 -0400 Subject: [PATCH] remove makeStyle from code (#2175) * remove makeStyle from code * renaming styles * after build --- .../src/core/components/app-bar/app-bar.tsx | 4 +- .../components/app-bar/buttons/version.tsx | 2 +- .../components/common/full-screen-dialog.tsx | 2 +- .../common/responsive-grid-layout.tsx | 8 +- .../core/components/data-table/data-table.tsx | 11 ++- .../components/data-table/export-button.tsx | 2 +- .../core/components/details/details-panel.tsx | 6 +- .../components/details/feature-info-new.tsx | 2 +- .../core/components/footer-bar/footer-bar.tsx | 2 +- .../layers/left-panel/single-layer.tsx | 14 +++- .../layers/right-panel/layer-details.tsx | 14 ++-- .../core/components/legend/legend-layer.tsx | 8 +- .../src/core/components/map/map-style.ts | 68 +++++++++++++++++ .../notifications/notifications.tsx | 2 +- .../overview-map-toggle-styles.ts | 23 ++++++ .../overview-map/overview-map-toggle.tsx | 35 +-------- .../components/overview-map/overview-map.tsx | 74 +------------------ .../src/ui/style/themeOptionsGenerator.ts | 8 +- .../geoview-time-slider/src/time-slider.tsx | 10 +-- 19 files changed, 148 insertions(+), 147 deletions(-) create mode 100644 packages/geoview-core/src/core/components/overview-map/overview-map-toggle-styles.ts diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx index dc3ece9773a..b5b44b4f4f8 100644 --- a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx +++ b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx @@ -323,7 +323,7 @@ export function AppBar(props: AppBarProps): JSX.Element { aria-label={buttonPanel.button.tooltip} tooltip={buttonPanel.button.tooltip} tooltipPlacement="right" - className={`style3 ${tabId === buttonPanel.button.id && isOpen ? 'active' : ''}`} + className={`buttonFilled ${tabId === buttonPanel.button.id && isOpen ? 'active' : ''}`} size="small" onClick={() => handleButtonClicked(buttonPanel.button.id!, groupName)} > @@ -349,7 +349,7 @@ export function AppBar(props: AppBarProps): JSX.Element { {appBarComponents.includes(CV_DEFAULT_APPBAR_CORE.EXPORT) && interaction === 'dynamic' && ( - + )} diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx index 333ae305d06..d3ce1eed37a 100644 --- a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx +++ b/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx @@ -79,7 +79,7 @@ export default function Version(): JSX.Element { tooltip="appbar.version" tooltipPlacement="bottom-end" onClick={handleClick} - className={`${interaction === 'dynamic' ? 'style3' : 'style4'} ${open ? 'active' : ''}`} + className={`${interaction === 'dynamic' ? 'buttonFilled' : 'style4'} ${open ? 'active' : ''}`} > diff --git a/packages/geoview-core/src/core/components/common/full-screen-dialog.tsx b/packages/geoview-core/src/core/components/common/full-screen-dialog.tsx index 1fdb070c7ce..9eb0f3f7ddd 100644 --- a/packages/geoview-core/src/core/components/common/full-screen-dialog.tsx +++ b/packages/geoview-core/src/core/components/common/full-screen-dialog.tsx @@ -12,7 +12,7 @@ function FullScreenDialog({ open, onClose, children }: FullScreenDialogProps): J return ( - + {children} diff --git a/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx b/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx index 967db612832..c7a4d741de4 100644 --- a/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx +++ b/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx @@ -124,7 +124,7 @@ const ResponsiveGridLayout = forwardRef( size="small" color="primary" variant="contained" - className="style2" + className="buttonFilledOutline" startIcon={isEnlarged ? : } sx={{ height: '40px', borderRadius: '1.5rem', boxShadow: 'none', [theme.breakpoints.down('md')]: { display: 'none' } }} onClick={() => handleIsEnlarge(!isEnlarged)} @@ -143,7 +143,7 @@ const ResponsiveGridLayout = forwardRef( size="small" color="primary" variant="contained" - className="style2" + className="buttonFilledOutline" sx={{ height: '40px', borderRadius: '1.5rem', @@ -176,7 +176,7 @@ const ResponsiveGridLayout = forwardRef( size="small" onClick={() => handleOpenGuide()} tooltip={t('general.openGuide')!} - className="style2" + className="buttonFilledOutline" color="primary" > @@ -190,7 +190,7 @@ const ResponsiveGridLayout = forwardRef( size="small" onClick={() => setIsFullScreen(!isFullScreen)} tooltip={isFullScreen ? t('general.closeFullscreen')! : t('general.openFullscreen')!} - className="style2" + className="buttonFilledOutline" color="primary" > 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 cd792cb84cc..46d18bdc9df 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 @@ -411,17 +411,20 @@ function DataTable({ data, layerPath, tableHeight = 600 }: DataTableProps): JSX. - + {/* enable column pinning options is override, so that pinning option in menu can be hide. */} - - + + - + diff --git a/packages/geoview-core/src/core/components/data-table/export-button.tsx b/packages/geoview-core/src/core/components/data-table/export-button.tsx index 135e1bd73e6..3de18bfde33 100644 --- a/packages/geoview-core/src/core/components/data-table/export-button.tsx +++ b/packages/geoview-core/src/core/components/data-table/export-button.tsx @@ -94,7 +94,7 @@ function ExportButton({ rows, columns, children }: ExportButtonProps): JSX.Eleme return ( <> - + diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx index 6a47527a159..4716a19f7f1 100644 --- a/packages/geoview-core/src/core/components/details/details-panel.tsx +++ b/packages/geoview-core/src/core/components/details/details-panel.tsx @@ -447,7 +447,7 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme tooltip="details.clearAllfeatures" tooltipPlacement="top" onClick={() => handleClearAllHighlights()} - className="style1" + className="buttonOutline" disabled={checkedFeatures.length === 0} > @@ -462,7 +462,7 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme tooltipPlacement="top" onClick={() => handleFeatureNavigateChange(-1)} disabled={currentFeatureIndex <= 0} - className="style1" + className="buttonOutline" > @@ -473,7 +473,7 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme tooltipPlacement="top" onClick={() => handleFeatureNavigateChange(1)} disabled={!memoSelectedLayerData?.features || currentFeatureIndex + 1 >= memoSelectedLayerData!.features!.length} - className="style1" + className="buttonOutline" > diff --git a/packages/geoview-core/src/core/components/details/feature-info-new.tsx b/packages/geoview-core/src/core/components/details/feature-info-new.tsx index 9ec65283bf0..d12584a66fa 100644 --- a/packages/geoview-core/src/core/components/details/feature-info-new.tsx +++ b/packages/geoview-core/src/core/components/details/feature-info-new.tsx @@ -146,7 +146,7 @@ export function FeatureInfo({ features, currentFeatureIndex }: TypeFeatureInfoPr sx={sxClasses.selectFeatureCheckbox} /> - handleZoomIn(e)} className="style1"> + handleZoomIn(e)} className="buttonOutline"> diff --git a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx index 626e93740b2..26b562b0879 100644 --- a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx +++ b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx @@ -374,7 +374,7 @@ export function FooterBar(props: FooterBarProps): JSX.Element | null { + ); @@ -218,14 +218,20 @@ export function SingleLayer({ depth, layer, setIsLayersListPanelVisible, index, if (isLayerAlwaysVisible) { return ( - + ); } return ( - handleToggleVisibility()} tooltip="layers.toggleVisibility" className="style1"> + handleToggleVisibility()} + tooltip="layers.toggleVisibility" + className="buttonOutline" + > {(() => { if (!getVisibilityFromOrderedLayerInfo(layer.layerPath)) return ; return ; @@ -246,7 +252,7 @@ export function SingleLayer({ depth, layer, setIsLayersListPanelVisible, index, size="small" onClick={handleExpandGroupClick} tooltip="layers.toggleCollapse" - className="style1" + className="buttonOutline" > {isGroupOpen ? : } diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx index 02c0b89b8b5..881e4a8c937 100644 --- a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx +++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx @@ -195,12 +195,12 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element { function renderDetailsButton(): JSX.Element { if (layerDetails.controls?.table !== false) return ( - + ); return ( - + ); @@ -212,13 +212,13 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element { ); return ( - + ); @@ -227,12 +227,12 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element { function renderZoomButton(): JSX.Element { if (layerDetails.controls?.zoom !== false) return ( - + ); return ( - + ); @@ -242,7 +242,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element { return ( {isDataTableVisible && selectedLayer?.features?.length && renderDetailsButton()} - + {renderHighlightButton()} 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 250fff072e3..d85a6a29edc 100644 --- a/packages/geoview-core/src/core/components/legend/legend-layer.tsx +++ b/packages/geoview-core/src/core/components/legend/legend-layer.tsx @@ -110,7 +110,7 @@ export function LegendLayer(props: LegendLayerProps): JSX.Element { handleToggleVisibility(e)} disabled={!isLayerVisible} > @@ -119,12 +119,12 @@ export function LegendLayer(props: LegendLayerProps): JSX.Element { handleHighlightLayer(e)} > {highlightedLayer === layer.layerPath ? : } - handleZoomTo(e)}> + handleZoomTo(e)}> @@ -203,7 +203,7 @@ export function LegendLayer(props: LegendLayerProps): JSX.Element { /> {!!(layer.children?.length > 1 || layer.items?.length > 1) && ( - + {isGroupOpen ? : } )} diff --git a/packages/geoview-core/src/core/components/map/map-style.ts b/packages/geoview-core/src/core/components/map/map-style.ts index 0a0483d2dc6..3b174e681ec 100644 --- a/packages/geoview-core/src/core/components/map/map-style.ts +++ b/packages/geoview-core/src/core/components/map/map-style.ts @@ -5,5 +5,73 @@ export const sxClasses = { width: '100%', height: '100%', position: 'relative', + + '& .ol-overviewmap.ol-custom-overviewmap': { + bottom: 'auto', + left: 'auto', + right: '5px', + top: '5px', + margin: 5, + order: 1, + padding: 0, + position: 'absolute', + borderRadius: 4, + + '& .ol-overviewmap-map': { + border: 'none', + display: 'block !important', + '-webkit-transition': '300ms linear', + '-moz-transition': '300ms linear', + '-o-transition': '300ms linear', + '-ms-transition': '300ms linear', + transition: '300ms linear', + }, + '&.ol-uncollapsible': { + bottom: 'auto', + left: 'auto', + right: 100, + top: 100, + margin: 5, + }, + '&:not(.ol-collapsed)': { + boxShadow: '0 1px 5px rgb(0 0 0 / 65%)', + borderRadius: '4px', + border: 'none', + }, + '&:is(.ol-collapsed)': { + boxShadow: '0 1px 5px rgb(0 0 0 / 65%)', + borderRadius: 4, + border: 'none', + }, + '& button': { + zIndex: 100, + position: 'absolute', + top: 0, + right: 0, + left: 'auto !important', + bottom: 'auto !important', + backgroundColor: '#cccccc', + }, + '&::before': { + content: '""', + display: 'block', + position: 'absolute', + width: 0, + height: 0, + borderRadius: 2, + zIndex: 100, + right: 0, + top: 0, + }, + '& .ol-overviewmap-box': { + backgroundColor: 'rgba(0, 0, 0, 0.2)', + }, + '& .ol-viewport': { + borderRadius: '4px', + '& .ol-layer': { + backgroundColor: '#FFF', + }, + }, + }, }, }; diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx index e439273f166..d589d9122f5 100644 --- a/packages/geoview-core/src/core/components/notifications/notifications.tsx +++ b/packages/geoview-core/src/core/components/notifications/notifications.tsx @@ -153,7 +153,7 @@ export default function Notifications(): JSX.Element { tooltip="appbar.notifications" tooltipPlacement="bottom-end" onClick={handleOpenPopover} - className={`${interaction === 'dynamic' ? 'style3' : 'style4'} ${open ? 'active' : ''}`} + className={`${interaction === 'dynamic' ? 'buttonFilled' : 'style4'} ${open ? 'active' : ''}`} color="primary" > {!hasNewNotification && } diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle-styles.ts b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle-styles.ts new file mode 100644 index 00000000000..91bfbbd357a --- /dev/null +++ b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle-styles.ts @@ -0,0 +1,23 @@ +export const sxClasses = { + toggleBtn: { + transform: 'rotate(45deg)', + color: 'black', + zIndex: 150, + '&:hover': { + cursor: 'pointer', + }, + + '&.minimapOpen': { + transform: 'rotate(-45deg)', + }, + '&.minimapClosed': { + transform: 'rotate(135deg)', + }, + }, + toggleBtnContainer: { + zIndex: 150, + position: 'absolute', + top: 0, + right: 0, + }, +}; diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx index 325e34b99e5..9e5fb47a0a8 100644 --- a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx +++ b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx @@ -3,35 +3,10 @@ import { useEffect, useRef, useState } from 'react'; import { OverviewMap as OLOverviewMap } from 'ol/control'; import { useTranslation } from 'react-i18next'; -import makeStyles from '@mui/styles/makeStyles'; - import { ChevronLeftIcon, Tooltip } from '@/ui'; import { logger } from '@/core/utils/logger'; import { Box } from '@/ui/layout'; - -// TODO: We need to find solution to remove makeStyles with either plain css or material ui. -const useStyles = makeStyles(() => ({ - toggleBtn: { - transform: 'rotate(45deg)', - color: 'black', - zIndex: 150, - '&:hover': { - cursor: 'pointer', - }, - }, - toggleBtnContainer: { - zIndex: 150, - position: 'absolute', - top: 0, - right: 0, - }, - minimapOpen: { - transform: 'rotate(-45deg)', - }, - minimapClosed: { - transform: 'rotate(135deg)', - }, -})); +import { sxClasses } from './overview-map-toggle-styles'; /** * Properties for the overview map toggle @@ -59,9 +34,6 @@ export function OverviewMapToggle(props: OverviewMapToggleProps): JSX.Element { const [status, setStatus] = useState(true); const divRef = useRef(null); - // TODO: Remove useStyle - const classes = useStyles(); - useEffect(() => { // Log logger.logTraceUseEffect('OVERVIEW-MAP-TOGGLE - mount'); @@ -99,10 +71,11 @@ export function OverviewMapToggle(props: OverviewMapToggleProps): JSX.Element { return ( - + ({ - overviewMap: { - bottom: 'auto', - left: 'auto', - right: '5px', - top: '5px', - margin: 5, - order: 1, - padding: 0, - '& .ol-overviewmap-map': { - border: 'none', - display: 'block !important', - '-webkit-transition': '300ms linear', - '-moz-transition': '300ms linear', - '-o-transition': '300ms linear', - '-ms-transition': '300ms linear', - transition: '300ms linear', - }, - '&.ol-uncollapsible': { - bottom: 'auto', - left: 'auto', - right: 100, - top: 100, - margin: 5, - }, - '&:not(.ol-collapsed)': { - boxShadow: '0 1px 5px rgb(0 0 0 / 65%)', - borderRadius: 4, - border: 'none', - }, - '&:is(.ol-collapsed)': { - boxShadow: '0 1px 5px rgb(0 0 0 / 65%)', - borderRadius: 4, - border: 'none', - }, - '& button': { - zIndex: 100, - position: 'absolute', - top: 0, - right: 0, - left: 'auto !important', - bottom: 'auto !important', - backgroundColor: '#cccccc', - }, - '&::before': { - content: '""', - display: 'block', - position: 'absolute', - width: 0, - height: 0, - borderRadius: 2, - zIndex: 100, - right: 0, - top: 0, - }, - '& .ol-overviewmap-box': { - backgroundColor: 'rgba(0, 0, 0, 0.2)', - }, - '& .ol-viewport': { - borderRadius: 4, - '& .ol-layer': { - backgroundColor: '#FFF', - }, - }, - }, -})); - type OverwiewMapProps = { olMap: OLMap; }; @@ -113,9 +44,6 @@ export function OverviewMap(props: OverwiewMapProps): JSX.Element { const displayLanguage = useAppDisplayLanguage(); const displayTheme = useAppDisplayTheme(); - // TODO: remove useStyle - const classes = useStyles(); - useEffect(() => { logger.logTraceUseEffect('OVERVIEW-MAP - zoom level changed'); const overviewMapCtrl = olMap @@ -163,7 +91,7 @@ export function OverviewMap(props: OverwiewMapProps): JSX.Element { const toggleButton = document.createElement('div'); const overviewMapControl = new OLOverviewMap({ - className: `ol-overviewmap ol-custom-overviewmap ${classes.overviewMap}`, + className: `ol-overviewmap ol-custom-overviewmap`, layers: defaultBasemap?.layers.map((layer) => { // create a tile layer for this basemap layer const tileLayer = new TileLayer({ diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index 45566690896..cc9be48fae7 100644 --- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts +++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts @@ -12,7 +12,7 @@ function tooltipsPopperContainer(): Element | null { // ? I doubt we want to define an explicit type for style properties? // eslint-disable-next-line @typescript-eslint/no-explicit-any const getButtonStyleOverrides = (geoViewColors: IGeoViewColors): any => ({ - '&.style1': { + '&.buttonOutline': { backgroundColor: 'transparent', border: `3px solid transparent`, color: `${geoViewColors.primary.main}`, @@ -27,7 +27,7 @@ const getButtonStyleOverrides = (geoViewColors: IGeoViewColors): any => ({ backgroundColor: 'transparent', }, }, - '&.style2:not(:disabled)': { + '&.buttonFilledOutline:not(:disabled)': { backgroundColor: `${geoViewColors.primary.main}`, border: `3px solid transparent`, color: `${geoViewColors.white}`, @@ -38,10 +38,10 @@ const getButtonStyleOverrides = (geoViewColors: IGeoViewColors): any => ({ boxShadow: 1, }, }, - '&.style2:disabled': { + '&.buttonFilledOutline:disabled': { backgroundColor: `${geoViewColors.bgColor.dark[150]}`, }, - '&.style3': { + '&.buttonFilled': { // used for app-bar buttons backgroundColor: `transparent`, border: `2px solid transparent`, diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx index 019edcf6a5c..639c5954481 100644 --- a/packages/geoview-time-slider/src/time-slider.tsx +++ b/packages/geoview-time-slider/src/time-slider.tsx @@ -405,7 +405,7 @@ export function TimeSlider(props: TimeSliderProps): JSX.Element {
{!singleHandle && ( )} : }