okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

context menu now positions

Browse source
This commit is contained in:
booploops 2022-01-13 03:42:02 -08:00
parent b19834656a
commit c72fe6b7e1
4 changed files with 72 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/renderer/index.js
View file

@ -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);

3
src/renderer/style.less
View file

@ -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;

2
src/renderer/views/components/mediaitem-list-item.ejs
View file

@ -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)

100
src/renderer/views/components/menu-panel.ejs
View file

@ -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
}
}