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

Update:UI/UX improvements for playlists

Browse source
This commit is contained in:
advplyr 2023-06-11 17:03:03 -05:00
parent 455af239a1
commit db3c5396e9
4 changed files with 127 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

17
components/modals/playlists/PlaylistRow.vue
View file

@ -1,16 +1,15 @@
<template>
<div :key="playlist.id" :id="`playlist-row-${playlist.id}`" class="flex items-center px-3 py-2 justify-start cursor-pointer relative" :class="inPlaylist ? 'bg-bg bg-opacity-60' : 'bg-opacity-20'">
<div :key="playlist.id" :id="`playlist-row-${playlist.id}`" class="flex items-center px-3 py-2 justify-start relative border-y border-white/5" :class="inPlaylist ? 'bg-primary/20' : ''">
<div v-if="inPlaylist" class="absolute top-0 left-0 h-full w-1 bg-success z-10" />
<div class="w-16 max-w-16 text-center">
<div class="w-14 min-w-[56px] text-center" @click.stop="clickCover">
<covers-playlist-cover :items="items" :width="52" :height="52" />
</div>
<div class="flex-grow overflow-hidden">
<p class="pl-1 pr-2 truncate text-sm">{{ playlist.name }}</p>
<p class="px-2 truncate text-sm">{{ playlist.name }}</p>
</div>
<div class="absolute top-0 right-0 h-full flex items-center px-3" @click.stop="click">
<span v-if="inPlaylist" class="material-icons text-error">remove</span>
<span v-else class="material-icons text-success">add</span>
<div class="w-24 min-w-[96px] px-1">
<ui-btn v-if="inPlaylist" small class="w-full" @click.stop="click">Remove</ui-btn>
<ui-btn v-else small class="w-full" @click.stop="click">Add</ui-btn>
</div>
</div>
</template>
@ -35,6 +34,10 @@ export default {
methods: {
click() {
this.$emit('click', this.playlist)
},
clickCover() {
this.$emit('close')
this.$router.push(`/playlist/${this.playlist.id}`)
}
},
mounted() {}