mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-06-28 03:30:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update:Media item share modal UI/UX and localization #1768

Browse source
This commit is contained in:
advplyr 2024-06-29 16:15:55 -05:00
parent 31146082f0
commit c309856f74
5 changed files with 76 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

36
client/components/ui/TextInput.vue
View file

@ -1,12 +1,33 @@
<template>
<div ref="wrapper" class="relative">
<input :id="inputId" :name="inputName" ref="input" v-model="inputValue" :type="actualType" :step="step" :min="min" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" dir="auto" class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
<input
:id="inputId"
:name="inputName"
ref="input"
v-model="inputValue"
:type="actualType"
:step="step"
:min="min"
:readonly="readonly"
:disabled="disabled"
:placeholder="placeholder"
dir="auto"
class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full"
:class="classList"
@keyup="keyup"
@change="change"
@focus="focused"
@blur="blurred"
/>
<div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
<span class="material-icons text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
</div>
<div v-if="type === 'password' && isHovering" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
<span class="material-icons-outlined 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-icons-outlined text-gray-400 cursor-pointer text-lg" @click.stop.prevent="copyToClipboard">{{ !hasCopied ? 'content_copy' : 'done' }}</span>
</div>
</div>
</template>
@ -34,6 +55,7 @@ export default {
clearable: Boolean,
inputId: String,
inputName: String,
showCopy: Boolean,
step: [String, Number],
min: [String, Number]
},
@ -41,7 +63,8 @@ export default {
return {
showPassword: false,
isHovering: false,
isFocused: false
isFocused: false,
hasCopied: false
}
},
computed: {
@ -67,6 +90,15 @@ export default {
}
},
methods: {
copyToClipboard() {
if (this.hasCopied) return
this.$copyToClipboard(this.inputValue).then((success) => {
this.hasCopied = success
setTimeout(() => {
this.hasCopied = false
}, 2000)
})
},
clear() {
this.inputValue = ''
this.$emit('clear')