blob: 4d309df572d0c2a52e04300012b7d4afde1fb6d5 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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}
|
