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

@@ -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);
 }

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);
 }

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>