diff options
Diffstat (limited to 'frontend/src/routes/+layout.svelte')
| -rw-r--r-- | frontend/src/routes/+layout.svelte | 60 |
1 files changed, 33 insertions, 27 deletions
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 6af3b88..29a1c16 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -1,5 +1,6 @@ <script lang="ts"> import { addShortcut, handleShortcuts } from '$lib/Shortcuts'; + import { toastFinally } from '$lib/Toasts'; import { fadeDefault } from '$lib/Transitions'; import AddArtist from '$lib/dialogs/AddArtist.svelte'; import AddCharacter from '$lib/dialogs/AddCharacter.svelte'; @@ -11,7 +12,7 @@ import Navigation from '$lib/navigation/Navigation.svelte'; import { cacheExchange, fetchExchange, initContextClient } from '@urql/svelte'; import { SvelteToast } from '@zerodevx/svelte-toast'; - import { Modals, closeModal, openModal } from 'svelte-modals'; + import { Modals, modals, type ModalComponent } from 'svelte-modals'; import { fade } from 'svelte/transition'; import '../app.css'; @@ -20,12 +21,16 @@ exchanges: [cacheExchange, fetchExchange] }); - addShortcut('na', () => openModal(AddArtist)); - addShortcut('nh', () => openModal(AddCharacter)); - addShortcut('ni', () => openModal(AddCircle)); - addShortcut('nn', () => openModal(AddNamespace)); - addShortcut('nt', () => openModal(AddTag)); - addShortcut('nw', () => openModal(AddWorld)); + function open(modal: ModalComponent) { + modals.open(modal).catch(toastFinally); + } + + addShortcut('na', () => open(AddArtist)); + addShortcut('nh', () => open(AddCharacter)); + addShortcut('ni', () => open(AddCircle)); + addShortcut('nn', () => open(AddNamespace)); + addShortcut('nt', () => open(AddTag)); + addShortcut('nw', () => open(AddWorld)); function keydown(event: KeyboardEvent) { handleShortcuts(event); @@ -36,38 +41,38 @@ <Navigation> <Link matchExact href="/" title="Home" accel="go"> - <span class="icon-base icon-[material-symbols--home]" /> + <span class="icon-base icon-[material-symbols--home]"></span> </Link> <Link href="/comics/" title="Comics" accel="gc"> - <span class="icon-base icon-[material-symbols--menu-book]" /> + <span class="icon-base icon-[material-symbols--menu-book]"></span> </Link> <Link href="/namespaces/" title="Namespaces" accel="gn"> - <span class="icon-base icon-[material-symbols--inbox]" /> + <span class="icon-base icon-[material-symbols--inbox]"></span> </Link> <Link href="/tags/" title="Tags" accel="gt"> - <span class="icon-base icon-[material-symbols--label]" /> + <span class="icon-base icon-[material-symbols--label]"></span> </Link> <Link href="/artists/" title="Artists" accel="ga"> - <span class="icon-base icon-[material-symbols--person]" /> + <span class="icon-base icon-[material-symbols--person]"></span> </Link> <Link href="/circles/" title="Circles" accel="gi"> - <span class="icon-base icon-[material-symbols--group]" /> + <span class="icon-base icon-[material-symbols--group]"></span> </Link> <Link href="/characters/" title="Characters" accel="gh"> - <span class="icon-base icon-[material-symbols--face]" /> + <span class="icon-base icon-[material-symbols--face]"></span> </Link> <Link href="/worlds/" title="Worlds" accel="gw"> - <span class="icon-base icon-[material-symbols--public]" /> + <span class="icon-base icon-[material-symbols--public]"></span> </Link> <Link href="/archives/" title="Archives" accel="gz"> - <span class="icon-base icon-[material-symbols--folder-zip]" /> + <span class="icon-base icon-[material-symbols--folder-zip]"></span> </Link> - <div class="mb-auto" /> + <div class="mb-auto"></div> <Link href="/statistics/" title="Statistics" accel="gs"> - <span class="icon-base icon-[material-symbols--bar-chart]" /> + <span class="icon-base icon-[material-symbols--bar-chart]"></span> </Link> <Link href="/help/" title="Help" accel="?" target="_blank"> - <span class="icon-base icon-[material-symbols--help]" /> + <span class="icon-base icon-[material-symbols--help]"></span> </Link> </Navigation> @@ -76,14 +81,15 @@ </div> <Modals> - <!-- svelte-ignore a11y-no-static-element-interactions --> - <!-- svelte-ignore a11y-click-events-have-key-events --> - <div - slot="backdrop" - on:click={closeModal} - transition:fade={fadeDefault} - class="fixed bottom-0 left-0 right-0 top-0 z-20 bg-stone-800/80" - /> + {#snippet backdrop({ close })} + <!-- svelte-ignore a11y-no-static-element-interactions --> + <!-- svelte-ignore a11y-click-events-have-key-events --> + <div + onclick={() => close()} + transition:fade={fadeDefault} + class="fixed bottom-0 left-0 right-0 top-0 z-20 bg-stone-800/80" + ></div> + {/snippet} </Modals> <SvelteToast options={{ reversed: true, intro: { y: 192 } }} /> |