diff options
| author | Fuwn <[email protected]> | 2026-05-29 14:33:53 +0000 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-05-29 14:33:53 +0000 |
| commit | 6013449b7dc4a67c51fe9ca09760c22f80a582c0 (patch) | |
| tree | c7e892bed6d5ae3adc8d8fc9c9429fa28ef726f8 | |
| parent | fix(layout): keep NumberTicker visible when end equals start (diff) | |
| download | due.moe-6013449b7dc4a67c51fe9ca09760c22f80a582c0.tar.xz due.moe-6013449b7dc4a67c51fe9ca09760c22f80a582c0.zip | |
feat(lists): animate list-title count with NumberTicker
| -rw-r--r-- | src/lib/List/ListTitle.svelte | 12 |
1 files changed, 7 insertions, 5 deletions
diff --git a/src/lib/List/ListTitle.svelte b/src/lib/List/ListTitle.svelte index 2e9181d0..e9603066 100644 --- a/src/lib/List/ListTitle.svelte +++ b/src/lib/List/ListTitle.svelte @@ -1,6 +1,7 @@ <script lang="ts"> import tooltip from "$lib/Tooltip/tooltip"; import settings from "$stores/settings"; +import NumberTicker from "$lib/Layout/NumberTicker.svelte"; import type { Title } from "./mediaTitle"; export let time: number | undefined = undefined; @@ -17,12 +18,13 @@ export let hideCount = false; <summary> <span class="list-title-text" title={title.hint || undefined} use:tooltip>{title.title}</span> {#if !hideCount} - <span class="opaque list-title-count">{count === -1337 ? '...' : count}</span> + <span class="opaque list-title-count"> + {#if count === -1337}...{:else}<NumberTicker + end={count} + duration={Math.min(2500, Math.max(500, Math.abs(count) * 10))} + />{/if} + </span> {/if} - <!-- {#if !hideCount}{#if count === -1337}...{:else}<NumberTicker - end={count} - duration={Math.min(2500, Math.max(500, Math.abs(count - 0) * 10))} - />{/if}{/if} --> {#if !hideTime && $settings.debugShowListTimings} {#if !hideCount} <span class="opaque list-title-separator">ยท</span> |