From 549939e109455ee3d5876d995e90e418e94649f3 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 13 Jan 2022 03:08:57 -0800
Subject: [PATCH] added headerItems to context menu
---
src/renderer/index.js | 6 +-
src/renderer/style.less | 24 ++++++
.../views/components/mediaitem-list-item.ejs | 82 ++++++++++---------
src/renderer/views/components/menu-panel.ejs | 9 ++
4 files changed, 79 insertions(+), 42 deletions(-)
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 44586a2c..9a9c143f 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -296,7 +296,8 @@ const app = new Vue({
visible: false,
content: {
name: "",
- items: {}
+ items: {},
+ headerItems: {}
}
}
},
@@ -340,7 +341,8 @@ const app = new Vue({
async showMenuPanel(data) {
app.menuPanel.visible = true;
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) {
let response = await fetch(url);
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 1f0f0863..9bb7dc0e 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2811,6 +2811,30 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
justify-content: 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 {
display: flex;
flex-flow: column;
diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index f6bd37a6..00a73157 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -256,40 +256,7 @@
]
},
normal: {
- 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 = []
- })
- }
- },
+ headerItems: [
{
"icon": "./assets/feather/heart.svg",
"id": "love",
@@ -328,6 +295,41 @@
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",
"name": "Go to Artist",
@@ -371,14 +373,14 @@
try{
let rating = await app.getRating(self.item)
if (rating == 0) {
- menus.normal.items.find(x => x.id == 'love').disabled = false
- menus.normal.items.find(x => x.id == 'dislike').disabled = false
+ menus.normal.headerItems.find(x => x.id == 'love').disabled = false
+ menus.normal.headerItems.find(x => x.id == 'dislike').disabled = false
} else if (rating == 1) {
- menus.normal.items.find(x => x.id == 'unlove').hidden = false
- menus.normal.items.find(x => x.id == 'love').hidden = true
+ menus.normal.headerItems.find(x => x.id == 'unlove').hidden = false
+ menus.normal.headerItems.find(x => x.id == 'love').hidden = true
} else if (rating == -1) {
- menus.normal.items.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 == 'undo_dislike').hidden = false
+ menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true
}
} catch(err) {
diff --git a/src/renderer/views/components/menu-panel.ejs b/src/renderer/views/components/menu-panel.ejs
index 601f4b8d..c7d50d90 100644
--- a/src/renderer/views/components/menu-panel.ejs
+++ b/src/renderer/views/components/menu-panel.ejs
@@ -9,6 +9,15 @@
+
+
+
+
+