diff --git a/scripts/format-scope.json b/scripts/format-scope.json index c11489f1f..0fad9bc71 100644 --- a/scripts/format-scope.json +++ b/scripts/format-scope.json @@ -1449,5 +1449,13 @@ "src/data/fleetModelInstances.test.mjs", "src/testSupport/fleetGlb.mjs", "src/testSupport/fleetModelFakes.mjs", - "scripts/measure-fleet-trail-anchors.mjs" + "scripts/measure-fleet-trail-anchors.mjs", + "src/ui/panelEdge.js", + "src/ui/railEdgeScroll.js", + "src/ui/railEdgeScroll.test.mjs", + "src/ui/kit/UiPanelEdge.vue", + "src/ui/styles/rail-edge.css", + "src/ui/styles/rail-split.css", + "src/ui/styles/left-tools.css", + "src/ui/styles/panel-edge.css" ] diff --git a/scripts/package-boundaries.json b/scripts/package-boundaries.json index 2242d7b2c..c0237942e 100644 --- a/scripts/package-boundaries.json +++ b/scripts/package-boundaries.json @@ -154,6 +154,8 @@ "src/ui/kit/UiSegmented.vue", "src/ui/rail/RailPanel.vue", "src/ui/kit/UiPanel.vue", + "src/ui/kit/UiPanelEdge.vue", + "src/ui/panelEdge.js", "src/ui/kit/UiPanelToggle.vue", "src/ui/stores/panelChrome.js", "src/ui/rail/PanelCollapseButton.vue", @@ -1136,6 +1138,7 @@ "src/styles/surveillance.js", "src/styles/thermal.js", "src/ui/applicationShell.js", + "src/ui/railEdgeScroll.js", "src/ui/localePicker.js", "src/ui/cyberSonarControls.js", "src/ui/locationNavigation.js", @@ -3087,6 +3090,7 @@ "src/styles/surveillance.js", "src/styles/thermal.js", "src/ui/applicationShell.js", + "src/ui/railEdgeScroll.js", "src/ui/mobileShell.js", "src/exclusiveSurfaces.js", "src/ui/localePicker.js", diff --git a/src/ui/styles/rail-split.css b/src/ui/styles/rail-split.css index 72debe865..5599180f1 100644 --- a/src/ui/styles/rail-split.css +++ b/src/ui/styles/rail-split.css @@ -51,7 +51,10 @@ gap above it, with or without a panel open, so opening one doesn't move the rail down. */ #left-panel-stack { - top: calc(var(--left-stack-safe-top, var(--left-stack-top)) + var(--panel-rail-lift, 0px)); + top: calc( + var(--left-stack-safe-top, var(--left-stack-top)) + + var(--panel-rail-lift, 0px) + ); } /* The right rail splits the same way with nothing open, mirrored: the icon @@ -151,11 +154,14 @@ one, which slides to it. The button carries no fill of its own: as a rail folds its labelled pills to icons, a fill on the shrinking button would read as the highlight stretching. */ -:is(.gev-panel-rail--left, .gev-panel-rail--right) .ui-rail__item.ui-rail__item--on { +:is(.gev-panel-rail--left, .gev-panel-rail--right) + .ui-rail__item.ui-rail__item--on { color: #00d4ff !important; } -:is(.gev-panel-rail--left, .gev-panel-rail--right) .ui-rail:not(.ui-rail--glide) .ui-rail__item.ui-rail__item--on { +:is(.gev-panel-rail--left, .gev-panel-rail--right) + .ui-rail:not(.ui-rail--glide) + .ui-rail__item.ui-rail__item--on { background: none; border-color: transparent; } @@ -174,7 +180,10 @@ gap: 12px; } -:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right) +:is( + body:not(.panels-edge-left) .gev-panel-rail--left, + body:not(.panels-edge-right) .gev-panel-rail--right + ) .ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on) { background: none !important; border-color: transparent !important; @@ -183,7 +192,10 @@ -webkit-backdrop-filter: none; } -:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right) +:is( + body:not(.panels-edge-left) .gev-panel-rail--left, + body:not(.panels-edge-right) .gev-panel-rail--right + ) .ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on) > .ui-tooltip::before { position: absolute; @@ -199,7 +211,10 @@ } /* The ends of the rail. */ -:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right) +:is( + body:not(.panels-edge-left) .gev-panel-rail--left, + body:not(.panels-edge-right) .gev-panel-rail--right + ) .ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on) > .ui-tooltip:first-child::before { top: -5px; @@ -208,7 +223,10 @@ border-top-right-radius: 14px; } -:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right) +:is( + body:not(.panels-edge-left) .gev-panel-rail--left, + body:not(.panels-edge-right) .gev-panel-rail--right + ) .ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on) > .ui-tooltip:last-child::before { bottom: -5px; @@ -218,7 +236,10 @@ } /* The runs stop short of the open icon. */ -:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right) +:is( + body:not(.panels-edge-left) .gev-panel-rail--left, + body:not(.panels-edge-right) .gev-panel-rail--right + ) .ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on) > .ui-tooltip:has(+ .ui-tooltip > .ui-rail__item--on)::before { bottom: -1px; @@ -227,9 +248,13 @@ border-bottom-right-radius: 14px; } -:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right) +:is( + body:not(.panels-edge-left) .gev-panel-rail--left, + body:not(.panels-edge-right) .gev-panel-rail--right + ) .ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on) - > .ui-tooltip:has(> .ui-rail__item--on) + .ui-tooltip::before { + > .ui-tooltip:has(> .ui-rail__item--on) + + .ui-tooltip::before { top: -1px; border-top-width: 1px; border-top-left-radius: 14px; @@ -237,7 +262,10 @@ } /* The open icon's own piece. */ -:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right) +:is( + body:not(.panels-edge-left) .gev-panel-rail--left, + body:not(.panels-edge-right) .gev-panel-rail--right + ) .ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on) > .ui-tooltip:has(> .ui-rail__item--on)::before { inset: -4px -5px;