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

Refactor grid button styles for improved visibility and interaction

Browse Source
This commit is contained in:
Ross
2026-04-27 09:21:59 +01:00
parent c5a58da6a3
commit 776b5faffe
1 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dicom-viewer/src/App.tsx
+25 -8
View File
@@ -4177,7 +4177,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
<button
style={{
position: "relative",
top: gridBtnActive ? "0" : "-22px",
top: gridBtnActive ? "0" : "-43px",
opacity: gridBtnActive ? 1 : 0.5,
transition: "top 0.25s cubic-bezier(.4,2,.6,1), opacity 0.2s",
padding: "6px 16px",
@@ -4191,11 +4191,13 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
marginLeft: "4px",
marginRight: "8px",
boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
pointerEvents: gridBtnActive ? "auto" : "none",
pointerEvents: "auto",
zIndex: 2,
display: gridBtnActive ? "block" : "none",
display: "block",
}}
title="Toggle Fullscreen"
onMouseEnter={() => setGridBtnActive(true)}
onMouseLeave={() => setGridBtnActive(false)}
onClick={() => {
const root = document.querySelector(".dicom-viewer-root") as HTMLElement;
if (!root) return;
@@ -4216,7 +4218,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
className="grid-menu-btn"
style={{
position: "relative",
top: gridBtnActive ? "0" : "-22px",
top: gridBtnActive ? "0" : "-43px",
opacity: gridBtnActive ? 1 : 0.5,
transition: "top 0.25s cubic-bezier(.4,2,.6,1), opacity 0.2s",
padding: "6px 16px",
@@ -4229,10 +4231,11 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
fontSize: "15px",
marginRight: "8px",
boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
pointerEvents: gridBtnActive ? "auto" : "none", // Only clickable when active
pointerEvents: "auto",
zIndex: 2,
display: gridBtnActive ? "block" : "none",
display: "block",
}}
onMouseEnter={() => setGridBtnActive(true)}
onMouseLeave={() => setGridBtnActive(false)}
onBlur={() => setGridBtnActive(false)}
onClick={() => setViewportMenuOpen(open => !open)}
@@ -4350,6 +4353,9 @@ 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={{ fontSize: 12, color: '#9bb4c8' }}>
Active VP: {activeViewport !== null ? activeViewport + 1 : '-'}
</div>
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
<button
title="Close"
@@ -4372,6 +4378,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
const count = imageIds.length;
const invalid = !Array.isArray(imageIds) || count === 0;
const isSelected = selectedStackIdx.includes(idx);
const isActiveViewportStack = activeViewport !== null && selectedStackIdx[activeViewport] === idx;
// Prefer the middle image for a representative thumbnail, fallback to first
const midIndex = Math.floor(imageIds.length / 2);
const chosenImage = imageIds[midIndex] || imageIds[0];
@@ -4387,14 +4394,19 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
e.dataTransfer.setData('text/stack-idx', String(idx));
e.dataTransfer.effectAllowed = 'copy';
}}
onClick={() => { if (!invalid) handleLoadStack(0, idx); }}
onClick={() => {
if (invalid) return;
const targetViewport = activeViewport ?? 0;
handleLoadStack(targetViewport, idx);
}}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '8px 10px',
background: isSelected ? '#1976d2' : 'transparent',
background: isActiveViewportStack ? '#0d47a1' : (isSelected ? '#1976d2' : 'transparent'),
color: isSelected ? '#fff' : '#ddd',
border: isActiveViewportStack ? '1px solid #64b5f6' : '1px solid transparent',
borderRadius: 6,
cursor: invalid ? 'not-allowed' : 'pointer',
}}
@@ -4426,7 +4438,12 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
<div style={{ fontSize: 12, opacity: 0.7 }}>{count} img{count === 1 ? '' : 's'}</div>
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
<div style={{ fontSize: 12, opacity: 0.8 }}>{stack.studyId || ''}</div>
{isActiveViewportStack && (
<div style={{ fontSize: 11, color: '#bbdefb', fontWeight: 700 }}>ACTIVE</div>
)}
</div>
</div>
);
})}