Update rss feed copy to clipboard to show checkmark instead of toast

This commit is contained in:
advplyr 2025-01-21 17:58:10 -06:00
parent 66b90e0841
commit c3c846f82d
2 changed files with 16 additions and 8 deletions

View File

@ -12,7 +12,7 @@
<div class="w-full relative"> <div class="w-full relative">
<ui-text-input :value="feedUrl" readonly /> <ui-text-input :value="feedUrl" readonly />
<span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(feedUrl)">content_copy</span> <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>
</div> </div>
<div v-if="currentFeed.meta" class="mt-5"> <div v-if="currentFeed.meta" class="mt-5">
@ -68,7 +68,8 @@ export default {
preventIndexing: true, preventIndexing: true,
ownerName: '', ownerName: '',
ownerEmail: '' ownerEmail: ''
} },
copiedToClipboard: false
} }
}, },
watch: { watch: {
@ -160,8 +161,11 @@ export default {
this.processing = false this.processing = false
}) })
}, },
copyToClipboard(str) { async copyToClipboard(str) {
this.$copyToClipboard(str, this) this.copiedToClipboard = await this.$copyToClipboard(str)
setTimeout(() => {
this.copiedToClipboard = false
}, 2000)
}, },
closeFeed() { closeFeed() {
this.processing = true this.processing = true

View File

@ -6,7 +6,7 @@
<div class="w-full relative"> <div class="w-full relative">
<ui-text-input :value="feedUrl" readonly /> <ui-text-input :value="feedUrl" readonly />
<span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(feedUrl)">content_copy</span> <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>
</div> </div>
<div v-if="feed.meta" class="mt-5"> <div v-if="feed.meta" class="mt-5">
@ -56,7 +56,8 @@ export default {
}, },
data() { data() {
return { return {
processing: false processing: false,
copiedToClipboard: false
} }
}, },
computed: { computed: {
@ -76,8 +77,11 @@ export default {
} }
}, },
methods: { methods: {
copyToClipboard(str) { async copyToClipboard(str) {
this.$copyToClipboard(str, this) this.copiedToClipboard = await this.$copyToClipboard(str)
setTimeout(() => {
this.copiedToClipboard = false
}, 2000)
} }
}, },
mounted() {} mounted() {}