From 7629cbf5caa0a140746b7f8f0625b19afb2d67b1 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Wed, 15 Dec 2021 01:17:03 -0800 Subject: [PATCH] base for future context menu --- resources/cider-ui/index.js | 78 ++++++++++++-- resources/cider-ui/style.less | 102 +++++++----------- .../views/components/mediaitem-list-item.ejs | 1 + 3 files changed, 110 insertions(+), 71 deletions(-) diff --git a/resources/cider-ui/index.js b/resources/cider-ui/index.js index 270c8816..c64cfdcb 100644 --- a/resources/cider-ui/index.js +++ b/resources/cider-ui/index.js @@ -13,6 +13,77 @@ Vue.component('lyrics-view', { methods: {} }); +// This is going to suck to code +var CiderContextMenus = { + mediaitem: function (mediaitem) { + this.items = [ + { + "name": "Add to Library", + "action": function(song) { + console.log("Adding song to library"); + console.log(mediaitem.attributes.name) + } + }, + { + "name": "Add to Playlist", + "action": function(song) { + console.log("Adding song to playlist"); + } + }, + { + "name": "Add to Queue", + "action": function(song) { + console.log("Adding song to queue"); + } + } + ] + } +} +var CiderContextMenu = { + Menu: function (event) { + this.items = [] + }, + Create(event, menudata) { + var menuBackground = document.createElement("div"); + var menu = document.createElement("div"); + menu.classList.add("context-menu-body"); + menuBackground.classList.add("context-menu"); + menu.style.left = event.clientX + "px"; + menu.style.top = event.clientY + "px"; + menu.style.position = "absolute"; + menu.style.zIndex = "99909"; + menu.style.minWidth = "120px" + + // when menubackground is clicked, remove it + menuBackground.addEventListener("click", function () { + menuBackground.remove(); + menu.remove(); + }); + + // add menu to menuBackground + menuBackground.appendChild(menu); + + document.body.appendChild(menuBackground); + // for each item in menudata create a menu item + for (var i = 0; i < menudata.items.length; i++) { + var item = document.createElement("button") + item.tabIndex = 0 + item.classList.add("context-menu-item") + item.innerHTML = menudata.items[i].name + item.onclick = menudata.items[i].action + menu.appendChild(item) + } + // if menu would be off the screen, move it into view + if (event.clientX + menu.offsetWidth > window.innerWidth) { + menu.style.left = (window.innerWidth - menu.offsetWidth) + "px"; + } + if (event.clientY + menu.offsetHeight > window.innerHeight) { + menu.style.top = (window.innerHeight - menu.offsetHeight) + "px"; + } + return menuBackground; + } +} + const MusicKitTools = { getHeader() { @@ -189,11 +260,7 @@ const app = new Vue({ this.mk.authorize() this.$forceUpdate() this.mk.privateEnabled = true - try { - this.platform = ipcRenderer.sendSync('cider-platform'); - }catch(e){ - this.platform = "dev" - } + // this.platform = ipcRenderer.sendSync('cider-platform'); // Set profile name this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "") // API Fallback @@ -1684,7 +1751,6 @@ const app = new Vue({ } } }) - // Hang Timer app.hangtimer = setTimeout(()=>{ if(confirm("Cider is not responding. Reload the app?")) { diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less index a1f7c8d0..e6d81a26 100644 --- a/resources/cider-ui/style.less +++ b/resources/cider-ui/style.less @@ -427,6 +427,43 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } } +.context-menu { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.0); + z-index: 100; + + .context-menu-item { + background: transparent; + display: block; + width: 100%; + text-align: left; + color: #eee; + font-family: inherit; + font-size: 15px; + padding: 8px 12px; + border: 0px; + appearance: none; + border-radius: 6px; + margin: 2px 0px; + + &:hover { + background: var(--keyColor); + cursor: pointer; + } + } + + .context-menu-body { + background: #242424; + padding: 6px; + border-radius: 6px; + box-shadow: var(--mediaItemShadow-Shadow); + } +} + .app-sidebar-content::-webkit-scrollbar { display: none; @@ -1277,71 +1314,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { background: var(--keyColor); } -.context-menu { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - z-index: 100; -} - -.context-menu .context-menu-item { - --borderRadius: 10px; - appearance: none; - width: 100%; - display: block; - font-size: 1.10em; - padding: 18px 20px; - font-family: inherit; - border: 0px; - font-weight: 600; - border-radius: 0px; - border-bottom: 1px solid rgb(200 200 200 / 15%); - margin: 0px; - background: rgb(60 60 60 / 80%); - backdrop-filter: blur(16px) saturate(180%); - -webkit-backdrop-filter: blur(16px) saturate(180%); - color: #ccc; -} - -.context-menu .context-menu-item:hover { - cursor: pointer; -} - -.context-menu .context-menu-item:active { - filter: brightness(75%); -} - -.context-menu .context-menu-item:first-child { - border-radius: 0px; - border-top-left-radius: var(--borderRadius); - border-top-right-radius: var(--borderRadius); -} - -.context-menu .context-menu-item:last-child { - border-radius: 0px; - border-bottom-left-radius: var(--borderRadius); - border-bottom-right-radius: var(--borderRadius); - border-bottom: 0px; -} - -.context-menu .context-menu-item:only-child { - border-radius: var(--borderRadius); -} - -.context-menu .context-menu-item.context-menu-item--left { - text-align: left; -} - -.context-menu .context-menu-body { - display: flex; - align-items: flex-end; - justify-content: flex-end; - flex-direction: column; -} - .lyric-body { -webkit-mask-image: -webkit-gradient(linear, left 95%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); overflow-y: scroll; diff --git a/resources/cider-ui/views/components/mediaitem-list-item.ejs b/resources/cider-ui/views/components/mediaitem-list-item.ejs index fd48f426..dca7f4fd 100644 --- a/resources/cider-ui/views/components/mediaitem-list-item.ejs +++ b/resources/cider-ui/views/components/mediaitem-list-item.ejs @@ -1,6 +1,7 @@