2e943b7f91
Replace ↑↓ text with Long-Arrow-Up/Down-MD.svg on the document search SortDropdown and the Briefwechsel sort button. Rotate the swap button SVG 90° so arrows point left/right matching the horizontal person field layout. Refs: #179 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
67 lines
2.1 KiB
Svelte
67 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
|
|
interface Props {
|
|
sort: string;
|
|
dir: string;
|
|
}
|
|
|
|
let { sort = $bindable(), dir = $bindable() }: Props = $props();
|
|
|
|
function toggleDir() {
|
|
dir = dir === 'asc' ? 'desc' : 'asc';
|
|
}
|
|
</script>
|
|
|
|
<div class="inline-flex items-stretch">
|
|
<label for="sort-field" class="sr-only">{m.docs_sort_label()}</label>
|
|
<div class="relative">
|
|
<select
|
|
id="sort-field"
|
|
bind:value={sort}
|
|
class="appearance-none border border-line bg-muted py-2.5 pr-9 pl-4 text-sm font-bold text-ink-2 transition hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
>
|
|
<option value="DATE">{m.docs_sort_date()}</option>
|
|
<option value="TITLE">{m.docs_sort_title()}</option>
|
|
<option value="SENDER">{m.docs_sort_sender()}</option>
|
|
<option value="RECEIVER">{m.docs_sort_receiver()}</option>
|
|
<option value="UPLOAD_DATE">{m.docs_sort_upload()}</option>
|
|
</select>
|
|
<svg
|
|
class="pointer-events-none absolute top-1/2 right-2.5 h-4 w-4 -translate-y-1/2 text-ink-2"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onclick={toggleDir}
|
|
class="-ml-px flex items-center justify-center border border-line bg-muted px-3 py-2.5 text-sm font-bold text-ink-2 transition hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
aria-label={dir === 'asc' ? m.sort_dir_asc() : m.sort_dir_desc()}
|
|
>
|
|
{#if dir === 'asc'}
|
|
<img
|
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Up-MD.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
class="h-5 w-5 opacity-60"
|
|
/>
|
|
{:else}
|
|
<img
|
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Down-MD.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
class="h-5 w-5 opacity-60"
|
|
/>
|
|
{/if}
|
|
</button>
|
|
</div>
|