mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-21 11:14:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update create bookmark to auto focus and select input

Browse source
This commit is contained in:
advplyr 2025-01-13 16:48:51 -06:00
parent 69d198117e
commit 6cacf6b2c5
2 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/modals/BookmarksModal.vue
View file

@ -17,7 +17,7 @@
<p class="text-xl font-mono">{{ this.$secondsToTimestamp(currentTime) }}</p> <p class="text-xl font-mono">{{ this.$secondsToTimestamp(currentTime) }}</p>
</div> </div>
<ui-text-input-with-label v-model="newBookmarkTitle" label="Note" /> <ui-text-input-with-label v-model="newBookmarkTitle" ref="noteInput" label="Note" />
<div class="flex justify-end mt-6"> <div class="flex justify-end mt-6">
<ui-btn color="success" class="w-full" @click.stop="submitBookmark">{{ selectedBookmark ? 'Update' : 'Create' }}</ui-btn> <ui-btn color="success" class="w-full" @click.stop="submitBookmark">{{ selectedBookmark ? 'Update' : 'Create' }}</ui-btn>
</div> </div>
@ -151,6 +151,16 @@ export default {
this.selectedBookmark = null this.selectedBookmark = null
this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm') this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
this.showBookmarkTitleInput = true this.showBookmarkTitleInput = true
// Auto focus the input and select the text
this.$nextTick(() => {
if (this.$refs.noteInput?.$refs.input?.$refs.input) {
this.$refs.noteInput.$refs.input.$refs.input.focus()
setTimeout(() => {
this.$refs.noteInput?.$refs.input?.$refs.input?.select()
}, 10)
}
})
}, },
async submitBookmark() { async submitBookmark() {
await this.$hapticsImpact() await this.$hapticsImpact()

2
components/ui/TextInputWithLabel.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="w-full"> <div class="w-full">
<p class="pb-0.5 text-sm font-semibold">{{ label }}</p> <p class="pb-0.5 text-sm font-semibold">{{ label }}</p>
<ui-text-input v-model="inputValue" :disabled="disabled" :type="type" text-size="base" class="w-full" /> <ui-text-input v-model="inputValue" ref="input" :disabled="disabled" :type="type" text-size="base" class="w-full" />
</div> </div>
</template> </template>