diff --git a/resources/cider-ui/index.js b/resources/cider-ui/index.js index 826f99b1..43fca5a3 100644 --- a/resources/cider-ui/index.js +++ b/resources/cider-ui/index.js @@ -14,31 +14,6 @@ Vue.component('lyrics-view', { }); // 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 = [] @@ -48,11 +23,10 @@ var CiderContextMenu = { 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.left = 0 + "px"; + menu.style.top = 0 + "px"; menu.style.position = "absolute"; menu.style.zIndex = "99909"; - menu.style.minWidth = "120px" // when menubackground is clicked, remove it menuBackground.addEventListener("click", function () { @@ -64,6 +38,8 @@ var CiderContextMenu = { 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") @@ -73,13 +49,17 @@ var CiderContextMenu = { 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.width = (menu.offsetWidth + 10) + "px"; + menu.style.left = event.clientX + "px"; + menu.style.top = event.clientY + "px"; + // if menu would be off the screen, move it into view, but preserve the width + if (menu.offsetLeft + menu.offsetWidth > window.innerWidth) { menu.style.left = (window.innerWidth - menu.offsetWidth) + "px"; } - if (event.clientY + menu.offsetHeight > window.innerHeight) { + if (menu.offsetTop + menu.offsetHeight > window.innerHeight) { menu.style.top = (window.innerHeight - menu.offsetHeight) + "px"; } + return menuBackground; } } diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less index 02fd1fbd..09af4fbe 100644 --- a/resources/cider-ui/style.less +++ b/resources/cider-ui/style.less @@ -1631,20 +1631,26 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { padding: 0px; .artist-header { - background: var(--keyColor); + background: linear-gradient(45deg, var(--keyColor), #0e0e0e); color: white; display: flex; align-items: center; justify-content: space-between; - min-height: 300px; + min-height: 400px; position: relative; - .col.flex-center.artist-animation-on { - width: 100%; - display: block; - flex: unset; - margin-left: 2.3em; - color: whitesmoke; + .artist-more { + border-radius: 100%; + background: var(--keyColor); + box-shadow: var(--mediaItemShadow-Shadow); + width: 36px; + height: 36px; + position: absolute; + bottom: 26px; + right: 32px; + border: 0px; + cursor: pointer; + z-index: 5; } .animated { @@ -1676,6 +1682,60 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { width: 200px; height: 200px; margin: 32px; + position: relative; + .overlay-play { + position: absolute; + top:0; + left:0; + width:100%; + height:100%; + opacity:0; + background: rgb(0 0 0 / 50%); + transition: opacity 0.1s var(--appleEase); + border-radius: 100%; + z-index:1; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + appearance: none; + border:0px; + padding:0px; + &:hover { + opacity:1; + } + >svg { + width: 70%; + } + } + } + + .artist-title { + .artist-play { + width: 36px; + height: 36px; + background: var(--keyColor); + border-radius: 100%; + margin: 14px; + box-shadow: var(--mediaItemShadow); + display: none; + cursor: pointer; + appearance: none; + border:0px; + padding:0px; + transform: translateY(3px); + } + &.artist-animation-on { + width: 100%; + flex: unset; + margin-left: 0.5em; + color: whitesmoke; + position: absolute; + bottom: 0; + .artist-play { + display: block; + } + } } .artist-body { diff --git a/resources/cider-ui/views/components/mediaitem-list-item.ejs b/resources/cider-ui/views/components/mediaitem-list-item.ejs index 46c4d7ba..9ee921df 100644 --- a/resources/cider-ui/views/components/mediaitem-list-item.ejs +++ b/resources/cider-ui/views/components/mediaitem-list-item.ejs @@ -1,7 +1,7 @@