From f3693b88f48359ff3399ba2a80b5c78c305ed558 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Tue, 2 Aug 2022 11:03:39 +0200
Subject: [PATCH] Web: show feedback when clicking the backend URL to copy it

The URL now briefly flashes in the primary color, to show that the click
was acted upon.
---
 web/app/src/assets/base.css            |  8 ++++++++
 web/app/src/clipboard.js               | 18 ++++++++++++++++++
 web/app/src/components/GetTheAddon.vue |  8 ++++++--
 3 files changed, 32 insertions(+), 2 deletions(-)

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 @@
       <p>Get the Blender add-on and submit a job.</p>
       <p><button class="btn btn-primary">Get the add-on!</button></p>
       <p>Use the URL below in the add-on preferences. Click on it to copy.</p>
-      <p class="click-to-copy" title="Click to copy this URL" @click="copyElementText">{{ api() }}</p>
+      <p><span class="click-to-copy" title="Click to copy this URL" @click="copyElementText">{{ api() }}</span></p>
     </div>
   </div>
 </template>
@@ -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);
+}
 </style>