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

some visual tidy up

Browse Source
This commit is contained in:
Ross
2025-05-31 15:28:40 +01:00
parent 4875b95ab2
commit 40be13b51a
1 changed files with 100 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dicom-viewer/src/App.tsx
+100 -75
View File
@@ -110,6 +110,7 @@ function App() {
const [settingsOpen, setSettingsOpen] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false);
const [fullscreenHoverIdx, setFullscreenHoverIdx] = useState<number | null>(null);
const [openDropdownIdx, setOpenDropdownIdx] = useState<number | null>(null); const [openDropdownIdx, setOpenDropdownIdx] = useState<number | null>(null);
// State for overlay info // State for overlay info
const [imageInfo, setImageInfo] = useState({ const [imageInfo, setImageInfo] = useState({
@@ -1147,39 +1148,51 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
</div> </div>
)} )}
{/* Fullscreen button below the Volume/Stack toggle */} {/* Fullscreen button below the Volume/Stack toggle */}
<button <button
style={{ style={{
position: "absolute", position: "absolute",
top: 40, // below the toggle button (which is at top: 8, height: ~32) top: 40,
left: 8, left: 8,
zIndex: 20, zIndex: 20,
background: "#111", background: "#111",
color: "#fff", color: "#fff",
border: "none", border: "none",
borderRadius: "4px", borderRadius: "4px",
padding: "4px 8px", padding: "4px 8px",
cursor: "pointer", cursor: "pointer",
fontSize: "13px", fontSize: "13px",
opacity: 0.85, opacity: 0.85,
marginTop: "4px", marginTop: "4px",
}} display: "flex",
title="Toggle Fullscreen" alignItems: "center",
onClick={e => { gap: "6px",
e.stopPropagation(); }}
const el = viewportRefs.current[i]; title="Toggle Fullscreen"
if (document.fullscreenElement === el) { onClick={e => {
document.exitFullscreen(); e.stopPropagation();
} else if (el?.requestFullscreen) { const el = viewportRefs.current[i];
el.requestFullscreen(); if (document.fullscreenElement === el) {
} else if ((el as any)?.webkitRequestFullscreen) { document.exitFullscreen();
(el as any).webkitRequestFullscreen(); } else if (el?.requestFullscreen) {
} else if ((el as any)?.msRequestFullscreen) { el.requestFullscreen();
(el as any).msRequestFullscreen(); } else if ((el as any)?.webkitRequestFullscreen) {
} (el as any).webkitRequestFullscreen();
}} } else if ((el as any)?.msRequestFullscreen) {
> (el as any).msRequestFullscreen();
{document.fullscreenElement === viewportRefs.current[i] ? "Exit Fullscreen" : "⛶ Fullscreen"} }
</button> }}
onMouseEnter={() => setFullscreenHoverIdx(i)}
onMouseLeave={() => setFullscreenHoverIdx(null)}
>
<span style={{ fontSize: "18px", lineHeight: 1 }}>⛶</span>
{fullscreenHoverIdx === i && (
<span style={{ marginLeft: 6 }}>
{document.fullscreenElement === viewportRefs.current[i]
? "Exit Fullscreen"
: "Fullscreen"}
</span>
)}
</button>
{/* Overlay info (bottom left of viewport) */} {/* Overlay info (bottom left of viewport) */}
<div <div
style={{ style={{
@@ -1534,49 +1547,60 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
}}> }}>
<div> <div>
{/* Side menu toggle button */} {/* Side menu toggle button */}
<button <button
style={{ style={{
position: "absolute", position: "absolute",
top: "50%", top: "50%",
transform: "translateY(-50%)", transform: "translateY(-50%)",
left: 20, left: sideMenuOpen ? 250 : -20, // Slide right when open
zIndex: 200, zIndex: 200,
width: 40, width: 40,
height: 40, height: 40,
background: "#222", background: "#222",
color: "#fff", color: "#fff",
border: "none", border: "none",
borderRadius: "50%", borderRadius: "50%",
fontWeight: "bold", fontWeight: "bold",
cursor: "pointer", cursor: "pointer",
fontSize: "22px", fontSize: "22px",
boxShadow: "0 2px 8px rgba(0,0,0,0.2)", boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
transition: "background 0.2s", transition: "left 0.25s cubic-bezier(.4,2,.6,1), background 0.2s",
}} }}
onClick={() => setSideMenuOpen(open => !open)} onClick={() => setSideMenuOpen(open => !open)}
aria-label="Open menu" aria-label="Open menu"
> >
☰ ☰
</button> </button>
{/* Side menu drawer */} {/* Side menu drawer */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
top: 0, top: 0,
left: sideMenuOpen ? 0 : -220, left: sideMenuOpen ? 0 : -260,
width: 220, width: 220,
height: "100%", height: "100%",
background: "#222", background: "#222",
color: "#fff", color: "#fff",
zIndex: 199, zIndex: 199,
boxShadow: sideMenuOpen ? "2px 0 12px rgba(0,0,0,0.3)" : "none", boxShadow: sideMenuOpen ? "2px 0 12px rgba(0,0,0,0.3)" : "none",
transition: "left 0.25s cubic-bezier(.4,2,.6,1)", transition: "left 0.25s cubic-bezier(.4,2,.6,1)",
flexDirection: "column", flexDirection: "column",
padding: "24px 16px 16px 16px", padding: "24px 16px 16px 16px",
display: sideMenuOpen ? "flex" : "none", display: "flex",
}} overflow: "hidden", // <-- add this
> pointerEvents: sideMenuOpen ? "auto" : "none", // <-- add this
}}
>
<div
style={{
flex: 1,
minHeight: 0,
overflowY: "auto", // <-- enables scrolling for menu content
display: "flex",
flexDirection: "column",
}}
>
<div style={{ fontWeight: "bold", fontSize: 18, marginBottom: 24 }}> <div style={{ fontWeight: "bold", fontSize: 18, marginBottom: 24 }}>
Menu Menu
<button <button
@@ -1716,6 +1740,7 @@ const referenceUID = referenceStackObj?.studyInstanceUID;
</button> </button>
{/* Add more menu items here if needed */} {/* Add more menu items here if needed */}
</div>
</div> </div>
</div> </div>
{/* Viewport grid menu at top center */} {/* Viewport grid menu at top center */}