Update copy to clipboard buttons to be standardized

advplyr · Jan 22, 2025 · 598a93d · 598a93d
1 parent c3c846f
commit 598a93d
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 53 deletions.
diff --git a/client/components/modals/AudioFileDataModal.vue b/client/components/modals/AudioFileDataModal.vue
@@ -90,8 +90,8 @@
         <div class="relative">
           <ui-textarea-with-label :value="prettyFfprobeData" readonly :rows="30" class="text-xs" />
 
-          <button class="absolute top-4 right-4" :class="copiedToClipboard ? 'text-success' : 'text-white/50 hover:text-white/80'" @click.stop="copyFfprobeData">
-            <span class="material-symbols">{{ copiedToClipboard ? 'check' : 'content_copy' }}</span>
+          <button class="absolute top-4 right-4" :class="hasCopied ? 'text-success' : 'text-gray-400 hover:text-white'" @click.stop="copyToClipboard">
+            <span class="material-symbols">{{ hasCopied ? 'done' : 'content_copy' }}</span>
           </button>
         </div>
       </div>
@@ -113,14 +113,13 @@ export default {
     return {
       probingFile: false,
       ffprobeData: null,
-      copiedToClipboard: false
+      hasCopied: null
     }
   },
   watch: {
     show(newVal) {
       if (newVal) {
         this.ffprobeData = null
-        this.copiedToClipboard = false
         this.probingFile = false
       }
     }
@@ -165,8 +164,13 @@ export default {
           this.probingFile = false
         })
     },
-    async copyFfprobeData() {
-      this.copiedToClipboard = await this.$copyToClipboard(this.prettyFfprobeData)
+    copyToClipboard() {
+      clearTimeout(this.hasCopied)
+      this.$copyToClipboard(this.prettyFfprobeData).then((success) => {
+        this.hasCopied = setTimeout(() => {
+          this.hasCopied = null
+        }, 2000)
+      })
     }
   },
   mounted() {}

diff --git a/client/components/modals/ShareModal.vue b/client/components/modals/ShareModal.vue
@@ -16,7 +16,7 @@
       <template v-if="currentShare">
         <div class="w-full py-2">
           <label class="px-1 text-sm font-semibold block">{{ $strings.LabelShareURL }}</label>
-          <ui-text-input v-model="currentShareUrl" show-copy readonly class="text-base h-10" />
+          <ui-text-input v-model="currentShareUrl" show-copy readonly />
         </div>
         <div class="w-full py-2 px-1">
           <p v-if="currentShare.isDownloadable" class="text-sm mb-2">{{ $strings.LabelDownloadable }}</p>

diff --git a/client/components/modals/rssfeed/OpenCloseModal.vue b/client/components/modals/rssfeed/OpenCloseModal.vue
@@ -10,9 +10,7 @@
         <p class="text-lg font-semibold mb-4">{{ $strings.HeaderRSSFeedIsOpen }}</p>
 
         <div class="w-full relative">
-          <ui-text-input :value="feedUrl" readonly />
-
-          <span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 transform hover:scale-125 cursor-pointer" :class="copiedToClipboard ? 'text-success' : 'text-gray-300 hover:text-white'" @click="copyToClipboard(feedUrl)">{{ copiedToClipboard ? 'check' : 'content_copy' }}</span>
+          <ui-text-input :value="feedUrl" readonly show-copy />
         </div>
 
         <div v-if="currentFeed.meta" class="mt-5">
@@ -68,8 +66,7 @@ export default {
         preventIndexing: true,
         ownerName: '',
         ownerEmail: ''
-      },
-      copiedToClipboard: false
+      }
     }
   },
   watch: {
@@ -161,12 +158,6 @@ export default {
           this.processing = false
         })
     },
-    async copyToClipboard(str) {
-      this.copiedToClipboard = await this.$copyToClipboard(str)
-      setTimeout(() => {
-        this.copiedToClipboard = false
-      }, 2000)
-    },
     closeFeed() {
       this.processing = true
       this.$axios

diff --git a/client/components/modals/rssfeed/ViewFeedModal.vue b/client/components/modals/rssfeed/ViewFeedModal.vue
@@ -5,8 +5,7 @@
         <p class="text-lg font-semibold mb-4">{{ $strings.HeaderRSSFeedGeneral }}</p>
 
         <div class="w-full relative">
-          <ui-text-input :value="feedUrl" readonly />
-          <span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 transform hover:scale-125 cursor-pointer" :class="copiedToClipboard ? 'text-success' : 'text-gray-300 hover:text-white'" @click="copyToClipboard(feedUrl)">{{ copiedToClipboard ? 'check' : 'content_copy' }}</span>
+          <ui-text-input :value="feedUrl" readonly show-copy />
         </div>
 
         <div v-if="feed.meta" class="mt-5">
@@ -56,8 +55,7 @@ export default {
   },
   data() {
     return {
-      processing: false,
-      copiedToClipboard: false
+      processing: false
     }
   },
   computed: {
@@ -75,16 +73,7 @@ export default {
     feedUrl() {
       return this.feed ? `${window.origin}${this.$config.routerBasePath}${this.feed.feedUrl}` : ''
     }
-  },
-  methods: {
-    async copyToClipboard(str) {
-      this.copiedToClipboard = await this.$copyToClipboard(str)
-      setTimeout(() => {
-        this.copiedToClipboard = false
-      }, 2000)
-    }
-  },
-  mounted() {}
+  }
 }
 </script>
 

diff --git a/client/components/ui/TextInput.vue b/client/components/ui/TextInput.vue
@@ -7,8 +7,8 @@
     <div v-if="type === 'password' && isHovering" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
       <span class="material-symbols text-gray-400 cursor-pointer text-lg" @click.stop.prevent="showPassword = !showPassword">{{ !showPassword ? 'visibility' : 'visibility_off' }}</span>
     </div>
-    <div v-else-if="showCopy" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
-      <span class="material-symbols text-gray-400 cursor-pointer text-lg" @click.stop.prevent="copyToClipboard">{{ !hasCopied ? 'content_copy' : 'done' }}</span>
+    <div v-else-if="showCopy" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
+      <span class="material-symbols cursor-pointer text-lg" :class="hasCopied ? 'text-success' : 'text-gray-400 hover:text-white'" @click.stop.prevent="copyToClipboard">{{ !hasCopied ? 'content_copy' : 'done' }}</span>
     </div>
   </div>
 </template>
@@ -47,7 +47,7 @@ export default {
       showPassword: false,
       isHovering: false,
       isFocused: false,
-      hasCopied: false,
+      hasCopied: null,
       isInvalidDate: false
     }
   },
@@ -62,7 +62,12 @@ export default {
     },
     classList() {
       var _list = []
-      _list.push(`px-${this.paddingX}`)
+      if (this.showCopy) {
+        _list.push('pl-3', 'pr-8')
+      } else {
+        _list.push(`px-${this.paddingX}`)
+      }
+
       _list.push(`py-${this.paddingY}`)
       if (this.noSpinner) _list.push('no-spinner')
       if (this.textCenter) _list.push('text-center')
@@ -80,11 +85,10 @@ export default {
   },
   methods: {
     copyToClipboard() {
-      if (this.hasCopied) return
+      clearTimeout(this.hasCopied)
       this.$copyToClipboard(this.inputValue).then((success) => {
-        this.hasCopied = success
-        setTimeout(() => {
-          this.hasCopied = false
+        this.hasCopied = setTimeout(() => {
+          this.hasCopied = null
         }, 2000)
       })
     },

diff --git a/client/components/ui/TextInputWithLabel.vue b/client/components/ui/TextInputWithLabel.vue
@@ -6,7 +6,7 @@
         <em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
       </label>
     </slot>
-    <ui-text-input :placeholder="placeholder || label" :inputId="identifier" ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" class="w-full" :class="inputClass" @blur="inputBlurred" />
+    <ui-text-input :placeholder="placeholder || label" :inputId="identifier" ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" :show-copy="showCopy" class="w-full" :class="inputClass" @blur="inputBlurred" />
   </div>
 </template>
 
@@ -23,7 +23,8 @@ export default {
     },
     readonly: Boolean,
     disabled: Boolean,
-    inputClass: String
+    inputClass: String,
+    showCopy: Boolean
   },
   data() {
     return {}

diff --git a/client/pages/config/users/_id/index.vue b/client/pages/config/users/_id/index.vue
@@ -14,11 +14,7 @@
         <h1 class="text-xl pl-2">{{ username }}</h1>
       </div>
       <div v-if="userToken" class="flex text-xs mt-4">
-        <ui-text-input-with-label :label="$strings.LabelApiToken" :value="userToken" readonly />
-
-        <div class="px-1 mt-8 cursor-pointer" @click="copyToClipboard(userToken)">
-          <span class="material-symbols pl-2 text-base">content_copy</span>
-        </div>
+        <ui-text-input-with-label :label="$strings.LabelApiToken" :value="userToken" readonly show-copy />
       </div>
       <div class="w-full h-px bg-white bg-opacity-10 my-2" />
       <div class="py-2">
@@ -140,9 +136,6 @@ export default {
     }
   },
   methods: {
-    copyToClipboard(str) {
-      this.$copyToClipboard(str, this)
-    },
     async init() {
       this.listeningSessions = await this.$axios
         .$get(`/api/users/${this.user.id}/listening-sessions?page=0&itemsPerPage=10`)

diff --git a/client/plugins/init.client.js b/client/plugins/init.client.js
@@ -128,12 +128,11 @@ Vue.prototype.$sanitizeSlug = (str) => {
   return str
 }
 
-Vue.prototype.$copyToClipboard = (str, ctx) => {
+Vue.prototype.$copyToClipboard = (str) => {
   return new Promise((resolve) => {
     if (navigator.clipboard) {
       navigator.clipboard.writeText(str).then(
         () => {
-          if (ctx) ctx.$toast.success('Copied to clipboard')
           resolve(true)
         },
         (err) => {
@@ -152,7 +151,6 @@ Vue.prototype.$copyToClipboard = (str, ctx) => {
       document.execCommand('copy')
       document.body.removeChild(el)
 
-      if (ctx) ctx.$toast.success('Copied to clipboard')
       resolve(true)
     }
   })