d1b24c905f
transcription_read_label ("Transkription lesen") for the read-only entry
control and transcription_panel_title ("Transkription") for the plain
header readers see instead of the Lesen/Bearbeiten toggle.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
104 lines
2.9 KiB
Svelte
104 lines
2.9 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;
|
|
hasTranscription: boolean;
|
|
transcribeMode: boolean;
|
|
filePath?: string | null;
|
|
originalFilename?: string | null;
|
|
fileUrl: string;
|
|
};
|
|
|
|
let {
|
|
canWrite,
|
|
isPdf,
|
|
hasTranscription,
|
|
transcribeMode = $bindable(),
|
|
filePath = null,
|
|
originalFilename = null,
|
|
fileUrl
|
|
}: Props = $props();
|
|
|
|
const canOpenTranscription = $derived((canWrite || hasTranscription) && isPdf);
|
|
const transcriptionLabel = $derived(
|
|
canWrite ? m.transcription_mode_label() : m.transcription_read_label()
|
|
);
|
|
|
|
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 canOpenTranscription && !transcribeMode}
|
|
<button
|
|
onclick={startTranscribe}
|
|
aria-label={transcriptionLabel}
|
|
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>
|
|
{transcriptionLabel}
|
|
</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>
|