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

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