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

Changed playlist description to prefer small and standard/large description on more press (Prevents cluttered look)

Browse source 
Changed playlist folder icon to reflect current UI design. (Removed alternative button in v-if and just added check in icon and click)
Fixed playlist name checking, now tries for curatorName
This commit is contained in:
Core 2022-01-08 20:31:41 +00:00
parent c1becbd792
commit c1ef08997e
No known key found for this signature in database
GPG key ID: 1B77805746C47C28
3 changed files with 48 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/renderer/style.less
View file

@ -2281,8 +2281,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
.playlist-artist {
font-weight: 500;
font-size: 1.6rem;
font-size: 20px;
margin-bottom: 6px;
margin-right: 6px;
flex-shrink: unset;

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

@ -1,33 +1,18 @@
<script type="text/x-template" id="sidebar-playlist">
<div class="sidebar-playlist" :key="item.id">
<button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-if="item.type != 'library-playlist-folders'"
:class="{'active': $root.page.includes(item.id)}"
<button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id"
:class="item.type != 'library-playlist-folders' ? {'active': $root.page.includes(item.id)} : [{'folder-button-active': folderOpened}, isPlaylistSelected]"
@contextmenu="playlistContextMenu($event, item.id)"
@dragstart="startDrag($event, item)"
@dragover="dragOver"
@drop="onDrop"
:href="item.href"
@click='$root.appRoute(`playlist_` + item.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'>
@click='item.type != "library-playlist-folders" ? openPlaylist(item) : getPlaylistChildren(item)'>
<template v-if="!renaming">
<div class="sidebar-icon" v-html="icon"></div> {{ 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]"
@contextmenu="playlistContextMenu($event, item.id)"
@dragstart="startDrag($event, item)"
@dragover="dragOver"
@drop="onDrop"
:href="item.href"
@click='getPlaylistChildren(item)'>
<span v-if="!folderOpened">📁</span>
<span v-else>📂</span>
<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">
<sidebar-playlist v-for="item in children" :item="item" :key="item.id"></sidebar-playlist>
@ -58,7 +43,11 @@
}
},
async mounted() {
this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg")
if (this.item.type !== "library-playlist-folders") {
this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg")
} else {
this.icon = await this.$root.getSvgIcon("./assets/feather/folder.svg")
}
},
methods: {
rename() {
@ -181,6 +170,11 @@
evt.dataTransfer.effectAllowed = 'move'
evt.dataTransfer.setData('text/plain', JSON.stringify(this.item))
},
openPlaylist(item) {
this.$root.appRoute(`playlist_` + item.id);
this.$root.showingPlaylist = [];
this.$root.getPlaylistFromID(this.$root.page.substring(9))
},
getPlaylistChildren(item) {
let self = this
this.children = []

40
src/renderer/views/pages/cider-playlist.ejs
View file

@ -36,13 +36,13 @@
@change="editPlaylist"
@keydown.enter="editPlaylist"/></div>
<div class="playlist-artist item-navigate"
v-if="data.attributes && data.attributes.artistName"
@click="if(data.attributes && data.attributes.artistName){ app.searchAndNavigate(data,'artist')}">
{{data.attributes ? (data.attributes.artistName ?? '') :''}}
v-if="getArtistName(data) != ''"
@click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''">
{{getArtistName(data)}}
</div>
<div class="playlist-desc" v-if="data.attributes.editorialNotes">
<div class="playlist-desc" v-if="getDescription(data) != ''">
<div class="content"
v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.standard ?? (data.attributes.editorialNotes.short ?? '') ) : (data.attributes.description ? (data.attributes.description.standard ?? (data.attributes.description.short ?? '')) : ''))"></div>
v-html="getDescription(data)"></div>
<button class="more-btn" @click="editorialNotesExpanded = !editorialNotesExpanded">
More
</button>
@ -138,7 +138,7 @@
methods: {
getBadges() {
return
if(this.badgesRequested) {
if (this.badgesRequested) {
return
}
this.badgesRequested = true
@ -161,6 +161,34 @@
}
})
},
getDescription(data) {
console.log(data.attributes)
if (data.attributes.editorialNotes) {
if (data.attributes.editorialNotes.hasOwnProperty('short')) {
return data.attributes.editorialNotes.short
} else if (data.attributes.editorialNotes.hasOwnProperty('standard')) {
return data.attributes.editorialNotes.standard
}
} else if (data.attributes.description) {
if (data.attributes.description.hasOwnProperty('short')) {
return data.attributes.description.short
} else if (data.attributes.description.hasOwnProperty('standard')) {
return data.attributes.description.standard
}
}
return ''
},
getArtistName(data) {
if (data.attributes.artistName) {
return data.attributes.artistName
} else if (data.attributes.artist) {
return data.attributes.artist.attributes.name
} else if (data.attributes.curatorName) {
return data.attributes.curatorName
} else {
return ""
}
},
async isInLibrary() {
if (this.data.type && !this.data.type.includes("library")) {
// please keep using vars here