fix(settings): fix theme/font dropdown toggle (stopPropagation on buttons)
This commit is contained in:
parent
614ae79f8e
commit
201f168621
1 changed files with 7 additions and 4 deletions
|
|
@ -102,14 +102,17 @@
|
||||||
function closeDropdowns() { themeOpen = false; uiFontOpen = false; termFontOpen = false; }
|
function closeDropdowns() { themeOpen = false; uiFontOpen = false; termFontOpen = false; }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window onclick={(e) => { if (!(e.target as HTMLElement)?.closest('.dropdown')) closeDropdowns(); }}
|
<svelte:window onclick={(e) => {
|
||||||
|
const t = e.target as HTMLElement;
|
||||||
|
if (!t?.closest('.dropdown')) closeDropdowns();
|
||||||
|
}}
|
||||||
onkeydown={(e) => { if (e.key === 'Escape') closeDropdowns(); }} />
|
onkeydown={(e) => { if (e.key === 'Escape') closeDropdowns(); }} />
|
||||||
|
|
||||||
<div class="appearance">
|
<div class="appearance">
|
||||||
<h3>Theme</h3>
|
<h3>Theme</h3>
|
||||||
<div class="field" id="setting-theme">
|
<div class="field" id="setting-theme">
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<button class="dropdown-btn" onclick={() => { closeDropdowns(); themeOpen = !themeOpen; }}>
|
<button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); 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>
|
<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}
|
{themeLabel}
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -132,7 +135,7 @@
|
||||||
<h3>UI Font</h3>
|
<h3>UI Font</h3>
|
||||||
<div class="field row" id="setting-ui-font">
|
<div class="field row" id="setting-ui-font">
|
||||||
<div class="dropdown flex1">
|
<div class="dropdown flex1">
|
||||||
<button class="dropdown-btn" onclick={() => { closeDropdowns(); uiFontOpen = !uiFontOpen; }}>{uiFontLabel}</button>
|
<button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); themeOpen = false; termFontOpen = false; uiFontOpen = !uiFontOpen; }}>{uiFontLabel}</button>
|
||||||
{#if uiFontOpen}
|
{#if uiFontOpen}
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
{#each UI_FONTS as f}
|
{#each UI_FONTS as f}
|
||||||
|
|
@ -151,7 +154,7 @@
|
||||||
<h3>Terminal Font</h3>
|
<h3>Terminal Font</h3>
|
||||||
<div class="field row" id="setting-term-font">
|
<div class="field row" id="setting-term-font">
|
||||||
<div class="dropdown flex1">
|
<div class="dropdown flex1">
|
||||||
<button class="dropdown-btn" onclick={() => { closeDropdowns(); termFontOpen = !termFontOpen; }}>{termFontLabel}</button>
|
<button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); themeOpen = false; uiFontOpen = false; termFontOpen = !termFontOpen; }}>{termFontLabel}</button>
|
||||||
{#if termFontOpen}
|
{#if termFontOpen}
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
{#each TERM_FONTS as f}
|
{#each TERM_FONTS as f}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue