added some icons to context menus

This commit is contained in:
booploops 2022-01-06 19:28:58 -08:00
parent e58a8b166c
commit 7c4ed6f1fa
12 changed files with 53 additions and 19 deletions

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

After

Width:  |  Height:  |  Size: 371 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>

After

Width:  |  Height:  |  Size: 263 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>

After

Width:  |  Height:  |  Size: 304 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>

After

Width:  |  Height:  |  Size: 445 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>

After

Width:  |  Height:  |  Size: 364 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-down"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>

After

Width:  |  Height:  |  Size: 374 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>

After

Width:  |  Height:  |  Size: 348 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

After

Width:  |  Height:  |  Size: 346 B

View file

@ -5,7 +5,7 @@ var CiderContextMenu = {
Menu: function (event) {
this.items = []
},
Create(event, menudata) {
async Create(event, menudata) {
var menuBackground = document.createElement("div");
var menu = document.createElement("div");
menu.classList.add("context-menu-body");
@ -52,7 +52,10 @@ var CiderContextMenu = {
}
item.tabIndex = 0
item.classList.add("context-menu-item")
item.innerHTML = menudata.items[i].name
if(menudata.items[i]["icon"]) {
item.innerHTML += `<div class="sidebar-icon">${await app.getSvgIcon(menudata.items[i]["icon"])}</div>`
}
item.innerHTML += menudata.items[i].name
item.onclick = menudata.items[i].action
menu.appendChild(item)
}
@ -2797,12 +2800,14 @@ const app = new Vue({
normal: {
items: [
{
"icon": "./assets/feather/list.svg",
"name": "Add to Playlist...",
"action": function () {
app.promptAddToPlaylist()
}
},
{
"icon": "./assets/feather/plus.svg",
"id": "addToLibrary",
"name": "Add to Library...",
"disabled": false,
@ -2812,6 +2817,7 @@ const app = new Vue({
}
},
{
"icon": "./assets/feather/heart.svg",
"id": "love",
"name": "Love",
"disabled": true,
@ -2820,6 +2826,7 @@ const app = new Vue({
}
},
{
"icon": "./assets/feather/x-circle.svg",
"id": "unlove",
"name": "Unlove",
"disabled": true,
@ -2828,6 +2835,7 @@ const app = new Vue({
}
},
{
"icon": "./assets/feather/thumbs-down.svg",
"id": "dislike",
"name": "Dislike",
"disabled": true,
@ -2836,6 +2844,7 @@ const app = new Vue({
}
},
{
"icon": "./assets/feather/x-circle.svg",
"id": "undo_dislike",
"name": "Undo dislike",
"disabled": true,
@ -2844,6 +2853,7 @@ const app = new Vue({
}
},
{
"icon": "./assets/feather/radio.svg",
"name": "Start Radio",
"action": function () {
app.mk.setStationQueue({song: item_id}).then(() => {

View file

@ -578,7 +578,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.context-menu-item {
background: transparent;
display: block;
display: flex;
width: 100%;
text-align: left;
color: #eee;

View file

@ -247,20 +247,12 @@
normal: {
items: [
{
"icon": "./assets/feather/list.svg",
"name": "Add to Playlist...",
"action": function () {
app.promptAddToPlaylist()
}
},
{
"name": "Start Radio",
"action": function () {
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
app.mk.play()
app.selectedMediaItems = []
})
}
},
{
"name": "Play Next",
"action": function () {
@ -278,6 +270,17 @@
}
},
{
"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",
"id": "love",
"name": "Love",
"disabled": true,
@ -286,6 +289,7 @@
}
},
{
"icon": "./assets/feather/x-circle.svg",
"id": "unlove",
"name": "Unlove",
"disabled": true,
@ -294,6 +298,7 @@
}
},
{
"icon": "./assets/feather/thumbs-down.svg",
"id": "dislike",
"name": "Dislike",
"disabled": true,
@ -302,6 +307,7 @@
}
},
{
"icon": "./assets/feather/x-circle.svg",
"id": "undo_dislike",
"name": "Undo dislike",
"disabled": true,
@ -310,18 +316,21 @@
}
},
{
"icon": "./assets/feather/user.svg",
"name": "Go to Artist",
"action": function () {
app.searchAndNavigate(self.item, 'artist')
}
},
{
"icon": "./assets/feather/disc.svg",
"name": "Go to Album",
"action": function () {
app.searchAndNavigate(self.item, 'album')
}
},
{
"icon": "./assets/feather/share.svg",
"name": "Share",
"action": function () {
self.app.copyToClipboard(self.item.attributes.url)

View file

@ -304,6 +304,14 @@
},
normal: {
items: [
{
"icon": "./assets/feather/list.svg",
"id": "addToPlaylist",
"name": "Add to Playlist...",
"action": function () {
app.promptAddToPlaylist()
}
},
{
"name": "Play Next",
"action": function () {
@ -321,13 +329,7 @@
}
},
{
"id": "addToPlaylist",
"name": "Add to Playlist...",
"action": function () {
app.promptAddToPlaylist()
}
},
{
"icon": "./assets/feather/plus.svg",
"name": (this.addedToLibrary) ? "Remove from Library..." : "Add to Library...",
"action": async function () {
let item_id = self.item.attributes.playParams.id ?? self.item.id;
@ -345,6 +347,7 @@
}
},
{
"icon": "./assets/feather/heart.svg",
"id": "love",
"name": "Love",
"disabled": true,
@ -353,6 +356,7 @@
}
},
{
"icon": "./assets/feather/x-circle.svg",
"id": "unlove",
"name": "Unlove",
"disabled": true,
@ -361,6 +365,7 @@
}
},
{
"icon": "./assets/feather/thumbs-down.svg",
"id": "dislike",
"name": "Dislike",
"disabled": true,
@ -369,6 +374,7 @@
}
},
{
"icon": "./assets/feather/x-circle.svg",
"id": "undo_dislike",
"name": "Undo dislike",
"disabled": true,
@ -377,6 +383,7 @@
}
},
{
"icon": "./assets/feather/share.svg",
"name": "Share",
"action": function () {
self.app.copyToClipboard(self.item.attributes.url)