From 1e6ccfb8317f33c965173a606b2c2aeb65dcf559 Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Fri, 23 Mar 2018 18:33:51 +0100
Subject: [PATCH] jogmenu e selezioni assi

---
 .../assets/styles/base/plc-softkeys.less      | 62 +++++++++++++++++--
 Step/wwwroot/assets/styles/style.css          | 56 +++++++++++++++++
 .../src/modules/under-the-hood/jog-menu.vue   | 39 +++++++++---
 3 files changed, 141 insertions(+), 16 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/plc-softkeys.less b/Step/wwwroot/assets/styles/base/plc-softkeys.less
index 4573add7..17689cf2 100644
--- a/Step/wwwroot/assets/styles/base/plc-softkeys.less
+++ b/Step/wwwroot/assets/styles/base/plc-softkeys.less
@@ -247,12 +247,11 @@
         height: 48px;
         margin: 4px;
     }
-
-    div{
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-wrap: wrap;
+    div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-wrap: wrap;
     }
 }
 
@@ -275,4 +274,55 @@
         font-family: 'fontawesome';
         font-size: 38px;
     }
+    .axes-menu-container,
+    .incr-menu-container {
+        width: 360px;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        z-index: 100;
+        transform: translateZ(0);
+        .menu {
+            background-color: #4b4b4b;
+            padding: 7px;
+            button {
+                background-image: linear-gradient(to bottom, #5f676b, #4e585e);
+                min-width: 48px;
+                height: 48px;
+                margin: 0.5px;
+                font-size: 20px;
+                color: #fff;
+                border: none;
+                &.active,
+                &:active {
+                    background-image: none;
+                    background-color: #1791ff;
+                }
+            }
+        }
+        &:before {
+            content: "\f0d8";
+            color: #4b4b4b;
+            position: absolute;
+            left: 46px;
+            top: -26px;
+            font-family: 'fontawesome';
+            font-size: 38px;
+        }
+    }
+    .incr-menu-container {
+        top: 75px;
+        left: 340px;
+        &:before{
+          left: 164px;
+        }
+    }
+    .axes-menu-container {
+        top: 75px;
+        left: 0;
+        justify-content: left;
+        &:before{
+          left: 46px;
+        }
+    }
 }
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index dba9ed96..ff483acd 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -1716,6 +1716,62 @@ footer .container button.big:before {
   font-family: 'fontawesome';
   font-size: 38px;
 }
+.jog-menu .axes-menu-container,
+.jog-menu .incr-menu-container {
+  width: 360px;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  z-index: 100;
+  transform: translateZ(0);
+}
+.jog-menu .axes-menu-container .menu,
+.jog-menu .incr-menu-container .menu {
+  background-color: #4b4b4b;
+  padding: 7px;
+}
+.jog-menu .axes-menu-container .menu button,
+.jog-menu .incr-menu-container .menu button {
+  background-image: linear-gradient(to bottom, #5f676b, #4e585e);
+  min-width: 48px;
+  height: 48px;
+  margin: 0.5px;
+  font-size: 20px;
+  color: #fff;
+  border: none;
+}
+.jog-menu .axes-menu-container .menu button.active,
+.jog-menu .incr-menu-container .menu button.active,
+.jog-menu .axes-menu-container .menu button:active,
+.jog-menu .incr-menu-container .menu button:active {
+  background-image: none;
+  background-color: #1791ff;
+}
+.jog-menu .axes-menu-container:before,
+.jog-menu .incr-menu-container:before {
+  content: "\f0d8";
+  color: #4b4b4b;
+  position: absolute;
+  left: 46px;
+  top: -26px;
+  font-family: 'fontawesome';
+  font-size: 38px;
+}
+.jog-menu .incr-menu-container {
+  top: 75px;
+  left: 340px;
+}
+.jog-menu .incr-menu-container:before {
+  left: 164px;
+}
+.jog-menu .axes-menu-container {
+  top: 75px;
+  left: 0;
+  justify-content: left;
+}
+.jog-menu .axes-menu-container:before {
+  left: 46px;
+}
 .keypad {
   width: 320px;
   height: 416px;
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 2f880771..a5505812 100644
--- a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
+++ b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
@@ -15,21 +15,42 @@
     <button @click="toggleIncr()"  :class="{active:showIncrMenu}" class="soft spaced">{{"jog_menu_inc" | localize("Inc.")}}</button>
 
     <button @click="ncClick(20)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , inverted:isReadOnly(10)}" class="soft spaced">{{"jog_menu_inc_plane" | localize("Inc Plane")}}</button>
+
+    <div class="axes-menu-container" v-if="showAxesMenu">
+      <div class="menu">
+        <button @click="setAxes(24)">X</button>
+        <button @click="setAxes(24)">Y</button>
+        <button @click="setAxes(24)">Z</button>
+        <button @click="setAxes(24)">A</button>
+      </div>
+    </div>
+
+    <div class="incr-menu-container" v-if="showIncrMenu">
+      <div class="menu">
+        <button @click="ncClick(24)">{{"jog_menu_incr_x1" | localize("1")}}</button>
+        <button @click="ncClick(25)">{{"jog_menu_incr_x10" | localize("10")}}</button>
+        <button @click="ncClick(26)">{{"jog_menu_incr_x100" | localize("100")}}</button>
+        <button @click="ncClick(27)">{{"jog_menu_incr_x1000" | localize("1000")}}</button>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { Hub } from "src/services/hub";
 export default {
-  data: function(){
+  data: function() {
     return {
       showIncrMenu: false,
-      showAxesMenu: false,
-    }
+      showAxesMenu: false
+    };
   },
 
-  methods:{
-
-   ncClick(id) {
+  methods: {
+    setAxes(id) {
+      this.showIncrMenu = false;
+      this.showAxesMenu = false;
+    },
+    ncClick(id) {
       Hub.Current.ncSoftKeyClick(id);
       this.showIncrMenu = false;
       this.showAxesMenu = false;
@@ -49,16 +70,14 @@ export default {
       if (r) return r.Value;
       return false;
     },
-    toggleAxes(){
+    toggleAxes() {
       this.showIncrMenu = false;
       this.showAxesMenu = !this.showAxesMenu;
     },
-    toggleIncr(){
+    toggleIncr() {
       this.showAxesMenu = false;
       this.showIncrMenu = !this.showIncrMenu;
     }
-
   }
-
 };
 </script>