42 lines
1.2 KiB
Svelte
42 lines
1.2 KiB
Svelte
<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-11 min-w-[44px] items-center justify-center gap-1 rounded-sm px-3 text-xs text-ink-3 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
|
||
>
|
||
↩
|
||
</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-11 w-11 items-center justify-center rounded-full text-ink-3 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
|
||
>
|
||
×
|
||
</button>
|
||
{/if}
|
||
</div>
|