mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-12 15:04:43 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Update:Bookmarks modal UI #876

Browse source
This commit is contained in:
advplyr 2023-09-17 09:28:43 -05:00
parent 04bc74babe
commit ce7779607f
3 changed files with 23 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/modals/BookmarksModal.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<modals-modal v-model="show" :width="300" height="100%"> <modals-modal v-model="show" :width="400" height="100%">
<template #outer> <template #outer>
<div class="absolute top-8 left-4 z-40"> <div class="absolute top-8 left-4 z-40">
<p class="text-white text-2xl truncate">Bookmarks</p> <p class="text-white text-2xl truncate">Bookmarks</p>
@ -102,8 +102,8 @@ export default {
}) })
if (!value) return if (!value) return
this.$axios this.$nativeHttp
.$delete(`/api/me/item/${this.libraryItemId}/bookmark/${bm.time}`) .delete(`/api/me/item/${this.libraryItemId}/bookmark/${bm.time}`)
.then(() => { .then(() => {
this.$toast.success('Bookmark removed') this.$toast.success('Bookmark removed')
}) })
@ -119,8 +119,8 @@ export default {
}, },
submitUpdateBookmark(updatedBookmark) { submitUpdateBookmark(updatedBookmark) {
var bookmark = { ...updatedBookmark } var bookmark = { ...updatedBookmark }
this.$axios this.$nativeHttp
.$patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark) .patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
.then(() => { .then(() => {
this.$toast.success('Bookmark updated') this.$toast.success('Bookmark updated')
}) })
@ -134,12 +134,12 @@ export default {
if (!this.newBookmarkTitle) { if (!this.newBookmarkTitle) {
this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm') this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
} }
var bookmark = { const bookmark = {
title: this.newBookmarkTitle, title: this.newBookmarkTitle,
time: Math.floor(this.currentTime) time: Math.floor(this.currentTime)
} }
this.$axios this.$nativeHttp
.$post(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark) .post(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
.then(() => { .then(() => {
this.$toast.success('Bookmark added') this.$toast.success('Bookmark added')
}) })

22
components/modals/bookmarks/BookmarkItem.vue
View file

@ -1,15 +1,17 @@
<template> <template>
<div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-3 py-4 justify-start cursor-pointer hover:bg-bg relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click"> <div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-1 py-4 justify-start cursor-pointer hover:bg-bg relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click">
<span class="material-icons text-xl" :class="highlight ? 'text-success' : 'text-white text-opacity-60'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span> <div class="flex-grow overflow-hidden px-2">
<div class="flex-grow overflow-hidden"> <div class="flex items-center mb-0.5">
<p class="pl-2 pr-2 truncate text-sm">{{ bookmark.title }}</p> <i class="material-icons text-lg pr-1 -mb-1" :class="highlight ? 'text-success' : 'text-white/60'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</i>
<p class="truncate text-sm">
{{ bookmark.title }}
</p>
</div>
<p class="text-sm font-mono text-gray-300 flex items-center"><span class="material-icons text-base text-white/60 pl-px pr-1">schedule</span>{{ $secondsToTimestamp(bookmark.time) }}</p>
</div> </div>
<div class="h-full flex items-center w-14 justify-end"> <div class="h-full flex items-center justify-end transform w-16 pr-2" @click.stop>
<span class="font-mono text-xs text-gray-300">{{ $secondsToTimestamp(bookmark.time) }}</span> <span class="material-icons text-2xl mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
</div> <span class="material-icons text-2xl text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span>
<div class="h-full flex items-center justify-end transform w-16">
<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> </div>
</div> </div>
</template> </template>

3
plugins/nativeHttp.js
View file

@ -37,6 +37,9 @@ export default function ({ store }, inject) {
}, },
patch(url, data, options = {}) { patch(url, data, options = {}) {
return this.request('PATCH', url, data, options) return this.request('PATCH', url, data, options)
},
delete(url, options = {}) {
return this.request('DELETE', url, undefined, options)
} }
} }
inject('nativeHttp', nativeHttp) inject('nativeHttp', nativeHttp)