diff --git a/client/components/modals/AudioFileDataModal.vue b/client/components/modals/AudioFileDataModal.vue index 7e33a980..eb70f1c3 100644 --- a/client/components/modals/AudioFileDataModal.vue +++ b/client/components/modals/AudioFileDataModal.vue @@ -90,8 +90,8 @@
-
@@ -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 index 5b379884..0ae65ec6 100644 --- a/client/components/modals/ShareModal.vue +++ b/client/components/modals/ShareModal.vue @@ -16,7 +16,7 @@ @@ -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 index ee9ffb7a..a10394bd 100644 --- a/client/components/ui/TextInputWithLabel.vue +++ b/client/components/ui/TextInputWithLabel.vue @@ -6,7 +6,7 @@ {{ note }} - + @@ -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 index d19337af..fbef359b 100644 --- a/client/pages/config/users/_id/index.vue +++ b/client/pages/config/users/_id/index.vue @@ -14,11 +14,7 @@

{{ username }}

- - -
- content_copy -
+
@@ -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 index 984ec9d0..015cd919 100644 --- 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) } })