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

feat(topbar): add mobile kebab menu for annotate/download actions hidden below md
Some checks failed
CI / Unit & Component Tests (pull_request) Has been cancelled
Details
CI / Backend Unit Tests (pull_request) Has been cancelled
Details
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / E2E Tests (pull_request) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-01 10:11:50 +02:00
parent dba1e2a8eb
commit 51348ad26a
1 changed files with 92 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/lib/components/DocumentTopBar.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/personFormat';
import { clickOutside } from '$lib/actions/clickOutside';
import PersonChipRow from './PersonChipRow.svelte';
import DocumentStatusChip from './DocumentStatusChip.svelte';
import AnnotateHintStrip from './AnnotateHintStrip.svelte';
@@ -38,6 +39,8 @@ const overflowPersons = $derived(receivers.slice(2));
const shortDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'short') : null);
const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long') : null);
let mobileMenuOpen = $state(false);
</script>
<div data-topbar class="border-b border-line bg-surface shadow-sm">
@@ -163,6 +166,95 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
/>
</a>
{/if}
<!-- Kebab menu — mobile only, contains actions hidden below md -->
{#if (canAnnotate && isPdf) || doc.filePath}
<div
role="group"
class="relative md:hidden"
use:clickOutside
onclickoutside={() => (mobileMenuOpen = false)}
>
<button
type="button"
onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
aria-label="Weitere Aktionen"
aria-haspopup="true"
aria-expanded={mobileMenuOpen}
class="flex h-9 w-9 items-center justify-center rounded border border-line bg-muted transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/View-More-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5"
/>
</button>
{#if mobileMenuOpen}
<div
role="menu"
class="absolute top-full right-0 z-50 mt-1 min-w-[200px] rounded-md border border-line bg-surface p-2 shadow-lg"
>
{#if canAnnotate && isPdf && !annotateMode}
<button
role="menuitem"
onclick={() => {
annotateMode = true;
mobileMenuOpen = false;
}}
class="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 shrink-0"
/>
{m.doc_panel_annotate()}
</button>
{/if}
{#if canAnnotate && isPdf && annotateMode}
<button
role="menuitem"
onclick={() => {
annotateMode = false;
mobileMenuOpen = false;
}}
class="flex w-full items-center gap-2 rounded bg-primary px-3 py-2 text-left text-[16px] text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 shrink-0 invert"
/>
{m.doc_panel_annotate_stop()}
</button>
{/if}
{#if doc.filePath}
<a
role="menuitem"
href={fileUrl}
download={doc.originalFilename}
onclick={() => (mobileMenuOpen = false)}
class="flex items-center gap-2 rounded px-3 py-2 text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 shrink-0"
/>
{m.doc_download_title()}
</a>
{/if}
</div>
{/if}
</div>
{/if}
</div>
</div>