Update bookmark modal scrollable with create always visible, make UI consistent, hide create when bookmark already exists

This commit is contained in:
advplyr 2025-01-16 16:56:56 -06:00
parent 6057930507
commit 2463c62bbf
28 changed files with 29 additions and 58 deletions

View file

@ -1,5 +1,5 @@
<template>
<div class="flex items-center px-4 py-4 justify-start relative bg-primary hover:bg-opacity-25" :class="wrapperClass" @click.stop="click" @mouseover="mouseover" @mouseleave="mouseleave">
<div class="flex items-center px-4 py-4 justify-start relative hover:bg-primary/10" :class="wrapperClass" @click.stop="click" @mouseover="mouseover" @mouseleave="mouseleave">
<div class="w-16 max-w-16 text-center">
<p class="text-sm font-mono text-gray-400">
{{ this.$secondsToTimestamp(bookmark.time) }}
@ -10,7 +10,7 @@
<form @submit.prevent="submitUpdate">
<div class="flex items-center">
<div class="flex-grow pr-2">
<ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full" />
<ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full h-10" />
</div>
<ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-symbols text-2xl -mt-px">forward</span></ui-btn>
<div class="pl-2 flex items-center">
@ -83,11 +83,19 @@ export default {
if (this.newBookmarkTitle === this.bookmark.title) {
return this.cancelEditing()
}
var bookmark = { ...this.bookmark }
const bookmark = { ...this.bookmark }
bookmark.title = this.newBookmarkTitle
this.$emit('update', bookmark)
this.$axios
.$patch(`/api/me/item/${bookmark.libraryItemId}/bookmark`, bookmark)
.then(() => {
this.isEditing = false
})
.catch((error) => {
this.$toast.error(this.$strings.ToastFailedToUpdate)
console.error(error)
})
}
},
mounted() {}
}
}
</script>