fix(ui): make click to copy more visually clear

add text and select text that was copied
openskope · Oct 11, 2023 · 324b84c · 324b84c
1 parent 0ed72f7
commit 324b84c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git 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
@@ -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) {