mirror of https://github.com/Lissy93/dashy.git
Ensure context menu doesn't clip off the screen
This commit is contained in:
parent
fe0d2d5b55
commit
8ee7847648
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<transition name="slide">
|
<transition name="slide">
|
||||||
<div class="context-menu" v-if="show && !isMenuDisabled"
|
<div class="context-menu" v-if="show && !isMenuDisabled"
|
||||||
:style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''">
|
:style="posX && posY ? calcPosition() : ''">
|
||||||
<!-- Open Options -->
|
<!-- Open Options -->
|
||||||
<ul class="menu-section">
|
<ul class="menu-section">
|
||||||
<li @click="openSection()">
|
<li @click="openSection()">
|
||||||
|
@ -59,6 +59,13 @@ export default {
|
||||||
removeSection() {
|
removeSection() {
|
||||||
this.$emit('removeSection');
|
this.$emit('removeSection');
|
||||||
},
|
},
|
||||||
|
calcPosition() {
|
||||||
|
const bounds = this.$parent.$el.getBoundingClientRect();
|
||||||
|
const left = this.posX < (bounds.right + bounds.left) / 2;
|
||||||
|
const position = `top:${this.posY}px;${left ? 'left' : 'right'}:\
|
||||||
|
${left ? this.posX : document.documentElement.clientWidth - this.posX}px;`;
|
||||||
|
return position;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue