Add toggle functionality for top stack bar visibility and persistent button to reveal it
This commit is contained in:
@@ -173,6 +173,8 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
|||||||
const [presetsOpen, setPresetsOpen] = useState(false);
|
const [presetsOpen, setPresetsOpen] = useState(false);
|
||||||
|
|
||||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||||
|
// Control visibility of the global top stack bar (hidden by default)
|
||||||
|
const [topBarVisible, setTopBarVisible] = useState(false);
|
||||||
|
|
||||||
const [fullscreenHoverIdx, setFullscreenHoverIdx] = useState<number | null>(null);
|
const [fullscreenHoverIdx, setFullscreenHoverIdx] = useState<number | null>(null);
|
||||||
const [openDropdownIdx, setOpenDropdownIdx] = useState<number | null>(null);
|
const [openDropdownIdx, setOpenDropdownIdx] = useState<number | null>(null);
|
||||||
@@ -2983,7 +2985,25 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Top bar stack browser */}
|
{/* Top bar stack browser (hidden by default) */}
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
|
||||||
|
<button
|
||||||
|
onClick={() => setTopBarVisible(v => !v)}
|
||||||
|
style={{
|
||||||
|
background: topBarVisible ? "#1976d2" : "#333",
|
||||||
|
color: "#fff",
|
||||||
|
border: "none",
|
||||||
|
padding: "8px 12px",
|
||||||
|
borderRadius: 4,
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
aria-pressed={topBarVisible}
|
||||||
|
aria-label={topBarVisible ? "Hide stack bar" : "Show stack bar"}
|
||||||
|
>
|
||||||
|
{topBarVisible ? "Hide Stack Bar" : "Show Stack Bar"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{topBarVisible && (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
@@ -3064,6 +3084,28 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
|||||||
));
|
));
|
||||||
})()}
|
})()}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{/* Persistent floating button to reveal the stack bar */}
|
||||||
|
<button
|
||||||
|
onClick={() => setTopBarVisible(true)}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: 12,
|
||||||
|
left: 12,
|
||||||
|
zIndex: 2000,
|
||||||
|
background: "#1976d2",
|
||||||
|
color: "#fff",
|
||||||
|
border: "none",
|
||||||
|
padding: "8px 10px",
|
||||||
|
borderRadius: 6,
|
||||||
|
cursor: "pointer",
|
||||||
|
boxShadow: "0 2px 10px rgba(0,0,0,0.3)",
|
||||||
|
}}
|
||||||
|
aria-label="Show stack bar"
|
||||||
|
>
|
||||||
|
Show Stacks
|
||||||
|
</button>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{/* Side menu toggle button */}
|
{/* Side menu toggle button */}
|
||||||
|
|||||||
Reference in New Issue
Block a user