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

context menu improvements

Browse source 
- fixed previous change for artists breaking some parts
- context menu direction class is now applied
- context menus no longer go offscreen
This commit is contained in:
booploops 2022-04-28 21:41:38 -07:00
parent d3c4c3fade
commit 0fbfb42385
3 changed files with 70 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<script type="text/x-template" id="cider-menu-panel">
<div class="menu-panel" @click.self="menuPanel.visible = false" @contextmenu.self="menuPanel.visible = false">
<div class="menu-panel-body" :style="getStyle()">
<div class="menu-panel-body" ref="menubody" :style="elStyle" :class="getBodyClasses()">
<div class="menu-header-text" v-if="content.name != ''">
<div class="row">
<div class="col">
@ -46,18 +46,32 @@
getSvgIcon: this.$root.getSvgIcon,
position: [0, 0],
size: [0, 0],
event: this.$root.menuPanel.event
event: this.$root.menuPanel.event,
direction: "down",
elStyle: {}
}
},
mounted() {
console.log("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];
// this.size = [document.querySelector(".menu-panel-body").offsetWidth, document.querySelector(".menu-panel-body").offsetHeight];
// ugly hack
setTimeout(this.getStyle, 1)
});
},
methods: {
getBodyClasses() {
if (this.direction == "down") {
return ["menu-panel-body-down"]
} else if (this.direction == "up") {
return ["menu-panel-body-up"]
} else {
return ["foo"]
}
},
getClasses(item) {
if (item["active"]) {
return "active";
@ -65,7 +79,8 @@
},
getStyle() {
let style = {}
console.debug(this.$refs.menubody)
this.size = [this.$refs.menubody.offsetWidth, this.$refs.menubody.offsetHeight];
if (this.event) {
style["position"] = "absolute";
style["left"] = this.event.clientX + "px";
@ -77,8 +92,21 @@
if (this.event.clientY + this.size[1] > window.innerHeight) {
style["top"] = (this.event.clientY - this.size[1]) + "px";
}
// if the panel is above the mouse, set the direction to up
if (this.event.clientY < this.size[1]) {
this.direction = "up";
} else {
this.direction = "down";
}
// check if the panel is too long and goes off the screen vertically,
// if so move it upwards
if (this.event.clientY + this.size[1] > window.innerHeight) {
style["top"] = (this.event.clientY - this.size[1]) + "px";
}
}
return style
this.elStyle = style;
},
getItemStyle(item) {
let style = {}