From c72fe6b7e18d08e3fc303090aeb901af74a5fdee Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 13 Jan 2022 03:42:02 -0800
Subject: [PATCH] context menu now positions

---
 src/renderer/index.js                         |   6 +-
 src/renderer/style.less                       |   3 +-
 .../views/components/mediaitem-list-item.ejs  |   2 +-
 src/renderer/views/components/menu-panel.ejs  | 100 ++++++++++++------
 4 files changed, 72 insertions(+), 39 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index 9a9c143f..88ecfeff 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -294,6 +294,7 @@ const app = new Vue({
         },
         menuPanel: {
             visible: false,
+            event: null,
             content: {
                 name: "",
                 items: {},
@@ -338,11 +339,14 @@ const app = new Vue({
             }
             app.routeView(item)
         },
-        async showMenuPanel(data) {
+        async showMenuPanel(data, event) {
             app.menuPanel.visible = true;
             app.menuPanel.content.name = data.name ?? "";
             app.menuPanel.content.items = data.items ?? {};
             app.menuPanel.content.headerItems = data.headerItems ?? {};
+            if(event) {
+                app.menuPanel.event = event;
+            }
         },
         async getSvgIcon(url) {
             let response = await fetch(url);
diff --git a/src/renderer/style.less b/src/renderer/style.less
index fbc5ea64..9809c33e 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2806,7 +2806,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   top: 0;
   left: 0;
   z-index: 100;
-  background: rgb(0 0 0 / 32%);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -2857,7 +2856,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       text-align: left;
       display: flex;
       width: 100%;
-      padding: 16px;
+      padding: 12px 16px;
       appearance: none;
       border: 0px;
       font: inherit;
diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index 93f804ec..d7b39fa7 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -370,7 +370,7 @@
                         menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
                     }
                 }
-                app.showMenuPanel(menus[useMenu])
+                app.showMenuPanel(menus[useMenu], event)
 
                 try{
                 let rating = await app.getRating(self.item)
diff --git a/src/renderer/views/components/menu-panel.ejs b/src/renderer/views/components/menu-panel.ejs
index 66abe245..ede5836d 100644
--- a/src/renderer/views/components/menu-panel.ejs
+++ b/src/renderer/views/components/menu-panel.ejs
@@ -1,34 +1,36 @@
 <script type="text/x-template" id="cider-menu-panel">
-    <div class="menu-panel" @click.self="menuPanel.visible = false" >
+    <div class="menu-panel" @click.self="menuPanel.visible = false">
 
-    <div class="menu-panel-body">
-        <div class="menu-header-text" v-if="content.name != ''">
-            <div class="row">
-                <div class="col">
-                    <h3 class="queue-header-text">{{ content.name }}</h3>
+        <div class="menu-panel-body" :style="getStyle()">
+            <div class="menu-header-text" v-if="content.name != ''">
+                <div class="row">
+                    <div class="col">
+                        <h3 class="queue-header-text">{{ content.name }}</h3>
+                    </div>
                 </div>
             </div>
+            <div class="menu-header-body" v-if="Object.keys(content.headerItems).length != 0">
+                <template v-for="item in content.headerItems">
+                    <button class="menu-option-header" :class="getClasses(item)" :title="item.name"
+                            v-if="canDisplay(item)" :style="getItemStyle(item)" @click="action(item)">
+                        <div class="sidebar-icon" style="margin: 0;" v-if="item.icon">
+                            <div class="svg-icon" :style="{'--url': 'url(' + item.icon + ')'}"></div>
+                        </div>
+                    </button>
+                </template>
+            </div>
+            <div class="menu-body">
+                <template v-for="item in content.items">
+                    <button class="menu-option" v-if="canDisplay(item)" :style="getItemStyle(item)"
+                            @click="action(item)">
+                        <div class="sidebar-icon" v-if="item.icon">
+                            <div class="svg-icon" :style="{'--url': 'url(' + item.icon + ')'}"></div>
+                        </div>
+                        {{ item.name }}
+                    </button>
+                </template>
+            </div>
         </div>
-        <div class="menu-header-body" v-if="Object.keys(content.headerItems).length != 0">
-            <template v-for="item in content.headerItems">
-                <button class="menu-option-header" :class="getClasses(item)" :title="item.name" v-if="canDisplay(item)" :style="getStyle(item)" @click="action(item)">
-                    <div class="sidebar-icon" style="margin: 0;" v-if="item.icon">
-                        <div class="svg-icon" :style="{'--url': 'url(' + item.icon + ')'}"></div>
-                    </div>
-                </button>
-            </template>
-        </div>
-        <div class="menu-body">
-            <template v-for="item in content.items">
-                <button class="menu-option" v-if="canDisplay(item)" :style="getStyle(item)" @click="action(item)">
-                    <div class="sidebar-icon" v-if="item.icon">
-                        <div class="svg-icon" :style="{'--url': 'url(' + item.icon + ')'}"></div>
-                    </div>
-                    {{ item.name }}
-                </button>
-            </template>
-        </div>
-    </div>
     </div>
 </script>
 
@@ -42,28 +44,56 @@
                 menuPanel: this.$root.menuPanel,
                 content: this.$root.menuPanel.content,
                 getSvgIcon: this.$root.getSvgIcon,
+                position: [0, 0],
+                size: [0, 0],
+                event: this.$root.menuPanel.event
             }
         },
         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];
+            });
         },
         methods: {
             getClasses(item) {
-                if(item["active"]) {
+                if (item["active"]) {
                     return "active";
                 }
             },
-            getStyle(item) {
-                if(item["disabled"]) {
-                    return {
-                        "pointer-events": "none",
-                        "opacity": "0.5",
+            getStyle() {
+                let style = {}
+
+                if (this.event) {
+                    style["position"] = "absolute";
+                    style["left"] = this.event.clientX + "px";
+                    style["top"] = this.event.clientY + "px";
+                    // make sure the menu panel isnt off the screen
+                    if (this.event.clientX + this.size[0] > window.innerWidth) {
+                        style["left"] = (window.innerWidth - this.size[0]) + "px";
+                    }
+                    if (this.event.clientY + this.size[1] > window.innerHeight) {
+                        style["top"] = (window.innerHeight - this.size[1]) + "px";
                     }
                 }
+                return style
+            },
+            getItemStyle(item) {
+                let style = {}
+                if (item["disabled"]) {
+                    style = Object.assign(style, {
+                        "pointer-events": "none",
+                        "opacity": "0.5",
+                    });
+                }
+                return style
             },
             canDisplay(item) {
-                if(!item["hidden"]) {
+                if (!item["hidden"]) {
                     return true
-                }else{
+                } else {
                     return false
                 }
             },
@@ -72,7 +102,7 @@
             },
             action(item) {
                 item.action()
-                if(!item["keepOpen"]) {
+                if (!item["keepOpen"]) {
                     this.menuPanel.visible = false
                 }
             }