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

fix(settings): use monolith's working dropdown pattern (onclick on container div)

Browse source
This commit is contained in:
Hibryda 2026-03-17 06:20:44 +01:00
parent 1f2dd91f82
commit b2f0c446b1
1 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -100,17 +100,21 @@
}
function closeDropdowns() { themeOpen = false; uiFontOpen = false; termFontOpen = false; }
function handleClick(e: MouseEvent) {
const target = e.target as HTMLElement;
if (!target.closest('.custom-dropdown')) closeDropdowns();
}
function handleKey(e: KeyboardEvent) {
if (e.key === 'Escape') closeDropdowns();
}
</script>
<svelte:document onpointerdown={(e) => {
if (!(e.target as HTMLElement)?.closest('.dropdown')) closeDropdowns();
}} />
<svelte:window onkeydown={(e) => { if (e.key === 'Escape') closeDropdowns(); }} />
<div class="appearance">
<div class="appearance" onclick={handleClick} onkeydown={handleKey}
<h3>Theme</h3>
<div class="field" id="setting-theme">
<div class="dropdown">
<div class="custom-dropdown">
<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}
@ -196,7 +200,7 @@
.field { position: relative; }
.row { display: flex; align-items: center; gap: 0.5rem; }
.flex1 { flex: 1; }
.dropdown { position: relative; }
.custom-dropdown { position: relative; }
.dropdown-btn { width: 100%; padding: 0.375rem 0.625rem; background: var(--ctp-mantle); border: 1px solid var(--ctp-surface0); border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8125rem; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 0.375rem; }
.dropdown-btn:hover { border-color: var(--ctp-surface1); }
.dropdown-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: var(--ctp-mantle); border: 1px solid var(--ctp-surface0); border-radius: 0.25rem; max-height: 16rem; overflow-y: auto; margin-top: 0.125rem; }