marcel/familienarchiv
1
0
Fork 0
Code Issues 107 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(documents): timeline date-range filter with density bars (#385) #478

Merged
marcel merged 52 commits from feat/issue-385-timeline-density-filter into main 2026-05-08 12:27:17 +02:00
Conversation 31 Commits 52 Files Changed 28 +48 -25
2 changed files with 48 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e5739d7f8e - Show all commits

41
frontend/src/lib/document/TimelineControls.svelte Normal file
View File

@@ -0,0 +1,41 @@
<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
let {
isZoomed,
hasSelection,
onresetzoom,
onclearselection
}: {
isZoomed: boolean;
hasSelection: boolean;
onresetzoom: () => void;
onclearselection: () => void;
} = $props();
</script>
<div class="absolute top-2 right-2 flex items-center gap-1">
{#if isZoomed}
<button
type="button"
data-testid="timeline-zoom-reset"
aria-label={m.timeline_zoom_reset()}
title={m.timeline_zoom_reset()}
onclick={onresetzoom}
class="hover:text-ink-1 inline-flex h-6 items-center justify-center gap-1 rounded-sm px-2 text-xs text-ink-3 hover:bg-canvas"
>
↩
</button>
{/if}
{#if hasSelection}
<button
type="button"
data-testid="timeline-clear"
aria-label={m.timeline_clear_selection()}
onclick={onclearselection}
class="hover:text-ink-1 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-3 hover:bg-canvas"
>
×
</button>
{/if}
</div>

32
frontend/src/lib/document/TimelineDensityFilter.svelte
View File

@@ -12,6 +12,7 @@ import { getLocale } from '$lib/paraglide/runtime';
import TimelineBars from '$lib/document/TimelineBars.svelte';
import TimelineYAxis from '$lib/document/TimelineYAxis.svelte';
import TimelineXAxis from '$lib/document/TimelineXAxis.svelte';
import TimelineControls from '$lib/document/TimelineControls.svelte';
import type { components } from '$lib/generated/api';
type MonthBucket = components['schemas']['MonthBucket'];
@@ -268,30 +269,11 @@ const dragLiveMessage = $derived.by(() => {
{dragLiveMessage}
</div>
<div class="absolute top-2 right-2 flex items-center gap-1">
{#if isZoomed}
<button
type="button"
data-testid="timeline-zoom-reset"
aria-label={m.timeline_zoom_reset()}
title={m.timeline_zoom_reset()}
onclick={resetZoom}
class="hover:text-ink-1 inline-flex h-6 items-center justify-center gap-1 rounded-sm px-2 text-xs text-ink-3 hover:bg-canvas"
>
↩
</button>
{/if}
{#if hasSelection}
<button
type="button"
data-testid="timeline-clear"
aria-label={m.timeline_clear_selection()}
onclick={clearSelection}
class="hover:text-ink-1 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-3 hover:bg-canvas"
>
×
</button>
{/if}
</div>
<TimelineControls
isZoomed={isZoomed}
hasSelection={hasSelection}
onresetzoom={resetZoom}
onclearselection={clearSelection}
/>
</div>
{/if}