chore(control): prevent closing popups by clicking outside (#20)

Multiple test users closed various popups accidentally by clicking outside and rarely used the feature to close the popup.
This commit is contained in:
2026-01-19 17:40:53 +01:00
committed by GitHub
parent 99643f8029
commit 4acbc96a58
5 changed files with 9 additions and 31 deletions
@@ -18,7 +18,7 @@
} = $props();
function try_to_close() {
if (!content.closable || !content.open) return;
if (!content.open) return;
close_function();
}
@@ -35,19 +35,13 @@
</script>
{#if content.open}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
class="absolute inset-0 backdrop-blur flex justify-center items-center z-50 {className}"
onclick={try_to_close}
transition:fade={{ duration: 100 }}
>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
class="bg-stone-800 rounded-2xl min-w-[30%] max-w-[90%] max-h-[85%] flex flex-col shadow-2xl/60 overflow-hidden {content.window_class ??
''}"
onclick={(e) => e.stopPropagation()}
>
{#if content.title}
<div class="font-bold bg-stone-700 p-1.5 flex flex-row justify-between gap-8 w-full">
@@ -64,16 +58,16 @@
</div>
</div>
<div class="flex aspect-square shrink-0">
{#if content.closable}
<Button className="aspect-square p-1.5!" click_function={try_to_close}>
<X />
</Button>
{/if}
<Button className="aspect-square p-1.5!" click_function={try_to_close}>
<X />
</Button>
</div>
</div>
{/if}
<div class="p-2 min-h-0 overflow-auto flex flex-col gap-2 {snippet_container_class}">
{@render content.snippet(content.snippet_arg)}
{#if content.snippet}
{@render content.snippet(content.snippet_arg ?? '')}
{/if}
</div>
</div>
</div>
+2 -3
View File
@@ -126,13 +126,12 @@ export type MenuOption = {
export type PopupContent = {
open: boolean;
snippet: Snippet<[string]> | null;
snippet_arg?: string;
snippet: Snippet<[any]> | Snippet<[]> | Snippet | null | any;
snippet_arg?: any;
title?: string;
title_class?: string;
title_icon?: typeof X | null;
window_class?: string;
closable?: boolean;
};
export type NumberSetting = {