okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

playlist folders can now be renamed and created, folders and playlists names can now be edited with context menu

Browse source
This commit is contained in:
booploops 2022-01-03 06:34:32 -08:00
parent dffd6a4ad0
commit 52b1f3e0ef
3 changed files with 85 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/renderer/views/components/sidebar-playlist.ejs
View file

@ -8,7 +8,10 @@
@drop="onDrop"
:href="item.href"
@click='$root.appRoute(`playlist_` + item.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'>
{{ item.attributes.name }}
<template v-if="!renaming">
{{ item.attributes.name }}
</template>
<input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
</button>
<button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-else
:class="[{'folder-button-active': folderOpened}, isPlaylistSelected]"
@ -20,7 +23,10 @@
@click='getPlaylistChildren(item)'>
<span v-if="!folderOpened">📁</span>
<span v-else>📂</span>
{{ item.attributes.name }}
<template v-if="!renaming">
{{ item.attributes.name }}
</template>
<input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
</button>
<div class="folder-body" v-if="item.type === 'library-playlist-folders' && folderOpened">
<template v-if="children.length != 0">
@ -46,10 +52,20 @@
return {
folderOpened: false,
children: [],
playlistRoot: "p.playlistsroot"
playlistRoot: "p.playlistsroot",
renaming: false
}
},
methods: {
rename() {
this.renaming = false
if(this.item.type === "library-playlist-folders") {
this.$root.editPlaylistFolder(this.item.id, this.item.attributes.name)
}else{
this.$root.editPlaylist(this.item.id, this.item.attributes.name)
}
},
async getChildren() {
let self = this
this.children = []
@ -106,6 +122,16 @@
setTimeout(()=>{self.getChildren()}, 2000)
}
},
"rename": {
name: "Rename",
action: () => {
this.renaming = true
setTimeout(()=>{
document.querySelector(".pl-rename-field").focus()
document.querySelector(".pl-rename-field").select()
}, 100)
}
},
"deleteFromPlaylist": {
name: "Delete from library",
action: () => {