From 324b84c0b2246b696a2c3f758264c7d4eb986c20 Mon Sep 17 00:00:00 2001
From: Allen Lee <alee@users.noreply.github.com>
Date: Wed, 11 Oct 2023 11:26:48 -0700
Subject: [PATCH] fix(ui): make click to copy more visually clear

add text and select text that was copied
---
 app/components/Citation.vue               | 30 ++++++++++++++++-------
 app/components/dataset/TimeSeriesPlot.vue |  1 +
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/app/components/Citation.vue b/app/components/Citation.vue
index 9dd6ad8..79ec296 100644
--- a/app/components/Citation.vue
+++ b/app/components/Citation.vue
@@ -24,14 +24,24 @@
             itself.
           </p>
 
-          <h2>Example Citation</h2>
-          <blockquote class="blockquote" @click="copyToClipboard">
-            {{ citationText }}
-          </blockquote>
-          <h2>BibTeX</h2>
-          <blockquote class="blockquote" @click="copyToClipboard">
-            {{ citationBibTex }}
-          </blockquote>
+          <h2>Example Citation (click text to copy)</h2>
+          <v-textarea
+            class="blockquote"
+            readonly
+            no-resize
+            v-model="citationText"
+            @click="copyToClipboard"
+          >
+          </v-textarea>
+          <h2>BibTeX (click text to copy)</h2>
+          <v-textarea
+            class="blockquote"
+            readonly
+            no-resize
+            v-model="citationBibTex"
+            @click="copyToClipboard"
+          >
+          </v-textarea>
 
           <h2>Contact us</h2>
           <p class="text-body-1 px-2">
@@ -72,8 +82,10 @@ class Citation extends Vue {
 
   copyToClipboard(evt, data) {
     const srcElement = evt.srcElement;
-    const citationText = srcElement.innerText;
+    const citationText = srcElement.value;
+    console.log("citation text: ", citationText);
     navigator.clipboard.writeText(citationText).then(() => {
+      srcElement.select();
       this.clipboardMessage = true;
     });
   }
diff --git a/app/components/dataset/TimeSeriesPlot.vue b/app/components/dataset/TimeSeriesPlot.vue
index fe5ea8c..f3222ef 100644
--- a/app/components/dataset/TimeSeriesPlot.vue
+++ b/app/components/dataset/TimeSeriesPlot.vue
@@ -470,6 +470,7 @@ class TimeSeriesPlot extends Vue {
       this.localTemporalRangeMin,
       this.localTemporalRangeMax,
     ];
+    console.log("setting temporal range editable to false");
     this.isTemporalRangeEditable = false;
     // if yearSelected is set, clamp it to the new temporal range min / max if needed
     if (this.yearSelected == null) {