mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-08-02 17:24:57 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change: Bookmark UI #115

Browse source
This commit is contained in:
advplyr 2021-11-03 17:45:47 -05:00
parent 76f28971a9
commit 908b9da112
6 changed files with 115 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

75
client/components/modals/bookmarks/BookmarkItem.vue
View file

@ -1,15 +1,30 @@
<template>
<div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-4 py-4 justify-start cursor-pointer hover:bg-bg relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click" @mouseover="isHovering = true" @mouseleave="isHovering = false">
<span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-60'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span>
<div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-4 py-4 justify-start relative hover:bg-bg" :class="wrapperClass" @click="click" @mouseover="mouseover" @mouseleave="mouseleave">
<!-- <span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-80'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span> -->
<div class="w-12 min-w-12 text-center">
<p class="text-sm font-mono text-white text-opacity-80">
{{ this.$secondsToTimestamp(bookmark.time) }}
</p>
</div>
<div class="flex-grow overflow-hidden">
<p class="pl-2 pr-2 truncate">{{ bookmark.title }}</p>
<template v-if="isEditing">
<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" />
</div>
<ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-icons -mt-px">forward</span></ui-btn>
<div class="pl-2 flex items-center">
<span class="material-icons text-3xl text-white text-opacity-70 hover:text-opacity-95 cursor-pointer" @click.stop.prevent="cancelEditing">close</span>
</div>
</div>
</form>
</template>
<p v-else class="pl-2 pr-2 truncate">{{ bookmark.title }}</p>
</div>
<div class="h-full flex items-center w-16 justify-end">
<span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(bookmark.time) }}</span>
</div>
<div class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
<span class="material-icons text-lg mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
<span class="material-icons text-lg text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span>
<div v-if="!isEditing" class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
<span class="material-icons text-xl mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
<span class="material-icons text-xl text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span>
</div>
</div>
</template>
@ -25,19 +40,53 @@ export default {
},
data() {
return {
isHovering: false
isHovering: false,
isEditing: false,
newBookmarkTitle: null
}
},
computed: {
wrapperClass() {
var classes = []
if (this.highlight) classes.push('bg-bg bg-opacity-60')
if (!this.isEditing) classes.push('cursor-pointer')
return classes.join(' ')
}
},
computed: {},
methods: {
click() {
mouseover() {
if (this.isEditing) return
this.isHovering = true
},
mouseleave() {
this.isHovering = false
},
click(e) {
if (this.isEditing) {
if (e) e.stopPropagation()
return
}
this.$emit('click', this.bookmark)
},
deleteClick() {
if (this.isEditing) return
this.$emit('delete', this.bookmark)
},
editClick() {
this.$emit('edit', this.bookmark)
this.newBookmarkTitle = this.bookmark.title
this.isEditing = true
this.isHovering = false
},
cancelEditing() {
this.isEditing = false
},
submitUpdate() {
if (this.newBookmarkTitle === this.bookmark.title) {
return this.cancelEditing()
}
var bookmark = { ...this.bookmark }
bookmark.title = this.newBookmarkTitle
this.$emit('update', bookmark)
}
},
mounted() {}