Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-06-01 06:20:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

web/ProcessingStatus: refactor to svelte 5 & add aria label

Browse Source
This commit is contained in:
wukko 2025-05-14 22:41:55 +06:00
parent 773d771c40
commit 294273e2a7
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
2 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/i18n/en/a11y/queue.json Normal file
View File

@ -0,0 +1,5 @@
{
"status.default": "processing queue",
"status.completed": "processing queue. all tasks are completed.",
"status.ongoing": "processing queue. ongoing tasks."
}

28
web/src/components/queue/ProcessingStatus.svelte
View File

@ -1,19 +1,37 @@
<script lang="ts"> <script lang="ts">
import { t } from "$lib/i18n/translations";
import IconArrowDown from "@tabler/icons-svelte/IconArrowDown.svelte"; import IconArrowDown from "@tabler/icons-svelte/IconArrowDown.svelte";
export let indeterminate = false; type Props = {
export let progress: number = 0; indeterminate?: boolean;
export let expandAction: () => void; progress?: number;
expandAction: () => void;
}
$: progressStroke = `${progress}, 100`; let {
indeterminate = false,
progress = $bindable(0),
expandAction
}: Props = $props();
let progressStroke = $derived(`${progress}, 100`);
const indeterminateStroke = "15, 5"; const indeterminateStroke = "15, 5";
let ariaState = $derived(
progress > 0 && progress < 100
? "ongoing"
: progress >= 100
? "completed"
: "default"
)
</script> </script>
<button <button
id="processing-status" id="processing-status"
on:click={expandAction} onclick={expandAction}
class="button" class="button"
class:completed={progress >= 100} class:completed={progress >= 100}
aria-label={$t(`a11y.queue.status.${ariaState}`)}
> >
<svg <svg
id="progress-ring" id="progress-ring"