From 682791b4c5b9f3e77930c4e04d3cbd12cf9015eb Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Wed, 28 Mar 2018 12:38:14 +0200
Subject: [PATCH] incmenu container position

---
 .../src/modules/under-the-hood/jog-menu.vue       | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
index 1f1af314..534ee939 100644
--- a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
+++ b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
@@ -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;
     },