From 1a893513c77e4decfe0bf09ef49bf833dc111138 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Mon, 27 May 2024 02:19:51 -0400 Subject: [PATCH] remove makeStyle from code --- .../src/core/components/map/map-style.ts | 68 +++++++++++++++++ .../overview-map-toggle-styles.ts | 23 ++++++ .../overview-map/overview-map-toggle.tsx | 35 +-------- .../components/overview-map/overview-map.tsx | 74 +------------------ 4 files changed, 96 insertions(+), 104 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/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/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({