diff options
| author | Wolfgang Müller | 2025-02-13 17:52:16 +0100 |
|---|---|---|
| committer | Wolfgang Müller | 2025-02-13 17:52:16 +0100 |
| commit | dc4db405d2991d3ec6a114f3b08d3fccd057d3ee (patch) | |
| tree | 2c620c9af2062ba09fa591f8b3ed961664adab58 /frontend/src/lib/reader/components | |
| parent | 4df870d793123be95c8af031a340a39b5b8402ac (diff) | |
| download | hircine-dc4db405d2991d3ec6a114f3b08d3fccd057d3ee.tar.gz | |
frontend: Migrate to Svelte 5
Diffstat (limited to 'frontend/src/lib/reader/components')
3 files changed, 18 insertions, 12 deletions
diff --git a/frontend/src/lib/reader/components/CloseReaderButton.svelte b/frontend/src/lib/reader/components/CloseReaderButton.svelte index 0c88323..f3eb4ba 100644 --- a/frontend/src/lib/reader/components/CloseReaderButton.svelte +++ b/frontend/src/lib/reader/components/CloseReaderButton.svelte @@ -1,19 +1,22 @@ <script lang="ts"> - import { getReaderContext } from '$lib/Reader'; import { accelerator } from '$lib/Shortcuts'; + import { getReaderContext } from '../Reader.svelte'; const reader = getReaderContext(); + + function onclick() { + reader.visible = false; + reader.sidebar = false; + } </script> <button type="button" class="btn floating" title="Close reader" - on:click={() => { - $reader.visible = false; - $reader.sidebar = false; - }} + aria-label="Close reader" + {onclick} use:accelerator={'Escape'} > - <span class="icon-lg icon-[material-symbols--close]" /> + <span class="icon-lg icon-[material-symbols--close]"></span> </button> diff --git a/frontend/src/lib/reader/components/PageIndicator.svelte b/frontend/src/lib/reader/components/PageIndicator.svelte index f79fc00..35190b3 100644 --- a/frontend/src/lib/reader/components/PageIndicator.svelte +++ b/frontend/src/lib/reader/components/PageIndicator.svelte @@ -1,9 +1,9 @@ <script lang="ts"> - import { getReaderContext } from '$lib/Reader'; + import { getReaderContext } from '../Reader.svelte'; const reader = getReaderContext(); </script> <div class="floating !p-2"> - {$reader.page + 1}/{$reader.pages.length} + {reader.page + 1}/{reader.pages.length} </div> diff --git a/frontend/src/lib/reader/components/ReaderMenuButton.svelte b/frontend/src/lib/reader/components/ReaderMenuButton.svelte index aa20206..58648e8 100644 --- a/frontend/src/lib/reader/components/ReaderMenuButton.svelte +++ b/frontend/src/lib/reader/components/ReaderMenuButton.svelte @@ -1,16 +1,19 @@ <script lang="ts"> - import { getReaderContext } from '$lib/Reader'; import { accelerator } from '$lib/Shortcuts'; + import { getReaderContext } from '../Reader.svelte'; const reader = getReaderContext(); + + let title = $derived(`${reader.sidebar ? 'Hide' : 'Show'} menu`); </script> <button type="button" class="btn floating invisible xl:visible" - title={`${$reader.sidebar ? 'Hide' : 'Show'} menu`} - on:click={() => ($reader.sidebar = !$reader.sidebar)} + {title} + aria-label={title} + onclick={() => (reader.sidebar = !reader.sidebar)} use:accelerator={'z'} > - <span class="icon-lg icon-[material-symbols--dock-to-right]" /> + <span class="icon-lg icon-[material-symbols--dock-to-right]"></span> </button> |