context menu improvements

- fixed previous change for artists breaking some parts
- context menu direction class is now applied
- context menus no longer go offscreen

src/renderer/themes/sweetener.less

@@ -5,11 +5,18 @@
     .menu-panel-body {
         background-color: @panelColors;
         backdrop-filter : blur(32px) saturate(180%);
-        animation: menuIn .10s var(--appleEase);
+
+        &.menu-panel-body-down {
+            animation: menuInDown .10s var(--appleEase);
+        }
+
+        &.menu-panel-body-up {
+            animation: menuInUp .10s var(--appleEase);
+        }
+        
     }
 
-
+    @keyframes menuInUp {
-    @keyframes menuIn {
         0% {
             opacity   : 0;
             transform : translateY(-10px) translate3d(0,0,0);
@@ -23,6 +30,20 @@
         }
     }
 
+    @keyframes menuInDown {
+        0% {
+            opacity   : 0;
+            transform : translateY(10px) translate3d(0,0,0);
+            background: @panelColorsFallback;
+        }
+
+        100% {
+            opacity   : 1;
+            transform : translateY(0);
+            background: @panelColors;
+        }
+    }
+
 }
 
 

src/renderer/views/components/mediaitem-square.ejs

@@ -2,12 +2,12 @@
     <div tabindex="0" class="cd-mediaitem-square-container"
     @click.self="app.routeView(item)"
     @controller-click="app.routeView(item)"
-    @contextmenu.self="getContextMenu(item)"
+    @contextmenu.self="getContextMenu"
     v-observe-visibility="{callback: visibilityChanged}"
    >
     <div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
     <div style="{'--spcolor': getBgColor()}"
-         class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu(item)">
+         class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu">
         <template>           
             <div class="artwork-container">
                 <div class="unavailable-overlay" v-if="unavailable">
@@ -24,7 +24,7 @@
                             :type="item.type"></mediaitem-artwork>
                 </div>
                 <button class="menu-btn" v-if="!nomenu.includes(item.type)"
-                        @click="getContextMenu(item)"><%- include("../svg/more.svg") %></button>
+                        @click="getContextMenu"><%- include("../svg/more.svg") %></button>
                 <button class="play-btn" v-if="!noplay.includes(item.type)"
                         @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
                 <div class="badge-container" v-if="itemBadges.length != 0">
@@ -108,12 +108,11 @@
                 let color = `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : ``}`
                 return color
             },
-            getContextMenu(item) {
+            getContextMenu(event) {
-                console.log(item)
+                if (this.item.type == "artists") {
-                if (item.type == "artists") {
+                    return this.artistMenu(event)
-                    return this.artistMenu(item)
                 } else {
-                    return this.contextMenu(item)
+                    return this.contextMenu(event)
                 }
             },
             getSubtitle() {
@@ -509,6 +508,7 @@
                 }
             },
             async artistMenu (event) {
+                console.debug(this.item)
                 let self = this
                 let followAction = "follow"
                 let followActions = {
@@ -516,21 +516,21 @@
                         icon: "./assets/feather/plus-circle.svg",
                         name: app.getLz('action.follow'),
                         action: ()=>{
-                            self.app.cfg.home.followedArtists.push(event.id)
+                            self.app.cfg.home.followedArtists.push(this.item.id)
                         }
                     },
                     unfollow: {
                         icon: "./assets/feather/x-circle.svg",
                         name: app.getLz('action.unfollow'),
                         action: ()=>{
-                            let index = self.app.cfg.home.followedArtists.indexOf(event.id)
+                            let index = self.app.cfg.home.followedArtists.indexOf(this.item.id)
                             if (index > -1) {
                                 self.app.cfg.home.followedArtists.splice(index, 1)
                             }
                         }
                     }
                 }
-                if(self.app.cfg.home.followedArtists.includes(event.id)) {
+                if(self.app.cfg.home.followedArtists.includes(this.item.id)) {
                     followAction = "unfollow"
                 }
                 app.showMenuPanel({
@@ -539,7 +539,7 @@
                             icon: "./assets/feather/play.svg",
                             name: app.getLz('action.startRadio'),
                             action: ()=>{
-                                app.mk.setStationQueue({artist:event.id}).then(()=>{
+                                app.mk.setStationQueue({artist:this.item.id}).then(()=>{
                                     app.mk.play()
                                 })
                             }
@@ -549,7 +549,7 @@
                             icon: "./assets/feather/share.svg",
                             name: app.getLz('term.share'),
                             action: ()=>{
-                                self.app.copyToClipboard(event.attributes.url)
+                                self.app.copyToClipboard(this.item.id.attributes.url)
                             }
                         },
                         {

src/renderer/views/components/menu-panel.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="cider-menu-panel">
     <div class="menu-panel" @click.self="menuPanel.visible = false" @contextmenu.self="menuPanel.visible = false">
 
-        <div class="menu-panel-body" :style="getStyle()">
+        <div class="menu-panel-body" ref="menubody" :style="elStyle" :class="getBodyClasses()">
             <div class="menu-header-text" v-if="content.name != ''">
                 <div class="row">
                     <div class="col">
@@ -46,18 +46,32 @@
                 getSvgIcon: this.$root.getSvgIcon,
                 position: [0, 0],
                 size: [0, 0],
-                event: this.$root.menuPanel.event
+                event: this.$root.menuPanel.event,
+                direction: "down",
+                elStyle: {}
             }
         },
         mounted() {
+            console.log("MOUNTED")
             if (this.event) {
                 this.position = [this.event.clientX, this.event.clientY];
             }
             this.$nextTick(() => {
-                this.size = [document.querySelector(".menu-panel-body").offsetWidth, document.querySelector(".menu-panel-body").offsetHeight];
+                // this.size = [document.querySelector(".menu-panel-body").offsetWidth, document.querySelector(".menu-panel-body").offsetHeight];
+                // ugly hack
+                setTimeout(this.getStyle, 1)
             });
         },
         methods: {
+            getBodyClasses() {
+                if (this.direction == "down") {
+                    return ["menu-panel-body-down"]
+                } else if (this.direction == "up") {
+                    return ["menu-panel-body-up"]
+                } else {
+                    return ["foo"]
+                }
+            },
             getClasses(item) {
                 if (item["active"]) {
                     return "active";
@@ -65,7 +79,8 @@
             },
             getStyle() {
                 let style = {}
-
+                console.debug(this.$refs.menubody)
+                this.size = [this.$refs.menubody.offsetWidth, this.$refs.menubody.offsetHeight];
                 if (this.event) {
                     style["position"] = "absolute";
                     style["left"] = this.event.clientX + "px";
@@ -77,8 +92,21 @@
                     if (this.event.clientY + this.size[1] > window.innerHeight) {
                         style["top"] = (this.event.clientY - this.size[1]) + "px";
                     }
+
+
+                    // if the panel is above the mouse, set the direction to up
+                    if (this.event.clientY < this.size[1]) {
+                        this.direction = "up";
+                    } else {
+                        this.direction = "down";
+                    }
+                    // check if the panel is too long and goes off the screen vertically,
+                    // if so move it upwards
+                    if (this.event.clientY + this.size[1] > window.innerHeight) {
+                        style["top"] = (this.event.clientY - this.size[1]) + "px";
+                    }
                 }
-                return style
+                this.elStyle = style;
             },
             getItemStyle(item) {
                 let style = {}