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

feat(annotations): add hover effect — increased opacity and inset border on hover

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-24 11:26:25 +01:00
parent aaa9286612
commit af57b4e530
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/lib/components/AnnotationLayer.svelte
View File

@@ -100,6 +100,8 @@ function handlePointerUp(event: PointerEvent) {
drawRect = null;
}
let hoveredId = $state<string | null>(null);
const containerStyle = $derived(
`position: absolute; top: 0; left: 0; width: 100%; height: 100%;${canAnnotate ? ' cursor: crosshair;' : ''}`
);
@@ -120,14 +122,18 @@ const containerStyle = $derived(
tabindex="0"
onclick={() => onAnnotationClick?.(annotation.id)}
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') onAnnotationClick?.(annotation.id); }}
onmouseenter={() => (hoveredId = annotation.id)}
onmouseleave={() => (hoveredId = null)}
style="
position: absolute;
left: {annotation.x * 100}%;
top: {annotation.y * 100}%;
width: {annotation.width * 100}%;
height: {annotation.height * 100}%;
background-color: {hexToRgba(annotation.color, 0.3)};
background-color: {hexToRgba(annotation.color, hoveredId === annotation.id ? 0.5 : 0.3)};
box-shadow: {hoveredId === annotation.id ? `inset 0 0 0 2px ${hexToRgba(annotation.color, 0.8)}` : 'none'};
pointer-events: auto;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
{onAnnotationClick && !canAnnotate ? 'cursor: pointer;' : ''}
"
>