add copy to clipboard note

This commit is contained in:
cupcakearmy 2022-03-01 01:16:31 +01:00
parent 229c8d8368
commit 8e7e0414a6
No known key found for this signature in database
GPG Key ID: 3235314B4D31232F
6 changed files with 35 additions and 5 deletions

View File

@ -20,7 +20,8 @@
"errors": { "errors": {
"note_to_big": "Notiz konnte nicht erstellt werden. Notiz ist zu groß", "note_to_big": "Notiz konnte nicht erstellt werden. Notiz ist zu groß",
"note_error": "konnte keine Notiz erstellen. Bitte versuchen Sie es erneut." "note_error": "konnte keine Notiz erstellen. Bitte versuchen Sie es erneut."
} },
"copied_to_clipboard": "in die Zwischenablage kopiert 🔗"
}, },
"show": { "show": {
"errors": { "errors": {

View File

@ -20,7 +20,8 @@
"errors": { "errors": {
"note_to_big": "could not create note. note is to big", "note_to_big": "could not create note. note is to big",
"note_error": "could not create note. please try again." "note_error": "could not create note. please try again."
} },
"copied_to_clipboard": "copied to clipboard 🔗"
}, },
"show": { "show": {
"errors": { "errors": {

View File

@ -20,7 +20,8 @@
"errors": { "errors": {
"note_to_big": "no se pudo crear la nota. la nota es demasiado grande", "note_to_big": "no se pudo crear la nota. la nota es demasiado grande",
"note_error": "No se ha podido crear la nota. Por favor, inténtelo de nuevo." "note_error": "No se ha podido crear la nota. Por favor, inténtelo de nuevo."
} },
"copied_to_clipboard": "copiado al portapapeles 🔗"
}, },
"show": { "show": {
"errors": { "errors": {

View File

@ -20,7 +20,8 @@
"errors": { "errors": {
"note_to_big": "Impossible de créer une note. La note est trop grande", "note_to_big": "Impossible de créer une note. La note est trop grande",
"note_error": "n'a pas pu créer de note. Veuillez réessayer." "note_error": "n'a pas pu créer de note. Veuillez réessayer."
} },
"copied_to_clipboard": "copié dans le presse-papiers 🔗"
}, },
"show": { "show": {
"errors": { "errors": {

View File

@ -20,7 +20,8 @@
"errors": { "errors": {
"note_to_big": "impossibile creare una nota. la nota è troppo grande", "note_to_big": "impossibile creare una nota. la nota è troppo grande",
"note_error": "Impossibile creare la nota. Riprova." "note_error": "Impossibile creare la nota. Riprova."
} },
"copied_to_clipboard": "copiato negli appunti 🔗"
}, },
"show": { "show": {
"errors": { "errors": {

View File

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import { getRandomBytes, Hex } from '$lib/crypto' import { getRandomBytes, Hex } from '$lib/crypto'
import { fade } from 'svelte/transition'
import { t } from 'svelte-intl-precompile'
import copyToClipboard from 'copy-to-clipboard' import copyToClipboard from 'copy-to-clipboard'
import Icon from './Icon.svelte' import Icon from './Icon.svelte'
@ -14,6 +16,8 @@
const initialType = $$restProps.type const initialType = $$restProps.type
const isPassword = initialType === 'password' const isPassword = initialType === 'password'
let hidden = true let hidden = true
let notification: string | null = null
let notificationTimeout: NodeJS.Timeout | null = null
$: if (isPassword) { $: if (isPassword) {
value value
@ -25,10 +29,21 @@
} }
function copyFN() { function copyFN() {
copyToClipboard(value) copyToClipboard(value)
notify($t('home.copied_to_clipboard'))
} }
function randomFN() { function randomFN() {
value = Hex.encode(getRandomBytes(20)) value = Hex.encode(getRandomBytes(20))
} }
function notify(msg: string, delay: number = 2000) {
if (notificationTimeout) {
clearTimeout(notificationTimeout)
}
notificationTimeout = setTimeout(() => {
notification = null
}, delay)
notification = msg
}
</script> </script>
<label> <label>
@ -47,6 +62,9 @@
<Icon class="icon" icon="copy-sharp" on:click={copyFN} /> <Icon class="icon" icon="copy-sharp" on:click={copyFN} />
{/if} {/if}
</div> </div>
{#if notification}
<div class="notification" transition:fade><small>{notification}</small></div>
{/if}
</label> </label>
<style> <style>
@ -88,4 +106,11 @@
.icons > :global(.icon:hover) { .icons > :global(.icon:hover) {
border-color: var(--ui-clr-primary); border-color: var(--ui-clr-primary);
} }
.notification {
text-align: right;
position: absolute;
right: 0;
bottom: -1.5em;
}
</style> </style>