extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-08-16 18:11:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update copy to clipboard buttons to be standardized

Browse Source
This commit is contained in:
advplyr
2025-01-22 17:56:46 -06:00
parent c3c846f82d
commit 598a93d224
8 changed files with 33 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
client/components/ui/TextInput.vue
View File

@ -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)
})
},