From 195d2ea36b7e14d2d4ebc6839a1d1564bbcb9728 Mon Sep 17 00:00:00 2001 From: Ivan Gabriele Date: Thu, 30 Nov 2023 13:48:52 +0100 Subject: [PATCH] Fix window white space when toggling map regulatory zones --- .../src/domain/shared_slices/Regulatory.ts | 4 +- .../RegulatoryZones/RegulatoryTopic.tsx | 46 ++++++------- .../LayersSidebar/RegulatoryZones/index.tsx | 64 +++++++++---------- .../RegulatoryLayerSearchResultTopic.tsx | 16 ++--- .../RegulatoryLayerSearchResultZone.tsx | 9 +-- 5 files changed, 63 insertions(+), 76 deletions(-) diff --git a/frontend/src/domain/shared_slices/Regulatory.ts b/frontend/src/domain/shared_slices/Regulatory.ts index cd6a8a247f..8a56cfa286 100644 --- a/frontend/src/domain/shared_slices/Regulatory.ts +++ b/frontend/src/domain/shared_slices/Regulatory.ts @@ -112,16 +112,16 @@ const regulatorySlice = createSlice({ */ addRegulatoryZonesToMyLayers(state, action) { const myRegulatoryLayers = { ...state.selectedRegulatoryLayers } + // TODO Use Redux Persist. const myRegulatoryLayerIds = getLocalStorageState([], SELECTED_REG_ZONES_IDS_LOCAL_STORAGE_KEY) + // TODO Make that functional. action.payload.forEach(regulatoryZone => { const myTopicRegulatoryLayer = myRegulatoryLayers[regulatoryZone.topic] if (!myTopicRegulatoryLayer || !myTopicRegulatoryLayer.length) { - // TODO Make that functional. myRegulatoryLayers[regulatoryZone.topic] = [regulatoryZone] } else if (myTopicRegulatoryLayer && !myTopicRegulatoryLayer.some(zone => zone.id === regulatoryZone.id)) { - // TODO Make that functional. myRegulatoryLayers[regulatoryZone.topic] = myTopicRegulatoryLayer.concat(regulatoryZone) } diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryTopic.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryTopic.tsx index 1e3727f2e0..9dd9ef3bdd 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryTopic.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryTopic.tsx @@ -1,4 +1,4 @@ -import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react' +import { memo, useCallback, useEffect, useRef, useState } from 'react' import styled from 'styled-components' import { RegulatoryZone } from './RegulatoryZone' @@ -77,12 +77,6 @@ function UnmemoizedRegulatoryTopic({ const onMouseEnter = () => !isOver && setIsOver(true) const onMouseLeave = () => isOver && setIsOver(false) - useLayoutEffect(() => { - if (ref.current && regulatoryTopicsOpened[regulatoryTopicsOpened.length - 1] === regulatoryTopic) { - ref.current.scrollIntoView({ block: 'start', inline: 'nearest' }) - } - }, [regulatoryTopic, regulatoryTopicsOpened]) - useEffect(() => { if (showedLayers && regulatoryTopic) { const topicFoundInShowedLayers = showedLayers.some(layer => layer.topic === regulatoryTopic) @@ -221,18 +215,18 @@ const Text = styled.span` ` const Name = styled.span` - line-height: 2.7em; + display: inline-block; font-size: 13px; + line-height: 2.7em; + overflow: hidden; padding: 2px 10px; - width: 79%; - display: inline-block; text-overflow: ellipsis; - overflow: hidden; + width: 79%; ` const ZonesNumber = styled.span` - font-size: 11px; color: ${COLORS.slateGray}; + font-size: 11px; margin-right: 10px; ` @@ -240,13 +234,13 @@ const Zone = styled.span<{ $isLastItem: boolean $isOpen: boolean }>` - width: 100%; + align-items: center; + border-bottom: 1px solid ${p => (!p.$isOpen && p.$isLastItem ? p.theme.color.white : p.theme.color.lightGray)}; display: flex; + font-weight: 500; justify-content: space-between; - align-items: center; user-select: none; - font-weight: 500; - ${p => (!p.$isOpen && p.$isLastItem ? null : `border-bottom: 1px solid ${p.theme.color.lightGray};`)} + width: 100%; :hover { background: ${p => p.theme.color.blueGray25}; @@ -263,20 +257,18 @@ const List = styled.div<{ ` const Row = styled.li` - padding: 0px 5px 0px 0px; - margin: 0; + cursor: pointer; + display: block; font-size: 13px; - text-align: left; + line-height: 1.9em; list-style-type: none; - width: 100%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden !important; - cursor: pointer; - margin: 0; - line-height: 1.9em; - display: block; + overflow: hidden !important; + padding: 0px 5px 0px 0px; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; ` export const RegulatoryTopic = memo(UnmemoizedRegulatoryTopic) diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/index.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/index.tsx index 390a1eec8a..e1f0427851 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/index.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/index.tsx @@ -30,7 +30,7 @@ export function RegulatoryZones({ const dispatch = useMainAppDispatch() const { setLayersSideBarOpenedLayerType } = layer[namespace].actions - const { selectedRegulatoryLayers } = useMainAppSelector(state => state.regulatory) + const selectedRegulatoryLayers = useMainAppSelector(state => state.regulatory.selectedRegulatoryLayers) const advancedSearchIsOpen = useMainAppSelector(state => state.regulatoryLayerSearch.advancedSearchIsOpen) const { layersSidebarOpenedLayerType } = useMainAppSelector(state => state.layer) @@ -100,27 +100,23 @@ export function RegulatoryZones({ > Mes zones réglementaires - {selectedRegulatoryLayers && ( + {selectedRegulatoryLayers && isOpen && ( - {isOpen && ( - <> - {Object.keys(selectedRegulatoryLayers).length > 0 ? ( - Object.keys(selectedRegulatoryLayers).map((regulatoryTopic, index) => ( - - )) - ) : ( - Aucune zone sélectionnée - )} - + {Object.keys(selectedRegulatoryLayers).length > 0 ? ( + Object.keys(selectedRegulatoryLayers).map((regulatoryTopic, index) => ( + + )) + ) : ( + Aucune zone sélectionnée )} )} @@ -138,16 +134,21 @@ const RegulatoryLayersTitle = styled.div<{ $regulatoryLayersAddedToMySelection: boolean $showRegulatoryLayers: boolean }>` - height: 30px; - padding-top: 5px; + animation: ${p => (p.$regulatoryLayersAddedToMySelection ? 'blink' : '')} 0.3s ease forwards; + background: ${p => p.theme.color.charcoal}; border-bottom: 1px solid rgba(255, 255, 255, 0.3); - border-top-left-radius: 2px; - border-top-right-radius: 2px; border-bottom-left-radius: ${p => (p.$showRegulatoryLayers ? '0' : '2px')}; border-bottom-right-radius: ${p => (p.$showRegulatoryLayers ? '0' : '2px')}; - background: ${p => p.theme.color.charcoal}; - - animation: ${p => (p.$regulatoryLayersAddedToMySelection ? 'blink' : '')} 0.3s ease forwards; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + color: ${p => p.theme.color.gainsboro}; + cursor: pointer; + font-size: 16px; + height: 30px; + padding-left: 20px; + padding-top: 5px; + text-align: left; + user-select: none; @keyframes blink { 0% { @@ -170,13 +171,6 @@ const RegulatoryLayersTitle = styled.div<{ } } - color: ${p => p.theme.color.gainsboro}; - font-size: 16px; - cursor: pointer; - text-align: left; - padding-left: 20px; - user-select: none; - > div { float: right; margin-top: 4px; diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx index 9d19801c18..d1fb5a3613 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx @@ -23,7 +23,7 @@ function UnmemoizedRegulatoryLayerSearchResultTopic({ }: RegulatoryLayerSearchResultTopicProps) { const dispatch = useMainAppDispatch() - const regulatory = useMainAppSelector(state => state.regulatory) + const selectedRegulatoryLayers = useMainAppSelector(state => state.regulatory.selectedRegulatoryLayers) const regulatoryLayerSearch = useMainAppSelector(state => state.regulatoryLayerSearch) const { regulatoryZonesChecked, searchResultZones, searchResultZonesLength } = useMemo<{ @@ -63,21 +63,21 @@ function UnmemoizedRegulatoryLayerSearchResultTopic({ }, [regulatoryLayerSearch, regulatoryLayerLawType, regulatoryLayerTopic]) const numberOfTotalZones = useMemo(() => { - if (!regulatory.selectedRegulatoryLayers || !regulatoryLayerLawType || !regulatoryLayerTopic) { + if (!selectedRegulatoryLayers || !regulatoryLayerLawType || !regulatoryLayerTopic) { return 0 } - const regulatoryLayer = regulatory.selectedRegulatoryLayers[regulatoryLayerLawType] + const regulatoryLayer = selectedRegulatoryLayers[regulatoryLayerLawType] if (!regulatoryLayer) { return 0 } return regulatoryLayer[regulatoryLayerTopic]?.length || 0 - }, [regulatory, regulatoryLayerLawType, regulatoryLayerTopic]) + }, [regulatoryLayerLawType, regulatoryLayerTopic, selectedRegulatoryLayers]) const allZonesAreAlreadySelected = - regulatory.selectedRegulatoryLayers && regulatoryLayerTopic - ? regulatory.selectedRegulatoryLayers[regulatoryLayerTopic]?.length === searchResultZonesLength + selectedRegulatoryLayers && regulatoryLayerTopic + ? selectedRegulatoryLayers[regulatoryLayerTopic]?.length === searchResultZonesLength : false const [zonesAreOpen, setZonesAreOpen] = useState(false) @@ -128,9 +128,9 @@ function UnmemoizedRegulatoryLayerSearchResultTopic({ !!state.regulatoryLayerSearch.regulatoryZonesChecked?.find(zone => zone.id === regulatoryZone.id) ) - const zoneIsAlreadySelected = useMainAppSelector(state => { - const { selectedRegulatoryLayers } = state.regulatory + const selectedRegulatoryLayers = useMainAppSelector(state => state.regulatory.selectedRegulatoryLayers) + + const zoneIsAlreadySelected = useMemo(() => { if (!selectedRegulatoryLayers) { return false } @@ -36,7 +37,7 @@ export function RegulatoryLayerSearchResultZone({ isOpen, regulatoryZone }: Regu } return selectedRegulatoryLayersZone.find(zone => zone.id === regulatoryZone.id) - }) + }, [regulatoryZone.id, regulatoryZone.topic, selectedRegulatoryLayers]) const zoneStyle = getRegulatoryLayerStyle(undefined, regulatoryZone) const [metadataIsShown, setMetadataIsShown] = useState(false)