From 58a9135424c46c7df1b4cf4cdb300e674cb199c8 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Mon, 11 Sep 2023 10:50:13 +0200 Subject: [PATCH] fix: changing height of window was leaving blank space below map --- src/components/app/App.css | 3 -- src/components/app/App.js | 4 +-- src/components/app/AppLayout.js | 12 ++++--- src/components/app/FileMenu.js | 4 --- .../app/styles/AppLayout.module.css | 4 --- .../app/styles/DetailsPanel.module.css | 1 - .../styles/DownloadMenubar.module.css | 3 +- .../layers/styles/LayersPanel.module.css | 2 -- .../layers/styles/LayersToggle.module.css | 1 - src/components/map/MapPosition.js | 32 ++++++------------- 10 files changed, 20 insertions(+), 46 deletions(-) diff --git a/src/components/app/App.css b/src/components/app/App.css index 8f8226035..c938f8e6f 100644 --- a/src/components/app/App.css +++ b/src/components/app/App.css @@ -2,9 +2,6 @@ --left-panel-width: 300px; --right-panel-width: 380px; - --transition-time: 100ms; - --transition-style: ease-out; - --header-height: 48px; --toolbar-height: 32px; } diff --git a/src/components/app/App.js b/src/components/app/App.js index 8d4c0d735..762d13b8a 100644 --- a/src/components/app/App.js +++ b/src/components/app/App.js @@ -51,10 +51,10 @@ const App = () => { }, [systemSettings, dispatch]) return !isEmpty(systemSettings) ? ( -
+ <> -
+ ) : null } diff --git a/src/components/app/AppLayout.js b/src/components/app/AppLayout.js index a02e552bb..bbeabc706 100644 --- a/src/components/app/AppLayout.js +++ b/src/components/app/AppLayout.js @@ -19,7 +19,9 @@ const AppLayout = () => { const [interpretationsRenderId, setInterpretationsRenderId] = useState(1) const dataTableOpen = useSelector((state) => !!state.dataTable) - const downloadMode = useSelector((state) => !!state.download.downloadMode) + const downloadModeOpen = useSelector( + (state) => !!state.download.downloadMode + ) const detailsPanelOpen = useSelector( (state) => state.ui.rightPanelOpen && !state.orgUnitProfile ) @@ -30,22 +32,22 @@ const AppLayout = () => { return ( <> - {downloadMode ? ( + {downloadModeOpen ? ( ) : ( )}
- {downloadMode ? : } + {downloadModeOpen ? : }
{dataTableOpen && }
- {!downloadMode && ( + {!downloadModeOpen && ( diff --git a/src/components/app/FileMenu.js b/src/components/app/FileMenu.js index 27ec54cb4..382d8c5de 100644 --- a/src/components/app/FileMenu.js +++ b/src/components/app/FileMenu.js @@ -56,13 +56,9 @@ const getSaveFailureMessage = (message) => const FileMenu = ({ onFileMenuAction }) => { const { d2 } = useD2() const engine = useDataEngine() - const map = useSelector((state) => state.map) - const dispatch = useDispatch() - const { keyDefaultBaseMap } = useSystemSettings() - //alerts const saveAlert = useAlert(ALERT_MESSAGE_DYNAMIC, ALERT_OPTIONS_DYNAMIC) const saveAsAlert = useAlert(ALERT_MESSAGE_DYNAMIC, ALERT_OPTIONS_DYNAMIC) const deleteAlert = useAlert( diff --git a/src/components/app/styles/AppLayout.module.css b/src/components/app/styles/AppLayout.module.css index 58074ccdd..be2ac384e 100644 --- a/src/components/app/styles/AppLayout.module.css +++ b/src/components/app/styles/AppLayout.module.css @@ -13,7 +13,3 @@ flex: auto; position: relative; } - -.downloadMap { - flex: auto; -} diff --git a/src/components/app/styles/DetailsPanel.module.css b/src/components/app/styles/DetailsPanel.module.css index 3d9fe6867..42e2cc665 100644 --- a/src/components/app/styles/DetailsPanel.module.css +++ b/src/components/app/styles/DetailsPanel.module.css @@ -1,6 +1,5 @@ .detailsPanel { width: var(--right-panel-width); - transition: width var(--transition-time) var(--transition-style); } .detailsPanel.collapsed { diff --git a/src/components/download/styles/DownloadMenubar.module.css b/src/components/download/styles/DownloadMenubar.module.css index 505c6817f..fccd907d2 100644 --- a/src/components/download/styles/DownloadMenubar.module.css +++ b/src/components/download/styles/DownloadMenubar.module.css @@ -1,14 +1,13 @@ .downloadModeMenu { display: flex; + position: absolute; align-items: center; width: 100%; height: var(--header-height); z-index: 1200; background-color: var(--colors-grey600); - position: absolute; left: 0; top: 0 - } .downloadModeMenu button { diff --git a/src/components/layers/styles/LayersPanel.module.css b/src/components/layers/styles/LayersPanel.module.css index ce4bf7f9e..7edd3910a 100644 --- a/src/components/layers/styles/LayersPanel.module.css +++ b/src/components/layers/styles/LayersPanel.module.css @@ -1,6 +1,5 @@ .layersPanel { width: var(--left-panel-width); - transition: width var(--transition-time) var(--transition-style); } .layersPanel.collapsed { @@ -15,7 +14,6 @@ overflow-y: auto; z-index: 1190; transform: translateX(0); - transition: transform var(--transition-time) var(--transition-style); } .layersPanel.collapsed .layersPanelInner { diff --git a/src/components/layers/styles/LayersToggle.module.css b/src/components/layers/styles/LayersToggle.module.css index 319437c3a..e4dcfa7a4 100644 --- a/src/components/layers/styles/LayersToggle.module.css +++ b/src/components/layers/styles/LayersToggle.module.css @@ -10,7 +10,6 @@ box-shadow: 3px 1px 5px -1px rgba(0, 0, 0, 0.2); z-index: 1100; cursor: pointer; - transition: left var(--transition-time) var(--transition-style); } .layersToggle.collapsed { diff --git a/src/components/map/MapPosition.js b/src/components/map/MapPosition.js index 553eb9dae..fd44a1085 100644 --- a/src/components/map/MapPosition.js +++ b/src/components/map/MapPosition.js @@ -6,7 +6,6 @@ import { getSplitViewLayer } from '../../util/helpers.js' import DownloadMapInfo from '../download/DownloadMapInfo.js' import NorthArrow from '../download/NorthArrow.js' import MapContainer from '../map/MapContainer.js' -import { useWindowDimensions } from '../WindowDimensionsProvider.js' import styles from './styles/MapPosition.module.css' const MapPosition = () => { @@ -22,18 +21,16 @@ const MapPosition = () => { showNorthArrow, } = useSelector((state) => state.download) const { id: mapId, mapViews: layers } = useSelector((state) => state.map) - const { layersPanelOpen, rightPanelOpen, dataTableHeight } = useSelector( + const { layersPanelOpen, dataTableHeight } = useSelector( (state) => state.ui ) const dataTableOpen = useSelector((state) => !!state.dataTable) - const { height } = useWindowDimensions() - - let mapHeight = height - HEADER_HEIGHT + let mapHeight = `calc(100vh - ${HEADER_HEIGHT}px))` if (dataTableOpen) { - mapHeight = mapHeight - dataTableHeight + mapHeight = `calc(100vh - ${HEADER_HEIGHT}px - ${dataTableHeight}px)` } else if (!downloadMode) { - mapHeight = mapHeight - APP_MENU_HEIGHT + mapHeight = `calc(100vh - ${HEADER_HEIGHT}px - ${APP_MENU_HEIGHT}px)` } const downloadMapInfoOpen = @@ -45,24 +42,15 @@ const MapPosition = () => { const isSplitView = !!getSplitViewLayer(layers) - const style = window.getComputedStyle(document.documentElement) - - const transitionTime = - parseInt( - style.getPropertyValue('--transition-time').replace('px', '') - ) + 50 - // Trigger map resize when panels are expanded, collapsed or dragged useEffect(() => { setResizeCount((count) => count + 1) - }, [dataTableOpen, dataTableHeight, downloadMapInfoOpen]) - - // Separate effect for actions that involve an animated transition - useEffect(() => { - setTimeout(() => { - setResizeCount((count) => count + 1) - }, transitionTime) - }, [layersPanelOpen, rightPanelOpen, transitionTime]) + }, [ + dataTableOpen, + dataTableHeight, + downloadMapInfoOpen, + layersPanelOpen.rightPanelOpen, + ]) // Reset bearing and pitch when new map (mapId changed) useEffect(() => {