From 17688e9e3840ed8e17ab40b739a2a905be92114d Mon Sep 17 00:00:00 2001 From: Mateusz Konieczny Date: Thu, 19 Jan 2023 14:12:33 +0100 Subject: [PATCH] new interface for layer handling closes #1059 --- .../frontend/displayPreferences-context.tsx | 56 +++++++++++++++---- app/src/frontend/map/data-switcher.tsx | 16 ++++-- app/src/frontend/map/map-button.css | 20 +++---- app/src/frontend/map/map.tsx | 18 +----- app/src/frontend/map/reset-switcher.tsx | 20 ------- 5 files changed, 68 insertions(+), 62 deletions(-) delete mode 100644 app/src/frontend/map/reset-switcher.tsx diff --git a/app/src/frontend/displayPreferences-context.tsx b/app/src/frontend/displayPreferences-context.tsx index 67c0f69a..01a0ff3b 100644 --- a/app/src/frontend/displayPreferences-context.tsx +++ b/app/src/frontend/displayPreferences-context.tsx @@ -3,8 +3,8 @@ import React, { createContext, useCallback, useContext, useEffect, useState } fr import { LayerEnablementState, MapTheme } from './config/map-config'; interface DisplayPreferencesContextState { - resetLayers: (e: React.FormEvent) => void; - anyLayerModifiedState: () => boolean; + showOverlayList: (e: React.FormEvent) => void; + resetLayersAndHideTheirList: (e: React.FormEvent) => void; vista: LayerEnablementState; vistaSwitch: (e: React.FormEvent) => void; @@ -41,6 +41,10 @@ interface DisplayPreferencesContextState { darkLightTheme: MapTheme; darkLightThemeSwitch: (e: React.FormEvent) => void; darkLightThemeSwitchOnClick: React.MouseEventHandler; + + showLayerSelection: LayerEnablementState; + showLayerSelectionSwitch: (e: React.FormEvent) => void; + showLayerSelectionSwitchOnClick: React.MouseEventHandler; } const stub = (): never => { @@ -48,8 +52,8 @@ const stub = (): never => { }; export const DisplayPreferencesContext = createContext({ - resetLayers: stub, - anyLayerModifiedState: stub, + showOverlayList: stub, + resetLayersAndHideTheirList: stub, vista: undefined, vistaSwitch: stub, @@ -86,6 +90,10 @@ export const DisplayPreferencesContext = createContext {}; @@ -99,6 +107,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { const defaultParcel = 'disabled' const defaultConservation = 'disabled' const defaultHistoricData = 'disabled' + const defaultShowLayerSelection = 'disabled' const [vista, setVista] = useState(defaultVista); const [flood, setFlood] = useState(defaultFlood); const [creative, setCreative] = useState(defaultCreative); @@ -108,10 +117,17 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { const [conservation, setConservation] = useState(defaultConservation); const [historicData, setHistoricData] = useState(defaultHistoricData); const [darkLightTheme, setDarkLightTheme] = useState('night'); + const [showLayerSelection, setShowLayerSelection] = useState(defaultShowLayerSelection); - const resetLayers = useCallback( + const showOverlayList = useCallback( + (e) => { + setShowLayerSelection('enabled') + }, + [] + ) + + const resetLayersAndHideTheirList = useCallback( (e) => { - e.preventDefault(); setVista(defaultVista); setFlood(defaultFlood); setCreative(defaultCreative); @@ -120,8 +136,9 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { setParcel(defaultParcel); setConservation(defaultConservation); setHistoricData(defaultHistoricData); + setShowLayerSelection(defaultShowLayerSelection); // reset layers + hiding this panel is integrated into one action //setDarkLightTheme('night'); // reset only layers - }, + }, [] ) @@ -289,11 +306,26 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { setDarkLightTheme(newDarkLightTheme); } + const showLayerSelectionSwitch = useCallback( + (e) => { + flipShowLayerSelection(e) + }, + [showLayerSelection], + ) + const showLayerSelectionSwitchOnClick = (e) => { + flipShowLayerSelection(e) + } + function flipShowLayerSelection(e) { + e.preventDefault(); + const newShowLayerSelection = (showLayerSelection === 'enabled')? 'disabled' : 'enabled'; + setShowLayerSelection(newShowLayerSelection); + } + return ( = ({children}) => { darkLightTheme, darkLightThemeSwitch, - darkLightThemeSwitchOnClick + darkLightThemeSwitchOnClick, + + showLayerSelection, + showLayerSelectionSwitch, + showLayerSelectionSwitchOnClick }}> {children} diff --git a/app/src/frontend/map/data-switcher.tsx b/app/src/frontend/map/data-switcher.tsx index 9f2c5295..c7fd8e7a 100644 --- a/app/src/frontend/map/data-switcher.tsx +++ b/app/src/frontend/map/data-switcher.tsx @@ -4,17 +4,23 @@ import './map-button.css'; import { useDisplayPreferences } from '../displayPreferences-context'; interface DataLayerSwitcherProps { - currentDisplay: string; - onSubmit: (e: React.FormEvent) => void; } const DataLayerSwitcher: React.FC = (props) => { - const { darkLightTheme } = useDisplayPreferences(); + const { showLayerSelection, showOverlayList, resetLayersAndHideTheirList, darkLightTheme } = useDisplayPreferences(); + const handleSubmit = (evt) => { + evt.preventDefault(); + if (showLayerSelection === 'enabled') { + resetLayersAndHideTheirList(evt) + } else { + showOverlayList(evt) + } + } return ( -
+
); diff --git a/app/src/frontend/map/map-button.css b/app/src/frontend/map/map-button.css index db0e641f..6ca067f5 100644 --- a/app/src/frontend/map/map-button.css +++ b/app/src/frontend/map/map-button.css @@ -17,6 +17,10 @@ .map-button .btn { margin: 0; min-width: 310px; + color: #191b1d; +} +.map-button .btn:hover { + color: #fff; } .map-button.night .btn { color: #fff; @@ -24,7 +28,7 @@ border-color: #343a40; } .map-button.night .btn:hover { - color: #343a40; + color: #d4d7da; background-color: transparent; background-image: none; border-color: #343a40; @@ -46,11 +50,11 @@ background-image: none; } .map-button.enabled-state { - color: #61ef61; - background-color: #61ef61; + color: #75e775; + background-color: #75e775; } .map-button.enabled-state .btn{ - background-color: #61ef61; + background-color: #75e775; } .map-button.night.enabled-state { color: #448844; @@ -73,14 +77,6 @@ } } -.reset-switcher { - top: 37px; - margin-right: 60px; -} -.reset-switcher .btn { - min-width: 280px; -} - .theme-switcher { top: 77px; } diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx index 381c676c..9c2ffcbc 100644 --- a/app/src/frontend/map/map.tsx +++ b/app/src/frontend/map/map.tsx @@ -29,7 +29,6 @@ import { Legend } from './legend'; import SearchBox from './search-box'; import ThemeSwitcher from './theme-switcher'; import DataLayerSwitcher from './data-switcher'; -import { ResetSwitcher } from './reset-switcher'; import { BoroughSwitcher } from './borough-switcher'; import { ParcelSwitcher } from './parcel-switcher'; import { FloodSwitcher } from './flood-switcher'; @@ -62,8 +61,7 @@ export const ColouringMap : FC = ({ categoryMapDefinitions, children }) => { - const { darkLightTheme, darkLightThemeSwitch } = useDisplayPreferences(); - const [dataLayers, setDataLayers] = useState('disabled'); + const { darkLightTheme, darkLightThemeSwitch, showLayerSelection } = useDisplayPreferences(); const [position, setPosition] = useState(initialMapViewport.position); const [zoom, setZoom] = useState(initialMapViewport.zoom); @@ -86,15 +84,6 @@ export const ColouringMap : FC = ({ [onBuildingAction], ) - const layerSwitch = useCallback( - (e) => { - e.preventDefault(); - const newDisplayState = (dataLayers === 'enabled')? 'disabled' : 'enabled'; - setDataLayers(newDisplayState); - }, - [dataLayers], - ) - return (
= ({ mode !== 'basic' && <> - - + { - (dataLayers == "enabled") ? + (showLayerSelection == "enabled") ? <> diff --git a/app/src/frontend/map/reset-switcher.tsx b/app/src/frontend/map/reset-switcher.tsx deleted file mode 100644 index d8c06845..00000000 --- a/app/src/frontend/map/reset-switcher.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -import './map-button.css'; -import { useDisplayPreferences } from '../displayPreferences-context'; - -export const ResetSwitcher: React.FC<{}> = () => { - const { resetLayers, darkLightTheme, anyLayerModifiedState } = useDisplayPreferences(); - if(anyLayerModifiedState()) { - return ( -
- -
- ); - } else { - return <> - } -}