marcel/familienarchiv
1
0
Fork 0
Code Issues 107 Pull Requests 2 Actions 1 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 +9 -1
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 48da819a54 - Show all commits

2
frontend/src/lib/document/TimelineBars.svelte
View File

@@ -59,7 +59,7 @@ function barHeight(count: number): number {
onpointerdown={(e) => onbarpointerdown(e, i)} onpointerdown={(e) => onbarpointerdown(e, i)}
onpointerenter={() => onbarpointerenter(i)} onpointerenter={() => onbarpointerenter(i)}
onclick={() => onbarclick(i)} onclick={() => onbarclick(i)}
class="bar group flex h-full min-w-px flex-1 cursor-pointer items-end justify-center bg-transparent p-0 transition-colors" class="bar group flex h-full min-w-px flex-1 cursor-pointer items-end justify-center bg-transparent p-0 transition-colors focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
class:selected={isSelected(bucket.month)} class:selected={isSelected(bucket.month)}
class:in-drag-preview={isInDragPreview(i)} class:in-drag-preview={isInDragPreview(i)}
> >

8
frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
View File

@@ -324,6 +324,14 @@ describe('TimelineDensityFilter — touch targets', () => {
expect(clearBtn.classList.contains('w-11')).toBe(true); expect(clearBtn.classList.contains('w-11')).toBe(true);
expect(clearBtn.className).not.toMatch(/(?:^|\s)h-6(?:$|\s)/); expect(clearBtn.className).not.toMatch(/(?:^|\s)h-6(?:$|\s)/);
}); });
it('bar buttons render a focus-visible ring so keyboard users can see focus', async () => {
render(TimelineDensityFilter, makeProps());
const bar = document.querySelector('[data-testid="timeline-bar"]') as HTMLElement;
expect(bar.className).toMatch(/focus-visible:ring-2/);
expect(bar.className).toMatch(/focus-visible:ring-brand-navy/);
expect(bar.className).toMatch(/focus-visible:ring-offset-2/);
});
}); });
describe('TimelineDensityFilter — accessibility', () => { describe('TimelineDensityFilter — accessibility', () => {