feat(ui): toggle the diagram-list sidebar
Add a ☰ toolbar button (and ⌘/Ctrl+B shortcut) to show/hide the left sidebar for a wider editing/preview area. The preview re-fits when the sidebar — or the Optimize panel — toggles, so the diagram stays centred.
This commit is contained in:
@@ -34,6 +34,11 @@
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
void store.save();
|
void store.save();
|
||||||
}
|
}
|
||||||
|
// ⌘/Ctrl+B: toggle the diagram-list sidebar.
|
||||||
|
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'b') {
|
||||||
|
e.preventDefault();
|
||||||
|
store.showSidebar = !store.showSidebar;
|
||||||
|
}
|
||||||
// ⌘/Ctrl+E: jump into viewer mode and toggle the quick-edit drawer.
|
// ⌘/Ctrl+E: jump into viewer mode and toggle the quick-edit drawer.
|
||||||
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'e') {
|
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'e') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -54,7 +59,9 @@
|
|||||||
<div class="app">
|
<div class="app">
|
||||||
<Toolbar />
|
<Toolbar />
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<Sidebar />
|
{#if store.showSidebar}
|
||||||
|
<Sidebar />
|
||||||
|
{/if}
|
||||||
{#if store.activeId}
|
{#if store.activeId}
|
||||||
<div class="split" bind:this={splitHost} class:splitting>
|
<div class="split" bind:this={splitHost} class:splitting>
|
||||||
{#if store.layout !== 'preview'}
|
{#if store.layout !== 'preview'}
|
||||||
|
|||||||
@@ -26,10 +26,12 @@
|
|||||||
return () => clearTimeout(timer);
|
return () => clearTimeout(timer);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Re-fit when the available space changes (layout / panel toggles).
|
// Re-fit when the available space changes (layout / panel / sidebar toggles).
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
void store.layout;
|
void store.layout;
|
||||||
void store.showGit;
|
void store.showGit;
|
||||||
|
void store.showOptimize;
|
||||||
|
void store.showSidebar;
|
||||||
tick().then(fit);
|
tick().then(fit);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -50,6 +50,12 @@
|
|||||||
|
|
||||||
<header class="toolbar">
|
<header class="toolbar">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
|
<button
|
||||||
|
class="ghost icon"
|
||||||
|
class:on={store.showSidebar}
|
||||||
|
title="Toggle diagram list (⌘B)"
|
||||||
|
onclick={() => (store.showSidebar = !store.showSidebar)}>☰</button
|
||||||
|
>
|
||||||
<span class="logo">Mermix</span>
|
<span class="logo">Mermix</span>
|
||||||
<span class="divider"></span>
|
<span class="divider"></span>
|
||||||
{#if store.activeId}
|
{#if store.activeId}
|
||||||
|
|||||||
@@ -42,6 +42,8 @@ class Store {
|
|||||||
toasts = $state<Toast[]>([]);
|
toasts = $state<Toast[]>([]);
|
||||||
/** Most recent successfully rendered SVG, used for export. */
|
/** Most recent successfully rendered SVG, used for export. */
|
||||||
lastSvg = $state('');
|
lastSvg = $state('');
|
||||||
|
/** Whether the left sidebar (diagram list) is visible. */
|
||||||
|
showSidebar = $state(true);
|
||||||
/** Whether the Git side panel is visible. */
|
/** Whether the Git side panel is visible. */
|
||||||
showGit = $state(true);
|
showGit = $state(true);
|
||||||
/** Whether the Optimize (Diagram Doctor) side panel is visible. */
|
/** Whether the Optimize (Diagram Doctor) side panel is visible. */
|
||||||
|
|||||||
Reference in New Issue
Block a user