Skip to content

Commit 074e091

Browse files
milanofthemilanofthe
authored
Move unhide button into top nav next to pin icon (#320)
* Move hidden-nodes unhide button into top nav next to pin icon * Tuck hidden-nodes badge into the button corner * Align hidden-nodes and staged-changes badges flush with the icon corner --------- Co-authored-by: milanofthe <milanofthe@users.noreply.github.com>
1 parent efcb2b2 commit 074e091

1 file changed

Lines changed: 50 additions & 71 deletions

File tree

‎src/routes/+page.svelte‎

Lines changed: 50 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script lang="ts">
22
import { onMount } from 'svelte';
33
import { base } from '$app/paths';
4-
import { fly, scale } from 'svelte/transition';
54
import { cubicOut } from 'svelte/easing';
65
import FlowCanvas from '$lib/components/FlowCanvas.svelte';
76
import SimulationPanel from '$lib/components/panels/SimulationPanel.svelte';
@@ -1304,6 +1303,44 @@
13041303
{/snippet}
13051304

13061305
{#snippet viewActions(btn: string)}
1306+
{#if hiddenNodes.length > 0}
1307+
<!-- svelte-ignore a11y_no_static_element_interactions -->
1308+
<div
1309+
class="hidden-group"
1310+
onmouseenter={handleHiddenGroupEnter}
1311+
onmouseleave={handleHiddenGroupLeave}
1312+
>
1313+
<button
1314+
class="{btn} hidden-btn"
1315+
use:tooltip={`${hiddenNodes.length} hidden node${hiddenNodes.length === 1 ? '' : 's'}`}
1316+
aria-label="Hidden nodes"
1317+
>
1318+
<Icon name="eye-off" size={16} />
1319+
<span class="hidden-badge">{hiddenNodes.length}</span>
1320+
</button>
1321+
{#if hiddenMenuOpen}
1322+
<div class="recent-menu" role="menu">
1323+
<div class="recent-menu-header">Hidden nodes</div>
1324+
{#each hiddenNodes as node (node.id)}
1325+
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
1326+
<div class="recent-item" role="menuitem" tabindex="0" onclick={() => handleUnhide(node.id)}>
1327+
<Icon name="eye" size={14} />
1328+
<span class="recent-name" title={node.name}>{node.name}</span>
1329+
<span class="hidden-type">{node.type}</span>
1330+
</div>
1331+
{/each}
1332+
{#if hiddenNodes.length > 1}
1333+
<div class="recent-divider"></div>
1334+
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
1335+
<div class="recent-item show-all" role="menuitem" tabindex="0" onclick={handleShowAll}>
1336+
<Icon name="eye" size={14} />
1337+
<span class="recent-name">Show all</span>
1338+
</div>
1339+
{/if}
1340+
</div>
1341+
{/if}
1342+
</div>
1343+
{/if}
13071344
<button class={btn} class:active={showPinnedPreviews} onclick={() => pinnedPreviewsStore.toggle()} use:tooltip={{ text: "Pin Previews", shortcut: "P" }} aria-label="Pin Previews" data-tour="toolbar-pin-previews">
13081345
<Icon name={showPinnedPreviews ? "pin-filled" : "pin"} size={16} />
13091346
</button>
@@ -1344,52 +1381,6 @@
13441381
<SubsystemBreadcrumb />
13451382
</div>
13461383

1347-
<!-- Floating toolbar -->
1348-
<!-- svelte-ignore a11y_no_static_element_interactions -->
1349-
<div class="toolbar-container" transition:fly={{ y: -20, duration: 200 }} onmousedown={() => triggerClearSelection()}>
1350-
<!-- Sim controls now live in the left rail; file ops + view actions live in the top nav bar. -->
1351-
1352-
<!-- Hidden nodes -->
1353-
{#if hiddenNodes.length > 0}
1354-
<!-- svelte-ignore a11y_no_static_element_interactions -->
1355-
<div
1356-
class="toolbar-group hidden-group"
1357-
onmouseenter={handleHiddenGroupEnter}
1358-
onmouseleave={handleHiddenGroupLeave}
1359-
>
1360-
<button
1361-
class="toolbar-btn hidden-btn"
1362-
use:tooltip={`${hiddenNodes.length} hidden node${hiddenNodes.length === 1 ? '' : 's'}`}
1363-
aria-label="Hidden nodes"
1364-
>
1365-
<Icon name="eye-off" size={16} />
1366-
<span class="hidden-badge">{hiddenNodes.length}</span>
1367-
</button>
1368-
{#if hiddenMenuOpen}
1369-
<div class="recent-menu" role="menu">
1370-
<div class="recent-menu-header">Hidden nodes</div>
1371-
{#each hiddenNodes as node (node.id)}
1372-
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
1373-
<div class="recent-item" role="menuitem" tabindex="0" onclick={() => handleUnhide(node.id)}>
1374-
<Icon name="eye" size={14} />
1375-
<span class="recent-name" title={node.name}>{node.name}</span>
1376-
<span class="hidden-type">{node.type}</span>
1377-
</div>
1378-
{/each}
1379-
{#if hiddenNodes.length > 1}
1380-
<div class="recent-divider"></div>
1381-
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
1382-
<div class="recent-item show-all" role="menuitem" tabindex="0" onclick={handleShowAll}>
1383-
<Icon name="eye" size={14} />
1384-
<span class="recent-name">Show all</span>
1385-
</div>
1386-
{/if}
1387-
</div>
1388-
{/if}
1389-
</div>
1390-
{/if}
1391-
</div>
1392-
13931384
<!-- Panel toggles (left edge) -->
13941385
<!-- svelte-ignore a11y_no_static_element_interactions -->
13951386
<div class="panel-toggles" onmousedown={() => triggerClearSelection()}>
@@ -1848,7 +1839,6 @@
18481839
/* Home button relies on .icon-btn for sizing/hover; small separator from file-ops. */
18491840
.editor-nav .brand { margin-right: var(--space-xs); }
18501841
/* Push the top-anchored floating overlays below the fixed nav. */
1851-
.app.has-nav .toolbar-container { top: calc(var(--space-md) + var(--header-height)); }
18521842
.app.has-nav .subsystem-breadcrumb { top: calc(var(--space-md) + var(--header-height)); }
18531843
.app.has-nav .logo-overlay { top: calc(var(--space-md) + var(--header-height)); }
18541844
@@ -1872,23 +1862,6 @@
18721862
opacity: 0.8;
18731863
}
18741864
1875-
/* Toolbar */
1876-
.toolbar-container {
1877-
position: fixed;
1878-
top: var(--space-md);
1879-
left: 50%;
1880-
transform: translateX(-50%);
1881-
z-index: 100;
1882-
display: flex;
1883-
align-items: center;
1884-
gap: var(--space-lg);
1885-
}
1886-
1887-
.toolbar-group {
1888-
display: flex;
1889-
gap: var(--space-xs);
1890-
}
1891-
18921865
.toolbar-btn {
18931866
width: var(--header-height);
18941867
height: var(--header-height);
@@ -2025,19 +1998,25 @@
20251998
background: color-mix(in srgb, var(--error) 15%, transparent);
20261999
}
20272000
2028-
/* Hidden-nodes group reuses .open-group/.recent-menu layout */
2001+
/* Hidden-nodes group reuses .open-group/.recent-menu layout; it sits on
2002+
the right side of the nav, so the menu anchors right to stay on screen. */
20292003
.hidden-group {
20302004
position: relative;
20312005
}
20322006
2007+
.hidden-group .recent-menu {
2008+
left: auto;
2009+
right: 0;
2010+
}
2011+
20332012
.hidden-btn {
20342013
position: relative;
20352014
}
20362015
20372016
.hidden-badge {
20382017
position: absolute;
2039-
top: -4px;
2040-
right: -4px;
2018+
top: 0;
2019+
right: 0;
20412020
min-width: 16px;
20422021
height: 16px;
20432022
padding: 0 4px;
@@ -2049,7 +2028,7 @@
20492028
display: flex;
20502029
align-items: center;
20512030
justify-content: center;
2052-
box-shadow: 0 0 0 2px var(--surface);
2031+
box-shadow: 0 0 0 2px var(--surface-raised);
20532032
}
20542033
20552034
.hidden-type {
@@ -2070,8 +2049,8 @@
20702049
20712050
.mutation-badge {
20722051
position: absolute;
2073-
top: -4px;
2074-
right: -4px;
2052+
top: 0;
2053+
right: 0;
20752054
min-width: 16px;
20762055
height: 16px;
20772056
padding: 0 4px;

0 commit comments

Comments
 (0)