summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/toolbar/SelectionControls.svelte
diff options
context:
space:
mode:
authorWolfgang Müller2024-03-05 18:08:09 +0100
committerWolfgang Müller2024-03-05 19:25:59 +0100
commitd1d654ebac2d51e3841675faeb56480e440f622f (patch)
tree56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/lib/toolbar/SelectionControls.svelte
downloadhircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz
Initial commit0.1.0
Diffstat (limited to 'frontend/src/lib/toolbar/SelectionControls.svelte')
-rw-r--r--frontend/src/lib/toolbar/SelectionControls.svelte57
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}