ross/dv3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor right-side stack panel to simplify open state management and remove pinning functionality

Browse Source
This commit is contained in:
Ross
2025-09-22 11:03:30 +01:00
parent f4497ef59d
commit 82d4c94255
1 changed files with 13 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dicom-viewer/src/App.tsx
+13 -19
View File
@@ -176,9 +176,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
// Settings open state
// (top bar removed; stack browser moved to right-side panel)
// Right-side stack panel pinned state (false = auto-hide, true = pinned open)
const [stackPanelPinned, setStackPanelPinned] = useState(false);
// Local open state toggled by small button (replaces hover-to-open)
// Right-side stack panel open state (toggled by button)
const [stackPanelOpen, setStackPanelOpen] = useState(false);
const [fullscreenHoverIdx, setFullscreenHoverIdx] = useState<number | null>(null);
@@ -2995,7 +2993,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
{/* Right-side stack panel is implemented in the main content flex container below */}
{/* Floating right-edge toggle — always visible so users can open the panel */}
{! (stackPanelPinned || stackPanelOpen) && (
{!stackPanelOpen && (
<button
onClick={() => setStackPanelOpen(true)}
aria-pressed={false}
@@ -3006,24 +3004,27 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
top: '50%',
transform: 'translateY(-50%)',
zIndex: 2500,
width: 40,
height: 64,
width: 24,
height: 24,
padding: 0,
background: '#1976d2',
color: '#fff',
border: 'none',
borderRadius: 8,
borderRadius: 4,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: '0 2px 8px rgba(0,0,0,0.3)'
boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
lineHeight: 1,
fontSize: 12,
}}
>
▶
</button>
)}
<div>
<div>
{/* Side menu toggle button */}
<button
style={{
@@ -3409,7 +3410,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
</div>
{/* Right-side panel occupies layout space when visible or pinned */}
<div style={{ width: stackPanelPinned || stackPanelOpen ? 320 : 28, transition: 'width 220ms ease', display: 'flex', flexDirection: 'column', pointerEvents: 'auto' }}>
<div style={{ width: stackPanelOpen ? 320 : 28, transition: 'width 220ms ease', display: 'flex', flexDirection: 'column', pointerEvents: 'auto' }}>
{/* Reuse the existing right-side panel markup but ensure pointerEvents are enabled inside */}
<div style={{ pointerEvents: 'auto', width: '100%', height: '100%' }}>
{/* Panel (same content as before) */}
@@ -3432,17 +3433,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', borderBottom: '1px solid #2b2f31' }}>
<div style={{ fontWeight: 700 }}>Stacks</div>
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
<button
title={stackPanelPinned ? 'Unpin panel' : 'Pin panel'}
onClick={() => setStackPanelPinned(p => !p)}
style={{ background: stackPanelPinned ? '#1976d2' : '#333', color: '#fff', border: 'none', padding: '6px 8px', borderRadius: 4, cursor: 'pointer' }}
>
{stackPanelPinned ? 'Pinned' : 'Pin'}
</button>
<button
title="Close"
onClick={() => { setStackPanelPinned(false); setStackPanelOpen(false); }}
style={{ background: 'transparent', color: '#fff', border: 'none', cursor: 'pointer', fontSize: 18 }}
onClick={() => { setStackPanelOpen(false); }}
style={{ background: 'transparent', color: '#fff', border: 'none', cursor: 'pointer', fontSize: 16 }}
>
×
</button>