From 6bc3ca7032c78c77a6e2b316789938221d686d8b Mon Sep 17 00:00:00 2001 From: Wolfgang Müller Date: Wed, 19 Feb 2025 15:39:48 +0100 Subject: frontend: Implement a better page indicator This replaces the very simplistic x/y page indicator with a visual bar at the bottom of the reader that allows the user quick access to any arbitrary page. At the margins it shows the current page number(s) and the total amount of pages. --- frontend/src/lib/reader/PageView.svelte | 60 ++++++++++++++++++---- .../src/lib/reader/components/PageIndicator.svelte | 9 ---- .../src/lib/reader/components/SliderMargin.svelte | 11 ++++ .../src/lib/reader/components/SliderTooltip.svelte | 17 ++++++ 4 files changed, 79 insertions(+), 18 deletions(-) delete mode 100644 frontend/src/lib/reader/components/PageIndicator.svelte create mode 100644 frontend/src/lib/reader/components/SliderMargin.svelte create mode 100644 frontend/src/lib/reader/components/SliderTooltip.svelte diff --git a/frontend/src/lib/reader/PageView.svelte b/frontend/src/lib/reader/PageView.svelte index 2f8def7..50c0873 100644 --- a/frontend/src/lib/reader/PageView.svelte +++ b/frontend/src/lib/reader/PageView.svelte @@ -1,10 +1,11 @@ -{:else if direction === Direction.LeftToRight} - - -{:else} +{:else if reverse} +{:else} + + {/if} -
- + +{#snippet pagesIn(chunk: Chunk)} + {#if chunk.secondary} + {chunk.index + 1} - {chunk.index + 2} + {:else} + {chunk.index + 1} + {/if} +{/snippet} + +
+
+ + {@render pagesIn(currentChunk)} + +
+ {#each chunks as chunk, index} + + {/each} +
+ + {reader.pages.length} + +
+ + + diff --git a/frontend/src/lib/reader/components/PageIndicator.svelte b/frontend/src/lib/reader/components/PageIndicator.svelte deleted file mode 100644 index d0a3d0c..0000000 --- a/frontend/src/lib/reader/components/PageIndicator.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - -
- {reader.page + 1}/{reader.pages.length} -
diff --git a/frontend/src/lib/reader/components/SliderMargin.svelte b/frontend/src/lib/reader/components/SliderMargin.svelte new file mode 100644 index 0000000..c2f9a55 --- /dev/null +++ b/frontend/src/lib/reader/components/SliderMargin.svelte @@ -0,0 +1,11 @@ + + +
+ {@render children()} +
diff --git a/frontend/src/lib/reader/components/SliderTooltip.svelte b/frontend/src/lib/reader/components/SliderTooltip.svelte new file mode 100644 index 0000000..9e0322d --- /dev/null +++ b/frontend/src/lib/reader/components/SliderTooltip.svelte @@ -0,0 +1,17 @@ + + + + + -- cgit v1.2.3-2-gb3c3