diff options
Diffstat (limited to 'frontend/src/lib/toolbar')
-rw-r--r-- | frontend/src/lib/toolbar/FilterOrganized.svelte | 2 | ||||
-rw-r--r-- | frontend/src/lib/toolbar/FilterOrphaned.svelte | 24 | ||||
-rw-r--r-- | frontend/src/lib/toolbar/MarkBookmark.svelte | 4 | ||||
-rw-r--r-- | frontend/src/lib/toolbar/MarkOrganized.svelte | 4 | ||||
-rw-r--r-- | frontend/src/lib/toolbar/Search.svelte | 2 | ||||
-rw-r--r-- | frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte | 3 | ||||
-rw-r--r-- | frontend/src/lib/toolbar/Toolbar.svelte | 6 |
7 files changed, 37 insertions, 8 deletions
diff --git a/frontend/src/lib/toolbar/FilterOrganized.svelte b/frontend/src/lib/toolbar/FilterOrganized.svelte index 0f95e5f..9fc9d21 100644 --- a/frontend/src/lib/toolbar/FilterOrganized.svelte +++ b/frontend/src/lib/toolbar/FilterOrganized.svelte @@ -24,7 +24,7 @@ class="btn-slate" title="Filter organized" onclick={toggle} - use:accelerator={'o'} + use:accelerator={'z'} > <Organized tristate {organized} /> </button> diff --git a/frontend/src/lib/toolbar/FilterOrphaned.svelte b/frontend/src/lib/toolbar/FilterOrphaned.svelte new file mode 100644 index 0000000..7e79be1 --- /dev/null +++ b/frontend/src/lib/toolbar/FilterOrphaned.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import { page } from '$app/state'; + import { BasicFilterContext, NamespaceFilterContext } from '$lib/Filter.svelte'; + import { accelerator } from '$lib/Shortcuts'; + import Orphan from '$lib/icons/Orphan.svelte'; + + let { filter }: { filter: BasicFilterContext | NamespaceFilterContext } = $props(); + let orphaned = $derived(filter.include.orphan.value); + + const toggle = () => { + filter.include.orphan.value = !orphaned; + filter.apply(page.url.searchParams); + }; +</script> + +<button + class:toggled={orphaned} + class="btn-slate" + title="Filter orphaned" + onclick={toggle} + use:accelerator={'r'} +> + <Orphan {orphaned} /> +</button> diff --git a/frontend/src/lib/toolbar/MarkBookmark.svelte b/frontend/src/lib/toolbar/MarkBookmark.svelte index 776ddd8..e9693fc 100644 --- a/frontend/src/lib/toolbar/MarkBookmark.svelte +++ b/frontend/src/lib/toolbar/MarkBookmark.svelte @@ -15,11 +15,11 @@ } </script> -<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(true)}> +<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(true)}> <Bookmark bookmarked={true} /> <span>Bookmark</span> </button> -<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(false)}> +<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(false)}> <Bookmark bookmarked={false} /> <span>Unbookmark</span> </button> diff --git a/frontend/src/lib/toolbar/MarkOrganized.svelte b/frontend/src/lib/toolbar/MarkOrganized.svelte index 63c8622..c526393 100644 --- a/frontend/src/lib/toolbar/MarkOrganized.svelte +++ b/frontend/src/lib/toolbar/MarkOrganized.svelte @@ -15,11 +15,11 @@ } </script> -<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(true)}> +<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(true)}> <Organized tristate organized={true} /> <span>Organized</span> </button> -<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(false)}> +<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(false)}> <Organized dim tristate organized={false} /> <span>Unorganized</span> </button> diff --git a/frontend/src/lib/toolbar/Search.svelte b/frontend/src/lib/toolbar/Search.svelte index 4806971..d5971bc 100644 --- a/frontend/src/lib/toolbar/Search.svelte +++ b/frontend/src/lib/toolbar/Search.svelte @@ -19,5 +19,5 @@ placeholder="Search {name}..." bind:value={field} use:debounce={{ callback: () => filter.apply(page.url.searchParams) }} - use:accelerator={'F'} + use:accelerator={'q'} /> diff --git a/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte b/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte index ee07902..2ef63f4 100644 --- a/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte +++ b/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte @@ -1,6 +1,7 @@ <script lang="ts"> import { page } from '$app/state'; import { navigate } from '$lib/Navigation'; + import { accelerator } from '$lib/Shortcuts'; import { slideXFast } from '$lib/Transitions'; import Badge from '$lib/components/Badge.svelte'; import { slide } from 'svelte/transition'; @@ -19,6 +20,7 @@ class="btn-slate relative" title={`${expanded ? 'Hide' : 'Show'} filters`} onclick={toggle} + use:accelerator={'F'} > {#if expanded} <span class="icon-base icon-[material-symbols--filter-alt]"></span> @@ -34,6 +36,7 @@ transition:slide={slideXFast} title="Reset filters" aria-label="Reset filters" + use:accelerator={'X'} > <div class="flex"> <span class="icon-base icon-[material-symbols--filter-alt-off]"></span> diff --git a/frontend/src/lib/toolbar/Toolbar.svelte b/frontend/src/lib/toolbar/Toolbar.svelte index 9e961ed..fefc151 100644 --- a/frontend/src/lib/toolbar/Toolbar.svelte +++ b/frontend/src/lib/toolbar/Toolbar.svelte @@ -1,5 +1,7 @@ <script lang="ts"> + import { slideYDefault } from '$lib/Transitions'; import { type Snippet } from 'svelte'; + import { slide } from 'svelte/transition'; export interface ToolbarState { expanded: boolean; @@ -14,7 +16,7 @@ expand?: boolean; } - let { start, center, end, expansion, expand: expand = false }: Props = $props(); + let { start, center, end, expansion, expand = false }: Props = $props(); let expanded = $state(expand); @@ -38,7 +40,7 @@ </div> </div> {#if expanded} - <div class="mt-4"> + <div class="mt-4" transition:slide={slideYDefault}> {@render expansion?.()} </div> {/if} |