fix(redesign): portal IconGridSelect popup + snap navbar to mockup
Three issues addressed:
1. IconGridSelect popup was clipped/mispositioned because the .panel
ancestor has backdrop-filter, which makes it the containing block
for position:fixed descendants (CSS spec gotcha). Added a tiny
portal action ($lib/portal) that re-parents the popup + backdrop
to document.body, and refreshed the popup styling to be Aurora-
native (solid surface, gradient active state, glass-strong search).
2. Always-visible top search bar: a sticky glass strip at the top of
every page with the search trigger (⌘K), theme cycler, locale
toggle, and a primary 'New tracker' gradient CTA — moved out of
the sidebar to free up rail space and make search reachable from
anywhere. The sidebar's inline search button is gone.
3. Navbar snapped to the mockup:
- Sidebar footer redone as a glass user-card (avatar gradient +
username + role + mint live chip + change-password / docs / logout
row beneath a hairline).
- Section labels above each nav group (Overview / Routing /
Operators / System) with a hairline rule that extends to the
edge — same rhythm as the dashboard mockup.
- Active nav link keeps the gradient bar + glass-elev background
+ inset highlight + soft outer glow.
i18n: nav.section* keys (en + ru), dashboard.newTracker reused for
the topbar CTA. Build clean.
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import MdiIcon from './MdiIcon.svelte';
|
||||
import { t } from '$lib/i18n';
|
||||
import { portal } from '$lib/portal';
|
||||
|
||||
export interface GridItem {
|
||||
value: string | number;
|
||||
@@ -90,36 +91,39 @@
|
||||
</button>
|
||||
|
||||
{#if open}
|
||||
<!-- Backdrop -->
|
||||
<div style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998;"
|
||||
role="presentation" onclick={() => open = false}></div>
|
||||
<!-- Backdrop + popup are portalled to <body> so they escape any
|
||||
backdrop-filter / transform ancestor that would otherwise act
|
||||
as the containing block for `position: fixed`. -->
|
||||
<div use:portal class="icon-grid-portal-root">
|
||||
<div class="icon-grid-backdrop"
|
||||
role="presentation" onclick={() => open = false}></div>
|
||||
|
||||
<!-- Popup grid -->
|
||||
<div style="{popupStyle} width: {columns * 160 + 16}px;"
|
||||
class="icon-grid-popup">
|
||||
{#if showSearch}
|
||||
<input bind:this={searchEl} bind:value={search} placeholder="Filter..."
|
||||
class="icon-grid-search" type="text" autocomplete="off"
|
||||
onkeydown={handleKeydown} />
|
||||
{/if}
|
||||
<div class="icon-grid" style="grid-template-columns: repeat({columns}, 1fr);" role="listbox">
|
||||
{#each filtered as item}
|
||||
<button type="button"
|
||||
class="icon-grid-cell"
|
||||
class:active={String(item.value) === String(value)}
|
||||
role="option"
|
||||
aria-selected={String(item.value) === String(value)}
|
||||
onclick={() => select(item)}>
|
||||
<span class="icon-grid-cell-icon"><MdiIcon name={item.icon} size={22} /></span>
|
||||
<span class="icon-grid-cell-label">{item.label}</span>
|
||||
{#if item.desc}
|
||||
<span class="icon-grid-cell-desc">{item.desc}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{#if filtered.length === 0}
|
||||
<div class="icon-grid-empty" style="grid-column: 1 / -1; text-align: center; padding: 0.75rem; color: var(--color-muted-foreground); font-size: 0.75rem;">{t('common.noMatches')}</div>
|
||||
<div style="{popupStyle} width: {columns * 160 + 16}px;"
|
||||
class="icon-grid-popup">
|
||||
{#if showSearch}
|
||||
<input bind:this={searchEl} bind:value={search} placeholder="Filter..."
|
||||
class="icon-grid-search" type="text" autocomplete="off"
|
||||
onkeydown={handleKeydown} />
|
||||
{/if}
|
||||
<div class="icon-grid" style="grid-template-columns: repeat({columns}, 1fr);" role="listbox">
|
||||
{#each filtered as item}
|
||||
<button type="button"
|
||||
class="icon-grid-cell"
|
||||
class:active={String(item.value) === String(value)}
|
||||
role="option"
|
||||
aria-selected={String(item.value) === String(value)}
|
||||
onclick={() => select(item)}>
|
||||
<span class="icon-grid-cell-icon"><MdiIcon name={item.icon} size={22} /></span>
|
||||
<span class="icon-grid-cell-label">{item.label}</span>
|
||||
{#if item.desc}
|
||||
<span class="icon-grid-cell-desc">{item.desc}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{#if filtered.length === 0}
|
||||
<div class="icon-grid-empty">{t('common.noMatches')}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -132,20 +136,21 @@
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.375rem;
|
||||
border-radius: 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
background: var(--color-background);
|
||||
background: var(--color-input-bg);
|
||||
color: var(--color-foreground);
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
|
||||
text-align: left;
|
||||
}
|
||||
.icon-grid-trigger:hover:not(.disabled) {
|
||||
border-color: var(--color-primary);
|
||||
border-color: var(--color-rule-strong);
|
||||
background: var(--color-glass-strong);
|
||||
}
|
||||
.icon-grid-compact {
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.3rem 0.55rem;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.icon-grid-compact .icon-grid-trigger-label {
|
||||
flex: none;
|
||||
@@ -165,57 +170,95 @@
|
||||
color: var(--color-muted-foreground);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
/* Portal root — drains the popup out of any backdrop-filter ancestor.
|
||||
Position: fixed isolates the stacking context at the root level. */
|
||||
.icon-grid-portal-root {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9998;
|
||||
pointer-events: none;
|
||||
}
|
||||
.icon-grid-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.icon-grid-popup {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||
pointer-events: auto;
|
||||
/* Solid surface — popups need legibility, not glass translucency.
|
||||
We sit above the aurora gradient so a near-opaque background is
|
||||
what reads. */
|
||||
background: color-mix(in srgb, var(--color-background) 92%, transparent);
|
||||
backdrop-filter: blur(28px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(160%);
|
||||
border: 1px solid var(--color-rule-strong);
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.5);
|
||||
padding: 0.5rem;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.icon-grid-popup::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.icon-grid-search {
|
||||
width: 100%;
|
||||
padding: 0.375rem 0.5rem;
|
||||
margin-bottom: 0.375rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
padding: 0.45rem 0.6rem;
|
||||
margin-bottom: 0.4rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-glass-strong);
|
||||
color: var(--color-foreground);
|
||||
font-size: 0.8rem;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
.icon-grid-search:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px var(--color-glow);
|
||||
}
|
||||
.icon-grid {
|
||||
display: grid;
|
||||
gap: 0.375rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.icon-grid-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.625rem 0.375rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 2px solid transparent;
|
||||
gap: 0.3rem;
|
||||
padding: 0.7rem 0.45rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--color-foreground);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
text-align: center;
|
||||
font-family: inherit;
|
||||
}
|
||||
.icon-grid-cell:hover {
|
||||
background: var(--color-muted);
|
||||
transform: scale(1.03);
|
||||
background: var(--color-glass-strong);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
.icon-grid-cell.active {
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, transparent), color-mix(in srgb, var(--color-orchid) 18%, transparent));
|
||||
border-color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
box-shadow: inset 0 1px 0 var(--color-highlight), 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent);
|
||||
}
|
||||
.icon-grid-cell-icon {
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
.icon-grid-cell:hover .icon-grid-cell-icon { color: var(--color-foreground); }
|
||||
.icon-grid-cell.active .icon-grid-cell-icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@@ -229,4 +272,11 @@
|
||||
color: var(--color-muted-foreground);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.icon-grid-empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 0.85rem;
|
||||
color: var(--color-muted-foreground);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user