diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css index 04be3ee6..14d37ce4 100644 --- a/web/app/src/assets/base.css +++ b/web/app/src/assets/base.css @@ -646,5 +646,13 @@ span.state-transition-arrow.lazy { } .click-to-copy { + /* The transition plays together with the duration set in clipboard.js */ + --transition-duration: var(--transition-speed-fast); cursor: pointer; + transition: var(--transition-duration); +} +.click-to-copy.copied { + background-color: var(--color-accent-background); + color: var(--color-accent-text); + transition: var(--transition-duration); } diff --git a/web/app/src/clipboard.js b/web/app/src/clipboard.js index 7b524656..3ccee2ad 100644 --- a/web/app/src/clipboard.js +++ b/web/app/src/clipboard.js @@ -1,3 +1,12 @@ + +/** + * The duration in milliseconds of the "flash" effect, when an element has been + * copied. + * + * Also check `base.css`, `.copied` rule, which defines transition durations. + */ +const flashAfterCopyDuration = 150; + /** * Copy the inner text of an element to the clipboard. * @@ -18,4 +27,13 @@ export function copyElementText(clickEvent) { document.execCommand("copy"); document.body.removeChild(inputElement); + + flashElement(sourceElement); +} + +function flashElement(element) { + element.classList.add("copied"); + window.setTimeout(() => { + element.classList.remove("copied"); + }, 150); } diff --git a/web/app/src/components/GetTheAddon.vue b/web/app/src/components/GetTheAddon.vue index 7c4ae6e6..747a51b6 100644 --- a/web/app/src/components/GetTheAddon.vue +++ b/web/app/src/components/GetTheAddon.vue @@ -4,7 +4,7 @@

Get the Blender add-on and submit a job.

Use the URL below in the add-on preferences. Click on it to copy.

-

{{ api() }}

+

{{ api() }}

@@ -21,8 +21,12 @@ import { copyElementText } from '@/clipboard.js'; text-align: center; } -button { +.btn { margin: var(--spacer); font-size: var(--font-size-lg); } + +.click-to-copy { + padding: var(--spacer-sm); +}