From 8c9551b1f488a113dd6c00d36f0a3aa1f842b2a6 Mon Sep 17 00:00:00 2001 From: Aditya Sanjeev Date: Fri, 28 Aug 2026 00:10:29 -0700 Subject: [PATCH] Revert gear to its original spot (move axial label instead), move Live Room button into the icon lineup - The floating gear is back at its original top-left position and back to a plain icon (previous fix over-corrected by redesigning it into a labeled pill and moving it - the actual problem was just that it sat on top of the axial pane's own label). Now the axial pane's label is pushed down below the gear instead, only while the gear is actually showing (toolbar hidden) - every other pane's label is untouched. - Live Room moved from its own labeled button near the case ID to the end of the icon toolbar, right after the AI button - same vp-tool icon-only style as every other tool in that row, with the name showing on hover via the same tooltip pattern the rest of the toolbar uses. --- PanTS-Demo/src/liveRooms/liveRooms.css | 1 - PanTS-Demo/src/routes/VisualizationPage.css | 51 +++++++++------------ PanTS-Demo/src/routes/VisualizationPage.tsx | 36 +++++++-------- 3 files changed, 38 insertions(+), 50 deletions(-) diff --git a/PanTS-Demo/src/liveRooms/liveRooms.css b/PanTS-Demo/src/liveRooms/liveRooms.css index 10bc5dde..f1783afa 100644 --- a/PanTS-Demo/src/liveRooms/liveRooms.css +++ b/PanTS-Demo/src/liveRooms/liveRooms.css @@ -646,7 +646,6 @@ .lr-note-popover footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 9px; border-top: 1px solid var(--lr-border); color: var(--lr-muted); font-family: var(--lr-mono); font-size: 9px; } .lr-note-popover footer span:first-child { text-transform: capitalize; } -.vp-live-room-button { display: inline-flex; align-items: center; gap: 7px; color: var(--lr-primary); border-color: rgba(110, 168, 254, .35) !important; } .vp-tool:disabled, .vp-flyout__item:disabled { cursor: not-allowed; opacity: .42; } .lr-room-ended { position: fixed; inset: 0; z-index: 30000; display: grid; place-items: center; padding: 24px; background: rgba(3, 8, 12, .88); backdrop-filter: blur(10px); } diff --git a/PanTS-Demo/src/routes/VisualizationPage.css b/PanTS-Demo/src/routes/VisualizationPage.css index d4afc49c..0ec923bc 100644 --- a/PanTS-Demo/src/routes/VisualizationPage.css +++ b/PanTS-Demo/src/routes/VisualizationPage.css @@ -475,38 +475,16 @@ opacity: 0.5; } -/* Floating "Show toolbar" pill, shown only when the toolbar is hidden. - Labeled, not a bare icon square - an unlabeled gear floating alone in a - corner reads as an unexplained mystery button with only a tooltip to go - on. Anchored to the top-RIGHT corner of the screen, clear of every pane's - content and every pane's own top-left label (a fixed left-offset used to - land it in the middle of the axial pane's own CT image instead). */ +/* Floating gear shown only when the toolbar is hidden, back in its original + top-left spot. Previously it overlapped the axial pane's own "AXIAL" label + (both wanted the same top-left corner) - instead of moving the gear, the + axial label is pushed down clear of it (see .vp-pane--axial::after below), + so the gear can stay exactly where it always was. */ .vp-floating-gear { position: fixed; - top: 10px; - right: 14px; + top: 12px; + left: 14px; z-index: 55; - display: flex; - align-items: center; - gap: 7px; - height: 34px; - padding: 0 14px 0 12px; - border-radius: 17px; - background: rgba(14, 15, 18, 0.82); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border: 1px solid var(--vp-border); - color: var(--vp-text); - font-family: var(--vp-font); - font-size: 12px; - font-weight: 600; - letter-spacing: 0.01em; - cursor: pointer; - transition: background 0.15s, border-color 0.15s; -} -.vp-floating-gear:hover { - background: var(--vp-panel-strong); - border-color: var(--vp-border-strong); } /* Shaded volume-rendering target: Cornerstone owns the canvas inside. */ @@ -1059,6 +1037,21 @@ --pane-accent: #f43f5e; } +/* The axial pane is always the top-left quadrant, the same corner the + floating gear (.vp-floating-gear) occupies while the toolbar is hidden - + rather than move the gear off its long-standing spot, push this one pane's + label + accent tick down below it instead, but only while the gear is + actually there (.toolbar-hidden on the root); with the toolbar visible + (the default) the axial label sits in its normal spot like every other + pane's. 58px clears the gear's 38px button (starting at top:12px) plus a + small gap. */ +.toolbar-hidden .vp-pane--axial::after { + top: 58px; +} +.toolbar-hidden .vp-pane--axial::before { + top: 61px; +} + .vp-pane--sagittal { --pane-accent: #eab308; } diff --git a/PanTS-Demo/src/routes/VisualizationPage.tsx b/PanTS-Demo/src/routes/VisualizationPage.tsx index 221a587f..babc07e7 100644 --- a/PanTS-Demo/src/routes/VisualizationPage.tsx +++ b/PanTS-Demo/src/routes/VisualizationPage.tsx @@ -3629,7 +3629,7 @@ const aiAvailableOrgans = useMemo(() => { return (
{ if (!liveRoom?.followingId) return; const target = event.target as HTMLElement; @@ -3719,17 +3719,6 @@ const aiAvailableOrgans = useMemo(() => { )}
- {!liveRoom && params.caseId && ( - - )} - {/* Layout ▾ — view mode (MPR/Axial/Sag/Cor/3D) and, while in MPR, the @@ -4441,23 +4430,30 @@ const aiAvailableOrgans = useMemo(() => { )} + {!liveRoom && params.caseId && ( + + )} )} - {/* When the toolbar is hidden, a labeled pill reveals it - a bare icon - with no text floating alone in a corner reads as an unexplained - mystery button, so this pairs the gear with its own label instead - of relying on the tooltip alone. */} + {/* When the toolbar is hidden, a single floating gear reveals it. */} {!showToolbar && ( )}