fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

fix(UI): contextual sub-menu alignment when close to the lower edge of the window

Browse Source
This commit is contained in:
Fabio Di Stasio
2021-07-03 12:01:19 +02:00
parent d96907ca2d
commit 61a42d51f5
1 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/renderer/components/BaseContextMenu.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="context"> <div class="context" :class="{'bottom': isBottom}">
<a <a
class="context-overlay" class="context-overlay"
@click="close" @click="close"
@ -23,18 +23,21 @@ export default {
}, },
data () { data () {
return { return {
contextSize: null contextSize: null,
isBottom: false
}; };
}, },
computed: { computed: {
position () { position () {
const { clientY, clientX } = this.contextEvent; const { clientY, clientX } = this.contextEvent;
let topCord = `${clientY + 5}px`; let topCord = `${clientY + 2}px`;
let leftCord = `${clientX + 5}px`; let leftCord = `${clientX + 5}px`;
if (this.contextSize) { if (this.contextSize) {
if (clientY + this.contextSize.height + 5 >= window.innerHeight) if (clientY + (this.contextSize.height < 200 ? 200 : this.contextSize.height) + 5 >= window.innerHeight) {
topCord = `${clientY - this.contextSize.height}px`; topCord = `${clientY + 3 - this.contextSize.height}px`;
this.isBottom = true;
}
if (clientX + this.contextSize.width + 5 >= window.innerWidth) if (clientX + this.contextSize.width + 5 >= window.innerWidth)
leftCord = `${clientX - this.contextSize.width}px`; leftCord = `${clientX - this.contextSize.width}px`;
@ -83,6 +86,14 @@ export default {
left: 0; left: 0;
bottom: 0; bottom: 0;
&:not(.bottom) .context-submenu {
top: -0.2rem;
}
&.bottom .context-submenu {
bottom: -0.2rem;
}
.context-container { .context-container {
min-width: 100px; min-width: 100px;
z-index: 10; z-index: 10;
@ -114,8 +125,8 @@ export default {
transition: opacity 0.2s; transition: opacity 0.2s;
position: absolute; position: absolute;
left: 100%; left: 100%;
top: -0.2rem;
min-width: 100px; min-width: 100px;
background: #1d1d1d;
} }
&:hover { &:hover {