diff options
Diffstat (limited to 'frontend/src/lib/toolbar/SelectionControls.svelte')
| -rw-r--r-- | frontend/src/lib/toolbar/SelectionControls.svelte | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/frontend/src/lib/toolbar/SelectionControls.svelte b/frontend/src/lib/toolbar/SelectionControls.svelte new file mode 100644 index 0000000..4d309df --- /dev/null +++ b/frontend/src/lib/toolbar/SelectionControls.svelte @@ -0,0 +1,57 @@ +<script lang="ts"> + import { getSelectionContext } from '$lib/Selection'; + import { accelerator } from '$lib/Shortcuts'; + import { fadeDefault, slideXFast } from '$lib/Transitions'; + import Badge from '$lib/components/Badge.svelte'; + import { onDestroy } from 'svelte'; + import { fade, slide } from 'svelte/transition'; + + const selection = getSelectionContext(); + + export let page = false; + + const toggle = () => ($selection = $selection.toggle()); + const all = () => ($selection = $selection.all()); + const none = () => ($selection = $selection.none()); + + onDestroy(() => ($selection = $selection.clear())); +</script> + +<div class="rounded-group flex"> + <button + type="button" + class="btn-slate relative" + class:toggled={$selection.active} + title={`${$selection.active ? 'Exit' : 'Enter'} ${page ? 'page ' : ' '}selection mode`} + on:click={toggle} + use:accelerator={'s'} + > + {#if $selection.active} + {#if page} + <span class="icon-base icon-[material-symbols--edit-document]" /> + {:else} + <span class="icon-base icon-[material-symbols--remove-selection]" /> + {/if} + {:else if page} + <span class="icon-base icon-[material-symbols--edit-document-outline]" /> + {:else} + <span class="icon-base icon-[material-symbols--select]" /> + {/if} + <Badge number={$selection.size} /> + </button> + {#if $selection.active} + <div class="rounded-group-end flex" transition:slide={slideXFast}> + <button type="button" class="btn-slate" title="Select all" on:click={all}> + <span class="icon-base icon-[material-symbols--select-all]" /> + </button> + <button type="button" class="btn-slate" title="Select none" on:click={none}> + <span class="icon-base icon-[material-symbols--deselect]" /> + </button> + </div> + {/if} +</div> +{#if $selection.size > 0} + <div class="rounded-group flex" transition:fade={fadeDefault}> + <slot /> + </div> +{/if} |