incmenu container position

This commit is contained in:
Paolo Possanzini
2018-03-28 12:38:14 +02:00
parent 924636dfca
commit 682791b4c5
@@ -1,5 +1,5 @@
<template>
<div class="jog-menu">
<div class="jog-menu" ref="menu">
<button @click="toggleAxes()" :class="{active:showAxesMenu}" class="soft">{{"jog_menu_asse_x" | localize("Asse")}} {{getAxesName()}}</button>
<div class="btn-spacer">
<button @click="ncClick(23)" :disabled="!isKeyActive(23)" :class="{active:isKeySelected(23) , inverted:isReadOnly(23)}" class="soft square"><i class="fa fa-minus"></i></button>
@@ -7,7 +7,7 @@
<button @click="ncClick(22)" :disabled="!isKeyActive(22)" :class="{active:isKeySelected(22) , readonly:isReadOnly(22)}" class="soft square"><i class="fa fa-plus"></i></button>
</div>
<button @click="toggleIncr()" :class="{active:showIncrMenu}" class="soft spaced">{{"jog_menu_inc" | localize("Inc.")}}&nbsp;{{incLabel}}</button>
<button @click="toggleIncr()" ref="incbutton" :class="{active:showIncrMenu}" class="soft spaced">{{"jog_menu_inc" | localize("Inc.")}}&nbsp;{{incLabel}}</button>
<button @click="ncClick(21)" :disabled="!isKeyActive(21)" :class="{active:isKeySelected(21) , inverted:isReadOnly(21)}" class="soft spaced">{{"jog_menu_inc_plane" | localize("Inc Plane")}}</button>
@@ -20,8 +20,8 @@
</div>
</div>
<div class="incr-menu-container" v-if="showIncrMenu">
<div class="menu">
<div class="incr-menu-container" v-if="showIncrMenu" :style="{left: incMenuPosition}">
<div class="menu" ref="incmenu">
<button @click="ncClick(25)" :class="{active:isKeySelected(25)}">x{{"jog_menu_incr_x1" | localize("1")}}</button>
<button @click="ncClick(26)" :class="{active:isKeySelected(26)}">x{{"jog_menu_incr_x10" | localize("10")}}</button>
<button @click="ncClick(27)" :class="{active:isKeySelected(27)}">x{{"jog_menu_incr_x100" | localize("100")}}</button>
@@ -55,6 +55,11 @@ export default {
if(this.isKeySelected(27)) return "x100";
if(this.isKeySelected(28)) return "x1000";
return "";
},
incMenuPosition: function(){
// 180px è la metà della larghezza del contenitore .incr-menu-container configurata da css
// 50px è la metà della larghezza del bottone Inc comprensivo di margini.
return (this.$refs.incbutton.offsetLeft - 180 + 50).toString() + "px";
}
},
@@ -89,6 +94,8 @@ export default {
this.showAxesMenu = !this.showAxesMenu;
},
toggleIncr() {
console.log(this.$refs);
this.showAxesMenu = false;
this.showIncrMenu = !this.showIncrMenu;
},