web/SavingDialog: show that link was copied, better accessibility

This commit is contained in:
wukko 2024-07-28 23:29:32 +06:00
parent 3aeebcc911
commit 48d24ee1ea
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
4 changed files with 89 additions and 5 deletions

View file

@ -1,5 +1,7 @@
{ {
"picker.item.photo": "photo thumbnail", "picker.item.photo": "photo thumbnail",
"picker.item.video": "video thumbnail", "picker.item.video": "video thumbnail",
"picker.item.gif": "gif thumbnail" "picker.item.gif": "gif thumbnail",
"saving.copied": "link copied"
} }

View file

@ -5,9 +5,17 @@
}; };
export let fill = false; export let fill = false;
export let elevated = false; export let elevated = false;
export let ariaLabel = "";
</script> </script>
<button id="button-{id}" class="button vertical" class:fill class:elevated on:click={click}> <button
id="button-{id}"
class="button vertical"
class:fill
class:elevated
on:click={click}
aria-label={ariaLabel}
>
<slot></slot> <slot></slot>
</button> </button>
@ -19,6 +27,11 @@
gap: calc(var(--padding) / 2); gap: calc(var(--padding) / 2);
} }
.button.vertical :global(svg) {
width: 24px;
height: 24px;
}
.button.vertical.fill { .button.vertical.fill {
width: 100%; width: 100%;
padding: var(--padding) 0; padding: var(--padding) 0;

View file

@ -10,16 +10,25 @@
import DialogButtons from "$components/dialog/DialogButtons.svelte"; import DialogButtons from "$components/dialog/DialogButtons.svelte";
import VerticalActionButton from "$components/buttons/VerticalActionButton.svelte"; import VerticalActionButton from "$components/buttons/VerticalActionButton.svelte";
import IconCopy from "@tabler/icons-svelte/IconCopy.svelte";
import IconShare2 from "@tabler/icons-svelte/IconShare2.svelte"; import IconShare2 from "@tabler/icons-svelte/IconShare2.svelte";
import IconDownload from "@tabler/icons-svelte/IconDownload.svelte"; import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte"; import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
import CopyIcon from "$components/misc/CopyIcon.svelte";
export let id: string; export let id: string;
export let url: string; export let url: string;
export let bodyText: string = ""; export let bodyText: string = "";
let close: () => void; let close: () => void;
let copied = false;
$: if (copied) {
setTimeout(() => {
copied = false;
}, 1500);
}
</script> </script>
<DialogContainer {id} bind:close> <DialogContainer {id} bind:close>
@ -63,18 +72,24 @@
id="save-copy" id="save-copy"
fill fill
elevated elevated
click={async () => copyURL(url)} click={async () => {
copyURL(url);
copied = true;
}}
ariaLabel={copied ? $t("a11y.dialog.saving.copied") : ""}
> >
<IconCopy /> <CopyIcon check={copied} />
{$t("dialog.button.copy")} {$t("dialog.button.copy")}
</VerticalActionButton> </VerticalActionButton>
</div> </div>
</div> </div>
{#if bodyText} {#if bodyText}
<div class="body-text"> <div class="body-text">
{bodyText} {bodyText}
</div> </div>
{/if} {/if}
<DialogButtons <DialogButtons
buttons={[ buttons={[
{ {

View file

@ -0,0 +1,54 @@
<script lang="ts">
import IconCopy from "@tabler/icons-svelte/IconCopy.svelte";
import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
export let check = false;
</script>
<div id="copy-animation" class:check>
<div class="icon-copy">
<IconCopy />
</div>
<div class="icon-check">
<IconCheck />
</div>
</div>
<style>
#copy-animation {
position: relative;
height: 24px;
width: 24px;
}
#copy-animation :global(svg) {
will-change: transform;
}
.icon-copy,
.icon-check {
display: flex;
position: absolute;
transition: transform 0.25s, opacity 0.25s;
}
.icon-copy {
transform: none;
opacity: 1;
}
.icon-check {
transform: scale(0.4);
opacity: 0;
}
.check .icon-copy {
transform: scale(0.4);
opacity: 0;
}
.check .icon-check {
transform: none;
opacity: 1;
}
</style>