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).
This commit is contained in:
DecibillyJoel
GitHub
parent
4ea6f1a64b
commit
a30aaba1d3
5 changed files with 136 additions and 132 deletions
|
|
@ -299,8 +299,8 @@ const app = new Vue({
|
||||||
formatVolumeTooltip() {
|
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'
|
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) {
|
mainMenuVisibility(val, isContextMenu) {
|
||||||
if(this.chrome.sidebarCollapsed) {
|
if(this.chrome.sidebarCollapsed && !isContextMenu) {
|
||||||
this.chrome.sidebarCollapsed = false
|
this.chrome.sidebarCollapsed = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -667,7 +667,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
||||||
#cmenu() {
|
#cmenu() {
|
||||||
.container {
|
.container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
left: 0px;
|
||||||
|
width: var(--sidebarWidth);
|
||||||
|
max-width: var(--sidebarWidth);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,129 @@
|
||||||
<div class="app-navigation" v-cloak>
|
<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">
|
<transition name="sidebartransition">
|
||||||
<%- include("sidebar") %>
|
<%- include("sidebar") %>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
|
||||||
|
|
@ -21,8 +21,9 @@
|
||||||
<div class="app-chrome-item full-height" v-else>
|
<div class="app-chrome-item full-height" v-else>
|
||||||
<button
|
<button
|
||||||
class="app-mainmenu"
|
class="app-mainmenu"
|
||||||
@blur="mainMenuVisibility(false)"
|
@blur="mainMenuVisibility(false, true)"
|
||||||
@click="mainMenuVisibility(true)"
|
@click="mainMenuVisibility(true, false)"
|
||||||
|
@contextmenu="mainMenuVisibility(true, true)"
|
||||||
:class="{active: chrome.menuOpened}"
|
:class="{active: chrome.menuOpened}"
|
||||||
:aria-label="$root.getLz('term.quickNav')"
|
:aria-label="$root.getLz('term.quickNav')"
|
||||||
></button>
|
></button>
|
||||||
|
|
@ -457,8 +458,9 @@
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="app-mainmenu"
|
class="app-mainmenu"
|
||||||
@blur="mainMenuVisibility(false)"
|
@blur="mainMenuVisibility(false, true)"
|
||||||
@click="mainMenuVisibility(true)"
|
@click="mainMenuVisibility(true, false)"
|
||||||
|
@contextmenu="mainMenuVisibility(true, true)"
|
||||||
:class="{active: chrome.menuOpened}"
|
:class="{active: chrome.menuOpened}"
|
||||||
></button>
|
></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -183,131 +183,6 @@
|
||||||
</sidebar-playlist>
|
</sidebar-playlist>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</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')">
|
<div class="app-sidebar-footer collapseTab" v-if="cfg.advanced.experiments.includes('collapseSidebar')">
|
||||||
<button @click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
|
<button @click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
|
||||||
Collapse
|
Collapse
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue