9d26ce6054
Second step of the Phase 5 split. The kebab dropdown — including clickOutside handling and its own mobileMenuOpen state — becomes its own component named after its visual region. The mobile snippet duplication inside DocumentTopBar is removed; the component owns its mobile-specific markup. TDD: DocumentMobileMenu.svelte.test.ts (7 tests) was red first. The component then made it green (kebab trigger, dropdown open/close on click, transcribe button gated on canWrite × isPdf × !transcribeMode, download link gated on filePath). DocumentTopBar wraps the new component in a md:hidden div so responsive behaviour is unchanged. Existing 18-test DocumentTopBar suite still passes. Refs #496. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
97 lines
2.7 KiB
Svelte
97 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import { clickOutside } from '$lib/shared/actions/clickOutside';
|
|
|
|
type Props = {
|
|
canWrite: boolean;
|
|
isPdf: boolean;
|
|
transcribeMode: boolean;
|
|
filePath?: string | null;
|
|
originalFilename?: string | null;
|
|
fileUrl: string;
|
|
};
|
|
|
|
let {
|
|
canWrite,
|
|
isPdf,
|
|
transcribeMode = $bindable(),
|
|
filePath = null,
|
|
originalFilename = null,
|
|
fileUrl
|
|
}: Props = $props();
|
|
|
|
let mobileMenuOpen = $state(false);
|
|
|
|
function startTranscribe() {
|
|
transcribeMode = true;
|
|
mobileMenuOpen = false;
|
|
}
|
|
</script>
|
|
|
|
<div role="group" class="relative" use:clickOutside onclickoutside={() => (mobileMenuOpen = false)}>
|
|
<button
|
|
type="button"
|
|
onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
|
|
aria-label={m.topbar_more_actions()}
|
|
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 canWrite && isPdf && !transcribeMode}
|
|
<button
|
|
onclick={startTranscribe}
|
|
aria-label={m.transcription_mode_label()}
|
|
aria-pressed={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"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 shrink-0"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
|
|
/>
|
|
</svg>
|
|
{m.transcription_mode_label()}
|
|
</button>
|
|
{/if}
|
|
|
|
{#if filePath}
|
|
<a
|
|
href={fileUrl}
|
|
download={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"
|
|
title={m.doc_download_title()}
|
|
>
|
|
<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>
|