From e77f939ec4b7f193230615c7d3e10d53e8ec4db2 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 2 Oct 2020 12:31:30 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20enhance=20copyable=20wit?=
 =?UTF-8?q?h=20mark=20element=20and=20background=20color?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/core/app/components/copyable/index.hbs | 18 ++++++++++++------
 ui/core/app/components/copyable/index.js  | 19 +++++++++++--------
 ui/core/app/styles/app.scss               |  9 +++++++++
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/ui/core/app/components/copyable/index.hbs b/ui/core/app/components/copyable/index.hbs
index 499c4fc43..497e5f2f7 100644
--- a/ui/core/app/components/copyable/index.hbs
+++ b/ui/core/app/components/copyable/index.hbs
@@ -5,18 +5,24 @@
     {{did-insert this.register}}
     {{will-destroy this.destroy}}
   >
-    <span class="copyable-content">
-      {{yield}}
-    </span>
+    {{#if this.copied}}
+      <mark class="copyable-content">
+        {{yield}}
+      </mark>
+    {{else}}
+      <span class="copyable-content">
+        {{yield}}
+      </span>
+    {{/if}}
 
     <Rose::Button
       id={{this.copyableButtonId}}
       aria-describedby={{this.id}}
       class="copyable-button"
       @style="ghost"
-      @iconOnly={{this.icon}}
-      title={{this.copyableButtonText}}
-    >{{this.copyableButtonText}}</Rose::Button>
+      @iconOnly={{if this.copied this.successIcon this.actionIcon}}
+      title={{if this.copied this.successText this.actionText}}
+    >{{this.actionText}}</Rose::Button>
   </span>
 {{else}}
   {{yield}}
diff --git a/ui/core/app/components/copyable/index.js b/ui/core/app/components/copyable/index.js
index 010c12758..0801d56b5 100644
--- a/ui/core/app/components/copyable/index.js
+++ b/ui/core/app/components/copyable/index.js
@@ -3,17 +3,22 @@ import ClipboardJS from 'clipboard';
 import { action } from '@ember/object';
 import { generateComponentID } from 'rose/utilities/component-auto-id';
 import { task, timeout } from 'ember-concurrency';
-import { set } from '@ember/object';
 import { bind } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
 
 export default class CopyableComponent extends Component {
 
   // =attributes
 
   id = generateComponentID();
-  icon = 'copy-action';
   copyableButtonId = `copyable-button-${this.id}`;
-  copyableButtonText = this.args.buttonText;
+
+  actionIcon = 'copy-action';
+  successIcon = 'copy-success';
+  actionText = this.args.buttonText;
+  successText = this.args.acknowledgeText;
+
+  @tracked copied = false;
 
   /**
    * A Ember Concurrency-based task that updates copy icon to a success state
@@ -26,11 +31,9 @@ export default class CopyableComponent extends Component {
    * @type {Task}
    */
   @task(function * () {
-    set(this, 'icon', 'copy-success');
-    set(this, 'copyableButtonText', this.args.acknowledgeText);
+    this.copied = true;
     yield timeout(1000);
-    set(this, 'icon', 'copy-action');
-    set(this, 'copyableButtonText', this.args.buttonText);
+    this.copied = false;
   }).drop() successIconTimer;
 
   // =methods
@@ -58,7 +61,7 @@ export default class CopyableComponent extends Component {
    */
   @action
   register() {
-    if(!this.clipboard) {
+    if (!this.clipboard) {
       this.clipboard = new ClipboardJS(`#${this.copyableButtonId}`, {
         text: () => this.args.text,
       });
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 052ca77c0..42ad8597c 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -100,4 +100,13 @@
     position: relative;
     top: -2px;
   }
+
+  mark {
+    background-color: transparent;
+    animation: fadeBackground 0.75s linear;
+    @keyframes fadeBackground {
+      0%   { background-color: var(--action-subtler-1); }
+      100% { background-color: transparent; }
+    }
+  }
 }