From 2c6ba34125c23cb1d92d5312ca17f4361c690d32 Mon Sep 17 00:00:00 2001 From: Pavel Jankoski Date: Fri, 4 Oct 2024 12:21:11 +0200 Subject: [PATCH 1/3] console: Fix weird sidebar resizing --- pkg/webui/components/scroll-fader/index.js | 2 ++ .../components/scroll-fader/scroll-fader.styl | 1 + .../console/containers/sidebar/sidebar.styl | 30 +++++++++---------- 3 files changed, 17 insertions(+), 16 deletions(-) diff --git a/pkg/webui/components/scroll-fader/index.js b/pkg/webui/components/scroll-fader/index.js index 9624baa37e..4918856d85 100644 --- a/pkg/webui/components/scroll-fader/index.js +++ b/pkg/webui/components/scroll-fader/index.js @@ -38,11 +38,13 @@ const ScrollFader = React.forwardRef( const scrollGradientBottom = container.querySelector(`.${style.scrollGradientBottom}`) if (scrollGradientTop) { + scrollGradientTop.style.display = 'block' // Ensure gradient is visible const opacity = scrollTop < fadeHeight ? scrollTop / fadeHeight : 1 scrollGradientTop.style.opacity = opacity } if (scrollGradientBottom) { + scrollGradientBottom.style.display = 'block' // Ensure gradient is visible const scrollEnd = scrollable - fadeHeight const opacity = scrollTop < scrollEnd ? 1 : (scrollable - scrollTop) / fadeHeight scrollGradientBottom.style.opacity = opacity diff --git a/pkg/webui/components/scroll-fader/scroll-fader.styl b/pkg/webui/components/scroll-fader/scroll-fader.styl index 65cc94c5a8..b547f109bd 100644 --- a/pkg/webui/components/scroll-fader/scroll-fader.styl +++ b/pkg/webui/components/scroll-fader/scroll-fader.styl @@ -20,6 +20,7 @@ right: 0 z-index: $zi.slight + 1 opacity: 0 + display: none // Initially hidden pointer-events: none .scroll-gradient-top diff --git a/pkg/webui/console/containers/sidebar/sidebar.styl b/pkg/webui/console/containers/sidebar/sidebar.styl index ec17483c45..24c8b3a732 100644 --- a/pkg/webui/console/containers/sidebar/sidebar.styl +++ b/pkg/webui/console/containers/sidebar/sidebar.styl @@ -24,9 +24,6 @@ left: 0 height: 100vh sidebar-transition(left) - // Stylus has trouble adding multiple properties to a function - // so we have to overwrite it like this. - transition-property: left, width +media-query($bp.xxl) --sidebar-width: 22rem +media-query($bp.lg-xl) @@ -60,18 +57,19 @@ z-index: $zi.mobile-menu - 1 cursor: pointer - &-minimized - position: absolute - top: 3.8rem - left: calc(-1 * var(--sidebar-width)) - bottom: 0 - height: calc(100vh - 3.8rem) - z-index: $zi.mobile-menu + +media-query-min($bp.lg-xl) + &-minimized + position: absolute + top: 3.8rem + left: calc(-1 * var(--sidebar-width)) + bottom: 0 + height: calc(100vh - 3.8rem) + z-index: $zi.mobile-menu - &-open&.sidebar-minimized - left: 0 - box-shadow: 0 0 2rem 0 rgba(0,0,0,.05) + &-open&.sidebar-minimized + left: 0 + box-shadow: 0 0 2rem 0 rgba(0,0,0,.05) - & + .sidebar-backdrop - opacity: .05 - visibility: visible + & + .sidebar-backdrop + opacity: .05 + visibility: visible From 8683b6184d6d191809f383376456c1c349d3ff4a Mon Sep 17 00:00:00 2001 From: Pavel Jankoski Date: Fri, 4 Oct 2024 15:00:26 +0200 Subject: [PATCH 2/3] console: Include additional console redesign fixes --- pkg/webui/components/link/link.styl | 1 + pkg/webui/components/map/index.js | 28 ++++++++++++++----- pkg/webui/components/scroll-fader/index.js | 11 ++++---- .../components/scroll-fader/scroll-fader.styl | 1 - pkg/webui/components/table/tabular.styl | 2 +- 5 files changed, 29 insertions(+), 14 deletions(-) diff --git a/pkg/webui/components/link/link.styl b/pkg/webui/components/link/link.styl index 9dc7f93a16..af9a6c8ecc 100644 --- a/pkg/webui/components/link/link.styl +++ b/pkg/webui/components/link/link.styl @@ -43,6 +43,7 @@ &:visited color: var(--c-text-neutral-heavy) + // stylelint-disable declaration-no-important &:disabled cursor: not-allowed !important background: transparent diff --git a/pkg/webui/components/map/index.js b/pkg/webui/components/map/index.js index 3955e45b4c..565e1418b3 100644 --- a/pkg/webui/components/map/index.js +++ b/pkg/webui/components/map/index.js @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import React, { useEffect } from 'react' +import React, { useEffect, useState } from 'react' import { MapContainer, Marker, @@ -108,6 +108,7 @@ const MarkerRenderer = ({ marker }) => { const Controller = ({ onClick, centerOnMarkers, markers, bounds }) => { const map = useMap() + const [userInteracted, setUserInteracted] = useState(false) useEffect(() => { const handleWheel = e => { @@ -118,23 +119,36 @@ const Controller = ({ onClick, centerOnMarkers, markers, bounds }) => { const zoomLevel = map.getZoom() - delta // Calculate the new zoom level map.setZoom(zoomLevel) + setUserInteracted(true) // Mark user interaction } } + const handleUserInteracted = () => { + setUserInteracted(true) // Mark user interaction on zoom + } + + // Ensure the map resizes correctly when the container changes size + map.invalidateSize() + map.getContainer().addEventListener('wheel', handleWheel) + map.on('zoomend', handleUserInteracted) + map.on('moveend', handleUserInteracted) return () => { map.getContainer().removeEventListener('wheel', handleWheel) + map.off('zoomend', handleUserInteracted) + map.off('moveend', handleUserInteracted) } }, [map]) + useEffect(() => { + if (centerOnMarkers && markers.length > 1 && !userInteracted) { + map.fitBounds(bounds, { padding: [50, 50], maxZoom: 14 }) + } + }, [map, centerOnMarkers, markers, bounds, userInteracted]) + useMapEvent('click', onClick) - // Fix incomplete tile loading in some rare cases. - map.invalidateSize() - // Attach click handler. - if (centerOnMarkers && markers.length > 1) { - map.fitBounds(bounds, { padding: [50, 50], maxZoom: 14 }) - } + return markers.map(marker => ( { + useLayoutEffect(() => { const container = internalRef.current if (!container) return + // Perform initial fader calculation + handleScroll() + + // Observe mutations in the DOM to recalculate faders if content changes const mutationObserver = new MutationObserver(() => { handleScroll() }) @@ -62,7 +64,6 @@ const ScrollFader = React.forwardRef( // Run the calculation whenever the children change. mutationObserver.observe(container, { attributes: false, childList: true, subtree: true }) - handleScroll() // Call once on mount if needed container.addEventListener('scroll', handleScroll) window.addEventListener('resize', handleScroll) diff --git a/pkg/webui/components/scroll-fader/scroll-fader.styl b/pkg/webui/components/scroll-fader/scroll-fader.styl index b547f109bd..65cc94c5a8 100644 --- a/pkg/webui/components/scroll-fader/scroll-fader.styl +++ b/pkg/webui/components/scroll-fader/scroll-fader.styl @@ -20,7 +20,6 @@ right: 0 z-index: $zi.slight + 1 opacity: 0 - display: none // Initially hidden pointer-events: none .scroll-gradient-top diff --git a/pkg/webui/components/table/tabular.styl b/pkg/webui/components/table/tabular.styl index 79ee08633d..bec8c8c667 100644 --- a/pkg/webui/components/table/tabular.styl +++ b/pkg/webui/components/table/tabular.styl @@ -13,7 +13,7 @@ // limitations under the License. .container - overflow: visible + overflow: auto scrollbar-width: none .pagination From 017e134cd8a11f4570ff772460a2b8d3a8727580 Mon Sep 17 00:00:00 2001 From: Pavel Jankoski Date: Mon, 7 Oct 2024 16:17:01 +0200 Subject: [PATCH 3/3] console: Fix PR remarks --- pkg/webui/components/map/index.js | 10 +++++----- pkg/webui/console/containers/sidebar/sidebar.styl | 4 ++++ 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/pkg/webui/components/map/index.js b/pkg/webui/components/map/index.js index 565e1418b3..70891ceebb 100644 --- a/pkg/webui/components/map/index.js +++ b/pkg/webui/components/map/index.js @@ -108,7 +108,7 @@ const MarkerRenderer = ({ marker }) => { const Controller = ({ onClick, centerOnMarkers, markers, bounds }) => { const map = useMap() - const [userInteracted, setUserInteracted] = useState(false) + const [useManualZoom, setUseManualZoom] = useState(false) useEffect(() => { const handleWheel = e => { @@ -119,12 +119,12 @@ const Controller = ({ onClick, centerOnMarkers, markers, bounds }) => { const zoomLevel = map.getZoom() - delta // Calculate the new zoom level map.setZoom(zoomLevel) - setUserInteracted(true) // Mark user interaction + setUseManualZoom(true) // Mark user interaction } } const handleUserInteracted = () => { - setUserInteracted(true) // Mark user interaction on zoom + setUseManualZoom(true) // Mark user interaction on zoom } // Ensure the map resizes correctly when the container changes size @@ -142,10 +142,10 @@ const Controller = ({ onClick, centerOnMarkers, markers, bounds }) => { }, [map]) useEffect(() => { - if (centerOnMarkers && markers.length > 1 && !userInteracted) { + if (centerOnMarkers && markers.length > 1 && !useManualZoom) { map.fitBounds(bounds, { padding: [50, 50], maxZoom: 14 }) } - }, [map, centerOnMarkers, markers, bounds, userInteracted]) + }, [map, centerOnMarkers, markers, bounds, useManualZoom]) useMapEvent('click', onClick) diff --git a/pkg/webui/console/containers/sidebar/sidebar.styl b/pkg/webui/console/containers/sidebar/sidebar.styl index 24c8b3a732..331e06f1b5 100644 --- a/pkg/webui/console/containers/sidebar/sidebar.styl +++ b/pkg/webui/console/containers/sidebar/sidebar.styl @@ -24,6 +24,10 @@ left: 0 height: 100vh sidebar-transition(left) + +media-query-min($bp.xl) + // Stylus has trouble adding multiple properties to a function + // so we have to overwrite it like this. + transition-property: left, width +media-query($bp.xxl) --sidebar-width: 22rem +media-query($bp.lg-xl)