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

added headerItems to context menu

Browse source
This commit is contained in:
booploops 2022-01-13 03:08:57 -08:00
parent 9071dbc6ab
commit 549939e109
4 changed files with 79 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/renderer/index.js
View file

@ -296,7 +296,8 @@ const app = new Vue({
visible: false, visible: false,
content: { content: {
name: "", name: "",
items: {} items: {},
headerItems: {}
} }
} }
}, },
@ -340,7 +341,8 @@ const app = new Vue({
async showMenuPanel(data) { async showMenuPanel(data) {
app.menuPanel.visible = true; app.menuPanel.visible = true;
app.menuPanel.content.name = data.name ?? ""; app.menuPanel.content.name = data.name ?? "";
app.menuPanel.content.items = data.items ?? []; app.menuPanel.content.items = data.items ?? {};
app.menuPanel.content.headerItems = data.headerItems ?? {};
}, },
async getSvgIcon(url) { async getSvgIcon(url) {
let response = await fetch(url); let response = await fetch(url);

24
src/renderer/style.less
View file

@ -2811,6 +2811,30 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.menu-header-body {
padding: 6px;
display: flex;
background: rgb(200 200 200 / 10%);
.menu-option-header {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--mediaItemRadius);
appearance: none;
border: 0;
background: transparent;
&:hover {
background: var(--selected);
}
&:active {
background: var(--selected-click);
}
}
}
.menu-panel-body { .menu-panel-body {
display: flex; display: flex;
flex-flow: column; flex-flow: column;

82
src/renderer/views/components/mediaitem-list-item.ejs
View file

@ -256,40 +256,7 @@
] ]
}, },
normal: { normal: {
items: [ headerItems: [
{
"icon": "./assets/feather/list.svg",
"name": "Add to Playlist...",
"action": function () {
app.promptAddToPlaylist()
}
},
{
"name": "Play Next",
"action": function () {
app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
app.mk.queue._reindex()
app.selectedMediaItems = []
}
},
{
"name": "Play Later",
"action": function () {
app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
app.mk.queue._reindex()
app.selectedMediaItems = []
}
},
{
"icon": "./assets/feather/radio.svg",
"name": "Start Radio",
"action": function () {
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
app.mk.play()
app.selectedMediaItems = []
})
}
},
{ {
"icon": "./assets/feather/heart.svg", "icon": "./assets/feather/heart.svg",
"id": "love", "id": "love",
@ -328,6 +295,41 @@
app.unlove(self.item) app.unlove(self.item)
} }
}, },
],
items: [
{
"icon": "./assets/feather/list.svg",
"name": "Add to Playlist...",
"action": function () {
app.promptAddToPlaylist()
}
},
{
"name": "Play Next",
"action": function () {
app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
app.mk.queue._reindex()
app.selectedMediaItems = []
}
},
{
"name": "Play Later",
"action": function () {
app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
app.mk.queue._reindex()
app.selectedMediaItems = []
}
},
{
"icon": "./assets/feather/radio.svg",
"name": "Start Radio",
"action": function () {
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
app.mk.play()
app.selectedMediaItems = []
})
}
},
{ {
"icon": "./assets/feather/user.svg", "icon": "./assets/feather/user.svg",
"name": "Go to Artist", "name": "Go to Artist",
@ -371,14 +373,14 @@
try{ try{
let rating = await app.getRating(self.item) let rating = await app.getRating(self.item)
if (rating == 0) { if (rating == 0) {
menus.normal.items.find(x => x.id == 'love').disabled = false menus.normal.headerItems.find(x => x.id == 'love').disabled = false
menus.normal.items.find(x => x.id == 'dislike').disabled = false menus.normal.headerItems.find(x => x.id == 'dislike').disabled = false
} else if (rating == 1) { } else if (rating == 1) {
menus.normal.items.find(x => x.id == 'unlove').hidden = false menus.normal.headerItems.find(x => x.id == 'unlove').hidden = false
menus.normal.items.find(x => x.id == 'love').hidden = true menus.normal.headerItems.find(x => x.id == 'love').hidden = true
} else if (rating == -1) { } else if (rating == -1) {
menus.normal.items.find(x => x.id == 'undo_dislike').hidden = false menus.normal.headerItems.find(x => x.id == 'undo_dislike').hidden = false
menus.normal.items.find(x => x.id == 'dislike').hidden = true menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true
} }
} catch(err) { } catch(err) {

9
src/renderer/views/components/menu-panel.ejs
View file

@ -9,6 +9,15 @@
</div> </div>
</div> </div>
</div> </div>
<div class="menu-header-body" v-if="Object.keys(content.headerItems).length != 0">
<template v-for="item in content.headerItems">
<button class="menu-option-header" :title="item.name" v-if="canDisplay(item)" :style="getStyle(item)" @click="action(item)">
<div class="sidebar-icon" style="margin: 0;" v-if="item.icon">
<div class="svg-icon" :style="{'--url': 'url(' + item.icon + ')'}"></div>
</div>
</button>
</template>
</div>
<div class="menu-body"> <div class="menu-body">
<template v-for="item in content.items"> <template v-for="item in content.items">
<button class="menu-option" v-if="canDisplay(item)" :style="getStyle(item)" @click="action(item)"> <button class="menu-option" v-if="canDisplay(item)" :style="getStyle(item)" @click="action(item)">