helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): scrubber label and animation (#13815)

Browse source 
* feat(web): scrubber label and animation

* tune x fly in distance

* refactor

* lint and minor fix

* fly height
This commit is contained in:
Alex 2024-10-30 09:38:35 -05:00 • committed by GitHub
parent 0d62ff11f1
commit 244c8cb4d4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 34 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

24
web/src/lib/components/shared-components/scrubber/scrubber.svelte
View file

@ -1,9 +1,12 @@
<script lang="ts">
import type { AssetStore, AssetBucket, BucketListener } from '$lib/stores/assets.store';
import type { DateTime } from 'luxon';
import { DateTime } from 'luxon';
import { fromLocalDateTime, type ScrubberListener } from '$lib/utils/timeline-util';
import { clamp } from 'lodash-es';
import { onMount } from 'svelte';
import { isTimelineScrolling } from '$lib/stores/timeline.store';
import { parseUtcDate } from '$lib/utils/date-time';
import { fly } from 'svelte/transition';
export let timelineTopOffset = 0;
export let timelineBottomOffset = 0;
@ -72,6 +75,7 @@
$: timelineFullHeight = $assetStore.timelineHeight + timelineTopOffset + timelineBottomOffset;
$: relativeTopOffset = toScrollY(timelineTopOffset / timelineFullHeight);
$: relativeBottomOffset = toScrollY(timelineBottomOffset / timelineFullHeight);
$: formatedDate = scrubBucket?.bucketDate ? parseUtcDate(scrubBucket?.bucketDate).toFormat('MMM yyyy') : '';
const listener: BucketListener = (event) => {
const { type } = event;
@ -210,8 +214,9 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
transition:fly={{ x: 50, duration: 250 }}
id="immich-scrubbable-scrollbar"
class={`absolute right-0 z-[1] select-none bg-immich-bg hover:cursor-row-resize`}
class="absolute right-0 z-[1] select-none bg-immich-bg hover:cursor-row-resize"
style:padding-top={HOVER_DATE_HEIGHT + 'px'}
style:padding-bottom={HOVER_DATE_HEIGHT + 'px'}
class:invisible
@ -235,9 +240,20 @@
<!-- Scroll Position Indicator Line -->
{#if !isDragging}
<div
class="absolute right-0 h-[2px] w-10 bg-immich-primary dark:bg-immich-dark-primary"
class="absolute right-0 {$isTimelineScrolling && formatedDate
? 'h-[0px]'
: 'h-[2px]'} w-10 bg-immich-primary dark:bg-immich-dark-primary"
style:top="{scrollY + HOVER_DATE_HEIGHT}px"
/>
>
{#if $isTimelineScrolling && formatedDate}
<p
transition:fly={{ y: -15, duration: 350 }}
class="truncate opacity-85 pointer-events-none absolute right-0 bottom-0 z-[100] min-w-20 max-w-64 w-fit rounded-tl-md border-b-2 border-immich-primary bg-immich-bg py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
{formatedDate}
</p>
{/if}
</div>
{/if}
<div id="lead-in" class="relative" style:height={relativeTopOffset + 'px'} data-label={segments.at(0)?.dateFormatted}>
{#if relativeTopOffset > 6}