diff options
Diffstat (limited to 'frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte')
| -rw-r--r-- | frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte b/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte new file mode 100644 index 0000000..2e7869f --- /dev/null +++ b/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte @@ -0,0 +1,40 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { getFilterContext } from '$lib/Filter'; + import { navigate } from '$lib/Navigation'; + import { slideXFast } from '$lib/Transitions'; + import Badge from '$lib/components/Badge.svelte'; + import { slide } from 'svelte/transition'; + import { getToolbarContext } from './Toolbar.svelte'; + + const toolbar = getToolbarContext(); + const filter = getFilterContext(); +</script> + +<div class="rounded-group flex"> + <button + class:toggled={$toolbar.expand} + class="btn-slate relative" + title={`${$toolbar.expand ? 'Hide' : 'Show'} filters`} + on:click={() => ($toolbar.expand = !$toolbar.expand)} + > + {#if $toolbar.expand} + <span class="icon-base icon-[material-symbols--filter-alt]" /> + {:else} + <span class="icon-base icon-[material-symbols--filter-alt-outline]" /> + {/if} + <Badge number={$filter.include.size + $filter.exclude.size} /> + </button> + {#if $filter.include.size + $filter.exclude.size > 0} + <button + class="btn-slate relative hover:bg-rose-700" + on:click={() => navigate({ filter: {} }, $page.url.searchParams)} + transition:slide={slideXFast} + title="Reset filters" + > + <div class="flex"> + <span class="icon-base icon-[material-symbols--filter-alt-off]" /> + </div> + </button> + {/if} +</div> |