agents-orchestrator/agent-orchestrator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(settings): replace window click handler with backdrop for dropdown close

Browse source
This commit is contained in:
Hibryda 2026-03-17 06:16:18 +01:00
parent 201f168621
commit f8032debac
1 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/lib/settings/categories/AppearanceSettings.svelte
View file

@ -102,17 +102,17 @@
function closeDropdowns() { themeOpen = false; uiFontOpen = false; termFontOpen = false; }
</script>
<svelte:window onclick={(e) => {
const t = e.target as HTMLElement;
if (!t?.closest('.dropdown')) closeDropdowns();
}}
onkeydown={(e) => { if (e.key === 'Escape') closeDropdowns(); }} />
<svelte:window onkeydown={(e) => { if (e.key === 'Escape') closeDropdowns(); }} />
{#if themeOpen || uiFontOpen || termFontOpen}
<div class="backdrop" onclick={closeDropdowns}></div>
{/if}
<div class="appearance">
<h3>Theme</h3>
<div class="field" id="setting-theme">
<div class="dropdown">
<button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); uiFontOpen = false; termFontOpen = false; themeOpen = !themeOpen; }}>
<button class="dropdown-btn" onclick={() => { uiFontOpen = false; termFontOpen = false; themeOpen = !themeOpen; }}>
<span class="theme-dots">{@html (() => { const p = getPalette(selectedTheme); return [p.red, p.green, p.blue, p.yellow].map(c => `<span style="background:${c}" class="dot"></span>`).join(''); })()}</span>
{themeLabel}
</button>
@ -135,7 +135,7 @@
<h3>UI Font</h3>
<div class="field row" id="setting-ui-font">
<div class="dropdown flex1">
<button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); themeOpen = false; termFontOpen = false; uiFontOpen = !uiFontOpen; }}>{uiFontLabel}</button>
<button class="dropdown-btn" onclick={() => { themeOpen = false; termFontOpen = false; uiFontOpen = !uiFontOpen; }}>{uiFontLabel}</button>
{#if uiFontOpen}
<div class="dropdown-menu">
{#each UI_FONTS as f}
@ -154,7 +154,7 @@
<h3>Terminal Font</h3>
<div class="field row" id="setting-term-font">
<div class="dropdown flex1">
<button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); themeOpen = false; uiFontOpen = false; termFontOpen = !termFontOpen; }}>{termFontLabel}</button>
<button class="dropdown-btn" onclick={() => { themeOpen = false; uiFontOpen = false; termFontOpen = !termFontOpen; }}>{termFontLabel}</button>
{#if termFontOpen}
<div class="dropdown-menu">
{#each TERM_FONTS as f}
@ -192,6 +192,7 @@
</div>
<style>
.backdrop { position: fixed; inset: 0; z-index: 40; }
.appearance { display: flex; flex-direction: column; gap: 0.75rem; }
h3 { font-size: 0.75rem; font-weight: 600; color: var(--ctp-subtext0); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.5rem 0 0.125rem; }
.field { position: relative; }