From a30aaba1d3203378ddfd343c88ab4e54b09f22c9 Mon Sep 17 00:00:00 2001
From: DecibillyJoel <23534814+DecibillyJoel@users.noreply.github.com>
Date: Mon, 30 May 2022 22:01:41 -0400
Subject: [PATCH] app-mainMenu can be triggered by right click (#1093)

Currently you can't open the little Cider popup menu without first uncollapsing the sidebar. This is extremely an extremely unepic sussy amogus L gamer moment. This change allows you to right click to bypass uncollapsing the sidebar and get straight to the hot app-mainMenu action. I think Cider speedrunners will greatly appreciate this quality of life addition. Please consider accepting this PR (short for pull request) to improve the UX (short for user experience).
---
 src/renderer/main/vueapp.js               |   4 +-
 src/renderer/style.less                   |   4 +-
 src/renderer/views/app/app-navigation.ejs | 125 ++++++++++++++++++++++
 src/renderer/views/app/chrome-top.ejs     |  10 +-
 src/renderer/views/app/sidebar.ejs        | 125 ----------------------
 5 files changed, 136 insertions(+), 132 deletions(-)

diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 2ac1e6cf..2501414c 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -299,8 +299,8 @@ const app = new Vue({
         formatVolumeTooltip() {
             return this.cfg.audio.dBSPL ? (Number(this.cfg.audio.dBSPLcalibration) + (Math.log10(this.mk.volume) * 20)).toFixed(2) + ' dB SPL' : (Math.log10(this.mk.volume) * 20).toFixed(2) + ' dBFS'
         },
-        mainMenuVisibility(val) {
-            if(this.chrome.sidebarCollapsed) {
+        mainMenuVisibility(val, isContextMenu) {
+            if(this.chrome.sidebarCollapsed && !isContextMenu) {
                 this.chrome.sidebarCollapsed = false
                 return
             }
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 65df8494..61a10664 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -667,7 +667,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 #cmenu() {
   .container {
     position: absolute;
-    width: 100%;
+    left: 0px;
+    width: var(--sidebarWidth);
+    max-width: var(--sidebarWidth);
     padding: 10px;
     z-index: 1;
   }
diff --git a/src/renderer/views/app/app-navigation.ejs b/src/renderer/views/app/app-navigation.ejs
index 2f9a5bb2..e937bc99 100644
--- a/src/renderer/views/app/app-navigation.ejs
+++ b/src/renderer/views/app/app-navigation.ejs
@@ -1,4 +1,129 @@
 <div class="app-navigation" v-cloak>
+    <transition name="wpfade">
+      <div class="usermenu-container" v-if="chrome.menuOpened">
+        <div class="usermenu-body">
+          <button
+            class="app-sidebar-button"
+            style="width: 100%"
+            @click="appRoute('apple-account-settings')"
+          >
+            <img
+              class="sidebar-user-icon"
+              loading="lazy"
+              :src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"
+            />
+
+            <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
+              <template v-if="chrome.userinfo.id || mk.isAuthorized">
+                <div class="fullname text-overflow-elipsis">
+                  {{
+                    chrome.userinfo != null &&
+                    chrome.userinfo.attributes != null
+                      ? chrome.userinfo.attributes.name ?? ""
+                      : ""
+                  }}
+                </div>
+                <div class="handle-text text-overflow-elipsis">
+                  {{
+                    chrome.userinfo != null &&
+                    chrome.userinfo.attributes != null
+                      ? chrome.userinfo.attributes.handle ?? ""
+                      : ""
+                  }}
+                </div>
+              </template>
+              <template v-else>
+                <div @click="mk.authorize()">
+                  {{ $root.getLz("term.login") }}
+                </div>
+              </template>
+            </div>
+            <div class="sidebar-user-text" v-else>
+              {{ $root.getLz("app.name") }}
+            </div>
+          </button>
+          <!-- Use 20px SVG for usermenu icon -->
+          <button
+            class="usermenu-item"
+            v-if="cfg.general.privateEnabled"
+            @click="cfg.general.privateEnabled = false"
+          >
+            <span class="usermenu-item-icon">
+              <%- include("../svg/x.svg") %>
+            </span>
+            <span class="usermenu-item-name">{{
+              $root.getLz("term.disablePrivateSession")
+            }}</span>
+          </button>
+          <button class="usermenu-item" @click="appRoute('remote-pair')">
+            <span class="usermenu-item-icon">
+              <%- include("../svg/smartphone.svg") %>
+            </span>
+            <span class="usermenu-item-name">{{
+              $root.getLz("action.showWebRemoteQR")
+            }}</span>
+          </button>
+          <button
+            class="usermenu-item"
+            @click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
+          >
+            <span class="usermenu-item-icon">
+              <%- include("../svg/cast.svg") %>
+            </span>
+            <span class="usermenu-item-name">{{
+              $root.getLz("term.cast")
+            }}</span>
+          </button>
+          <button
+            class="usermenu-item"
+            @click="cfg.advanced.AudioContext ? modals.audioSettings = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
+          >
+            <span class="usermenu-item-icon">
+              <%- include("../svg/headphones.svg") %>
+            </span>
+            <span class="usermenu-item-name">{{
+              $root.getLz("term.audioSettings")
+            }}</span>
+          </button>
+          <button
+            class="usermenu-item"
+            v-if="pluginInstalled"
+            @click="modals.pluginMenu = true"
+          >
+            <span class="usermenu-item-icon">
+              <%- include("../svg/grid.svg") %>
+            </span>
+            <span class="usermenu-item-name">{{
+              $root.getLz("term.plugin")
+            }}</span>
+          </button>
+          <button class="usermenu-item" @click="appRoute('about')">
+            <span class="usermenu-item-icon">
+              <%- include("../svg/info.svg") %>
+            </span>
+            <span class="usermenu-item-name">{{
+              $root.getLz("term.about")
+            }}</span>
+          </button>
+          <button class="usermenu-item" @click="appRoute('settings')">
+            <span class="usermenu-item-icon">
+              <%- include("../svg/settings.svg") %>
+            </span>
+            <span class="usermenu-item-name">{{
+              $root.getLz("term.settings")
+            }}</span>
+          </button>
+          <button class="usermenu-item" @click="unauthorize()">
+            <span class="usermenu-item-icon" style="right: 2.5px">
+              <%- include("../svg/log-out.svg") %>
+            </span>
+            <span class="usermenu-item-name">{{
+              $root.getLz("term.logout")
+            }}</span>
+          </button>
+        </div>
+      </div>
+    </transition>
     <transition name="sidebartransition">
         <%- include("sidebar") %>
     </transition>
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 3138e44b..e9a80663 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -21,8 +21,9 @@
     <div class="app-chrome-item full-height" v-else>
       <button
         class="app-mainmenu"
-        @blur="mainMenuVisibility(false)"
-        @click="mainMenuVisibility(true)"
+        @blur="mainMenuVisibility(false, true)"
+        @click="mainMenuVisibility(true, false)"
+        @contextmenu="mainMenuVisibility(true, true)"
         :class="{active: chrome.menuOpened}"
         :aria-label="$root.getLz('term.quickNav')"
       ></button>
@@ -457,8 +458,9 @@
     >
       <button
         class="app-mainmenu"
-        @blur="mainMenuVisibility(false)"
-        @click="mainMenuVisibility(true)"
+        @blur="mainMenuVisibility(false, true)"
+        @click="mainMenuVisibility(true, false)"
+        @contextmenu="mainMenuVisibility(true, true)"
         :class="{active: chrome.menuOpened}"
       ></button>
     </div>
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
index f25539b9..97f4cc14 100644
--- a/src/renderer/views/app/sidebar.ejs
+++ b/src/renderer/views/app/sidebar.ejs
@@ -183,131 +183,6 @@
         </sidebar-playlist>
       </template>
     </div>
-    <transition name="wpfade">
-      <div class="usermenu-container" v-if="chrome.menuOpened">
-        <div class="usermenu-body">
-          <button
-            class="app-sidebar-button"
-            style="width: 100%"
-            @click="appRoute('apple-account-settings')"
-          >
-            <img
-              class="sidebar-user-icon"
-              loading="lazy"
-              :src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"
-            />
-
-            <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
-              <template v-if="chrome.userinfo.id || mk.isAuthorized">
-                <div class="fullname text-overflow-elipsis">
-                  {{
-                    chrome.userinfo != null &&
-                    chrome.userinfo.attributes != null
-                      ? chrome.userinfo.attributes.name ?? ""
-                      : ""
-                  }}
-                </div>
-                <div class="handle-text text-overflow-elipsis">
-                  {{
-                    chrome.userinfo != null &&
-                    chrome.userinfo.attributes != null
-                      ? chrome.userinfo.attributes.handle ?? ""
-                      : ""
-                  }}
-                </div>
-              </template>
-              <template v-else>
-                <div @click="mk.authorize()">
-                  {{ $root.getLz("term.login") }}
-                </div>
-              </template>
-            </div>
-            <div class="sidebar-user-text" v-else>
-              {{ $root.getLz("app.name") }}
-            </div>
-          </button>
-          <!-- Use 20px SVG for usermenu icon -->
-          <button
-            class="usermenu-item"
-            v-if="cfg.general.privateEnabled"
-            @click="cfg.general.privateEnabled = false"
-          >
-            <span class="usermenu-item-icon">
-              <%- include("../svg/x.svg") %>
-            </span>
-            <span class="usermenu-item-name">{{
-              $root.getLz("term.disablePrivateSession")
-            }}</span>
-          </button>
-          <button class="usermenu-item" @click="appRoute('remote-pair')">
-            <span class="usermenu-item-icon">
-              <%- include("../svg/smartphone.svg") %>
-            </span>
-            <span class="usermenu-item-name">{{
-              $root.getLz("action.showWebRemoteQR")
-            }}</span>
-          </button>
-          <button
-            class="usermenu-item"
-            @click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
-          >
-            <span class="usermenu-item-icon">
-              <%- include("../svg/cast.svg") %>
-            </span>
-            <span class="usermenu-item-name">{{
-              $root.getLz("term.cast")
-            }}</span>
-          </button>
-          <button
-            class="usermenu-item"
-            @click="cfg.advanced.AudioContext ? modals.audioSettings = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
-          >
-            <span class="usermenu-item-icon">
-              <%- include("../svg/headphones.svg") %>
-            </span>
-            <span class="usermenu-item-name">{{
-              $root.getLz("term.audioSettings")
-            }}</span>
-          </button>
-          <button
-            class="usermenu-item"
-            v-if="pluginInstalled"
-            @click="modals.pluginMenu = true"
-          >
-            <span class="usermenu-item-icon">
-              <%- include("../svg/grid.svg") %>
-            </span>
-            <span class="usermenu-item-name">{{
-              $root.getLz("term.plugin")
-            }}</span>
-          </button>
-          <button class="usermenu-item" @click="appRoute('about')">
-            <span class="usermenu-item-icon">
-              <%- include("../svg/info.svg") %>
-            </span>
-            <span class="usermenu-item-name">{{
-              $root.getLz("term.about")
-            }}</span>
-          </button>
-          <button class="usermenu-item" @click="appRoute('settings')">
-            <span class="usermenu-item-icon">
-              <%- include("../svg/settings.svg") %>
-            </span>
-            <span class="usermenu-item-name">{{
-              $root.getLz("term.settings")
-            }}</span>
-          </button>
-          <button class="usermenu-item" @click="unauthorize()">
-            <span class="usermenu-item-icon" style="right: 2.5px">
-              <%- include("../svg/log-out.svg") %>
-            </span>
-            <span class="usermenu-item-name">{{
-              $root.getLz("term.logout")
-            }}</span>
-          </button>
-        </div>
-      </div>
-    </transition>
     <div class="app-sidebar-footer collapseTab" v-if="cfg.advanced.experiments.includes('collapseSidebar')">
       <button @click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
         Collapse