From aaaa8f8462f479219a10249f87f8a1af3018f3eb Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Tue, 13 Nov 2018 15:08:06 +0100
Subject: [PATCH] Fix modal-call inside project & added new layer of modals
 called "modal-nc" that you can see the Header layer

---
 Step/wwwroot/assets/styles/base/alarms.less   |  6 +--
 Step/wwwroot/assets/styles/base/header.less   |  6 +--
 Step/wwwroot/assets/styles/base/modals.less   |  4 ++
 Step/wwwroot/assets/styles/style.css          | 16 ++----
 Step/wwwroot/src/App.vue                      | 43 ++++++++-------
 Step/wwwroot/src/app.business-logic.ts        | 33 ++++++++++--
 .../alarms/components/alarms-list.ts          |  2 +-
 .../alarms/components/alarms-list.vue         |  4 +-
 Step/wwwroot/src/components/maintenance.ts    |  2 +-
 Step/wwwroot/src/components/production.ts     |  2 +-
 Step/wwwroot/src/components/test-status.ts    |  2 +-
 .../src/components/tooling/tooling-depot.ts   | 10 ++--
 .../components/tooling/tooling-equipment.ts   | 10 ++--
 .../components/tooling/tooling-families.ts    | 10 ++--
 .../src/components/tooling/tooling-magpos.ts  | 10 ++--
 .../src/components/tooling/tooling-shanks.ts  | 10 ++--
 .../wwwroot/src/components/tooling/tooling.ts | 10 ++--
 Step/wwwroot/src/components/utilities.ts      |  2 +-
 Step/wwwroot/src/modules/app-header.ts        |  2 +-
 Step/wwwroot/src/modules/app-header.vue       |  4 +-
 .../modules/base-components/ModalHelper.ts    | 10 +++-
 .../src/modules/base-components/index.js      |  2 +
 .../base-components/modal-nc-container.ts     | 53 +++++++++++++++++++
 .../base-components/modal-nc-container.vue    | 10 ++++
 .../src/modules/base-components/user-info.ts  |  2 +-
 .../src/modules/base-components/user-info.vue |  5 +-
 Step/wwwroot/src/services/hub.ts              |  2 +-
 27 files changed, 183 insertions(+), 89 deletions(-)
 create mode 100644 Step/wwwroot/src/modules/base-components/modal-nc-container.ts
 create mode 100644 Step/wwwroot/src/modules/base-components/modal-nc-container.vue

diff --git a/Step/wwwroot/assets/styles/base/alarms.less b/Step/wwwroot/assets/styles/base/alarms.less
index 48f9dbc1..b77e51b5 100644
--- a/Step/wwwroot/assets/styles/base/alarms.less
+++ b/Step/wwwroot/assets/styles/base/alarms.less
@@ -9,16 +9,12 @@
     top: 40px;
     background-color: #fff;
     padding: 0 0;
-    z-index: 949;
+    z-index: 800;
     box-sizing: border-box;
     display: flex;
     flex-wrap: nowrap;
     overflow: hidden;
     transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out,box-shadow 0ms 0ms;
-    &.coveredByModal{ 
-        z-index: 500;
-        filter: blur(10px);
-    }
     
     &.expanded {
         width: 494px;
diff --git a/Step/wwwroot/assets/styles/base/header.less b/Step/wwwroot/assets/styles/base/header.less
index c2a7eae2..6fe25205 100644
--- a/Step/wwwroot/assets/styles/base/header.less
+++ b/Step/wwwroot/assets/styles/base/header.less
@@ -9,14 +9,10 @@
     height: @header-height;
     width: calc(~"100% - 152px");
     position: absolute;
-    z-index: 950;
+    z-index: 801;
     top: 0;
     right: 0;
     left: 0;
-    &.coveredByModal{
-        z-index: 200;
-        filter: blur(10px);
-    }
     button {
         font-size: 28px;
         justify-content: center;
diff --git a/Step/wwwroot/assets/styles/base/modals.less b/Step/wwwroot/assets/styles/base/modals.less
index 41e6cb4f..366bc457 100644
--- a/Step/wwwroot/assets/styles/base/modals.less
+++ b/Step/wwwroot/assets/styles/base/modals.less
@@ -338,6 +338,10 @@
   background-color: @color-backdrop;
   z-index: 900;
 
+  &.nc {
+    z-index: 700;
+  }
+
   &.internal {
     height: calc(~"100vh - 80px");
   }
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index ea1aaf82..c293bad6 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -288,6 +288,9 @@
   background-color: rgba(217, 217, 217, 0.5);
   z-index: 900;
 }
+.backdrop.nc {
+  z-index: 700;
+}
 .backdrop.internal {
   height: calc(100vh - 80px);
 }
@@ -2612,15 +2615,11 @@ fieldset[disabled] .form-group.is-focused .togglebutton label {
   height: 80px;
   width: calc(100% - 152px);
   position: absolute;
-  z-index: 950;
+  z-index: 801;
   top: 0;
   right: 0;
   left: 0;
 }
-#app > header.coveredByModal {
-  z-index: 200;
-  filter: blur(10px);
-}
 #app > header button {
   font-size: 28px;
   justify-content: center;
@@ -3222,18 +3221,13 @@ footer .container button.big:before {
   top: 40px;
   background-color: #fff;
   padding: 0 0;
-  z-index: 949;
+  z-index: 800;
   box-sizing: border-box;
   display: flex;
   flex-wrap: nowrap;
   overflow: hidden;
   transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out, box-shadow 0ms 0ms;
 }
-#alarm-list.coveredByModal,
-#service-list.coveredByModal {
-  z-index: 500;
-  filter: blur(10px);
-}
 #alarm-list.expanded,
 #service-list.expanded {
   width: 494px;
diff --git a/Step/wwwroot/src/App.vue b/Step/wwwroot/src/App.vue
index 9661c0e3..f1398869 100644
--- a/Step/wwwroot/src/App.vue
+++ b/Step/wwwroot/src/App.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="container">
     <div id="app">
-      <app-header :showHeaderOnBlur="showHeaderOnBlur" :modalOpened="applyBlur"></app-header>
-      <alarm-list :showHeaderOnBlur="showHeaderOnBlur" :modalOpened="applyBlur"></alarm-list>
+      <app-header :class="{'blur':applyBlur}"></app-header>
+      <alarm-list :applyBlur="applyBlur"></alarm-list>
 
-      <under-the-hood :class="{'blur':applyBlur}"></under-the-hood>
-      <div id="main-view" ref="main-view" :class="{liftedUp : isMainViewLiftedUp,'blur':applyBlur}" >
+      <under-the-hood :class="{'blur':(applyBlur || applyBlurNc)}"></under-the-hood>
+      <div id="main-view" ref="main-view" :class="{liftedUp : isMainViewLiftedUp,'blur':(applyBlur || applyBlurNc)}" >
         <router-view  :class="{'blur':applyBlurInternal}" />
-        <modal-container name="modal" container-name="modal2" :inform-hmi="false" ></modal-container>
+        <modal-container name="modal" container-name="modal-internal" :inform-hmi="false" ></modal-container>
       </div>
-      <div id="main-view-handler" ref="main-view-handler" @click="toggleMainView()"  :class="{liftedUp : isMainViewLiftedUp,'blur':applyBlur}">
+      <div id="main-view-handler" ref="main-view-handler" @click="toggleMainView()"  :class="{liftedUp : isMainViewLiftedUp,'blur':(applyBlur || applyBlurNc)}">
 
       <vue-gesture :type="'swipedown'" :call="toggleMainView" :onmove="movepanel" :onstart="onstartdrag" :onstop="onstopdrag">
         <div class="handle" :title="'header_tooltip_close_uth' | localize('Close under-the-hood area')" >
@@ -17,14 +17,15 @@
         </div>
       </vue-gesture>
       </div>
-      <app-footer :class="{'blur':applyBlur}"></app-footer>
+      <app-footer :class="{'blur':(applyBlur || applyBlurNc)}"></app-footer>
 
     </div>
+    <modal-nc-container name="modal-nc" :class="{'blur':applyBlur}"></modal-nc-container>
     <modal-container name="modal" ></modal-container>
-        <div class="window-buttons">
-        <button class="gray square close" @click="sendMessage('hide')" :title="'header_tooltip_btn_minimize' | localize('Minimize the application')">-</button>
-        <button class="gray square close" @click="sendMessage('close')" :title="'header_tooltip_btn_close' | localize('Close the application')">&times;</button>
-      </div>
+    <div class="window-buttons">
+      <button class="gray square close" @click="sendMessage('hide')" :title="'header_tooltip_btn_minimize' | localize('Minimize the application')">-</button>
+      <button class="gray square close" @click="sendMessage('close')" :title="'header_tooltip_btn_close' | localize('Close the application')">&times;</button>
+    </div>
   </div>
 </template>
 
@@ -36,7 +37,7 @@ import { alarmList } from "src/app_modules/alarms";
 import { LoginService } from "src/services/loginService";
 import { DataService } from "src/services/dataService";
 import { Factory, MessageService } from "./_base";
-import { ModalContainer, ModalHelper } from "./modules/base-components";
+import { ModalContainer,ModalNcContainer, ModalHelper } from "./modules/base-components";
 import { appModelActions } from "src/store";
 import underTheHood from "src/components/under-the-hood.vue";
 
@@ -49,6 +50,7 @@ export default {
     appHeader: Header,
     appFooter: Footer,
     modalContainer: ModalContainer,
+    modalNcContainer: ModalNcContainer,
     alarmList,
     underTheHood
   },
@@ -64,20 +66,25 @@ export default {
 
     ms.subscribeToChannel("show-modal", args => {
       this.applyBlur = true;
-      this.showHeaderOnBlur = false;
-      if (args[3])
-        this.showHeaderOnBlur = args[3];
     });
 
     ms.subscribeToChannel("hide-modal", args => {
       this.applyBlur = false;
     });
 
-    ms.subscribeToChannel("show-modal2", args => {
+    ms.subscribeToChannel("show-modal-nc-called", args => {
+      this.applyBlurNc = true;
+    });
+
+    ms.subscribeToChannel("hide-modal-nc-called", args => {
+      this.applyBlurNc = false;
+    });
+
+    ms.subscribeToChannel("show-modal-internal", args => {
       this.applyBlurInternal = true;
     });
 
-    ms.subscribeToChannel("hide-modal2", args => {
+    ms.subscribeToChannel("hide-modal-internal", args => {
       this.applyBlurInternal = false;
     });
 
@@ -224,7 +231,7 @@ export default {
     return {
       state: this.$store.state,
       applyBlur: false,
-      showHeaderOnBlur:false,
+      applyBlurNc: false,
       applyBlurInternal: false,
       showHMIinProduction: false,
       loadingOperations: 0
diff --git a/Step/wwwroot/src/app.business-logic.ts b/Step/wwwroot/src/app.business-logic.ts
index 5cc1a099..d3579c76 100644
--- a/Step/wwwroot/src/app.business-logic.ts
+++ b/Step/wwwroot/src/app.business-logic.ts
@@ -22,11 +22,13 @@ let HMIvisibleInProduction = false
 let oldHMIvisible = false;
 let HMIAlarmsVisible = false;
 let HMIModalsVisible = false;
+let HMIModalsNcVisible = false;
 let HMIDragging = false;
 let HMIshowTimeout;
 let HMIAlarmsTimeout;
 let HMIModalsTimeout;
 let HMIDraggingTimeout;
+let HMIModalsNcTimeout;
 let HMIScreenshotInterval;
 let HMIprodTimeout;
 let RerenderInterval;
@@ -35,7 +37,8 @@ const messageService = Factory.Get(MessageService);
 
 messageService.subscribeToChannel("show-user-info", () => { ModalHelper.ShowModal(UserInfoDialog); });
 messageService.subscribeToChannel("show-machine-info", () => { ModalHelper.ShowModal(MachineInfoDialog); });
-messageService.subscribeToChannel("show-axes-calibration", () => { ModalHelper.ShowModal(AxesCalibration,null,true); });
+messageService.subscribeToChannel("show-axes-calibration", () => { ModalHelper.ShowNcModal(AxesCalibration); });
+messageService.subscribeToChannel("hide-axes-calibration", () => { ModalHelper.HideNcModal(AxesCalibration); });
 
 
 
@@ -165,6 +168,14 @@ if (typeof cmsClient != "undefined") {
       showModal()
   });
 
+  Factory.Get(MessageService).subscribeToChannel("HMI-show-modal-nc", args => {
+    clearTimeout(HMIModalsNcTimeout);
+    if (args[0] > 0)
+      HMIModalsNcTimeout = setTimeout(showNcModal, args[0]);
+    else
+      showNcModal()
+  });
+
   Factory.Get(MessageService).subscribeToChannel("HMI-hide-modal", args => {
     clearTimeout(HMIModalsTimeout);
     if (args[0] > 0)
@@ -173,6 +184,14 @@ if (typeof cmsClient != "undefined") {
       hideModal()
   });
 
+  Factory.Get(MessageService).subscribeToChannel("HMI-hide-modal-nc", args => {
+    clearTimeout(HMIModalsNcTimeout);
+    if (args[0] > 0)
+      HMIModalsNcTimeout = setTimeout(hideNcModal, args[0]);
+    else
+      hideNcModal()
+  });
+
   Factory.Get(MessageService).subscribeToChannel("HMI-start-drag", args => {
     clearTimeout(HMIDraggingTimeout);
     if (args[0] > 0)
@@ -206,6 +225,10 @@ function hideModal() {
   HMIModalsVisible = false;
   ElaborateHMIStatus();
 }
+function hideNcModal() {
+  HMIModalsNcVisible = false;
+  ElaborateHMIStatus();
+}
 function stopDrag() {
   HMIDragging = false;
   ElaborateHMIStatus();
@@ -229,6 +252,10 @@ function showModal() {
   HMIModalsVisible = true;
   ElaborateHMIStatus();
 }
+function showNcModal() {
+  HMIModalsNcVisible = true;
+  ElaborateHMIStatus();
+}
 function startDrag() {
   HMIDragging = true;
   ElaborateHMIStatus();
@@ -248,12 +275,12 @@ function ElaborateHMIStatus() {
       clearInterval(HMIScreenshotInterval);
     cmsClient.setNcWindowState(0);
   }
-  else if (hmiv && !HMIAlarmsVisible && !HMIModalsVisible && !HMIDragging) {
+  else if (hmiv && !HMIAlarmsVisible && !HMIModalsVisible && !HMIDragging && !HMIModalsNcVisible) {
     if (HMIScreenshotInterval)
       clearInterval(HMIScreenshotInterval);
     cmsClient.setNcWindowState(1);
   }
-  else if (hmiv && (HMIAlarmsVisible || HMIModalsVisible || HMIDragging)) {
+  else if (hmiv && (HMIAlarmsVisible || HMIModalsVisible || HMIDragging || HMIModalsNcVisible)) {
     cmsClient.setNcWindowState(0);
   }
 }
diff --git a/Step/wwwroot/src/app_modules/alarms/components/alarms-list.ts b/Step/wwwroot/src/app_modules/alarms/components/alarms-list.ts
index fa930189..195436d6 100644
--- a/Step/wwwroot/src/app_modules/alarms/components/alarms-list.ts
+++ b/Step/wwwroot/src/app_modules/alarms/components/alarms-list.ts
@@ -10,7 +10,7 @@ import { Hub } from "src/services/hub";
 
 declare let $: any;
 
-@Component({ name: "alarms-list", components: { alarmItem, alarmDetail },  props: {modalOpened: Boolean, showHeaderOnBlur: Boolean}  })
+@Component({ name: "alarms-list", components: { alarmItem, alarmDetail },  props: {applyBlur: Boolean}  })
 export default class alarmsList extends Vue {
   $store: any;
   $route: any;
diff --git a/Step/wwwroot/src/app_modules/alarms/components/alarms-list.vue b/Step/wwwroot/src/app_modules/alarms/components/alarms-list.vue
index a977a297..2cbc2962 100644
--- a/Step/wwwroot/src/app_modules/alarms/components/alarms-list.vue
+++ b/Step/wwwroot/src/app_modules/alarms/components/alarms-list.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="alarm-list" :class="{expanded: ribbonStatus>1, coveredByModal:(!showHeaderOnBlur && modalOpened),
+    <div id="alarm-list" :class="{expanded: ribbonStatus>1,blur:applyBlur,
                                   alarm: (!currentAlarm && ribbonStatus == 3) || (currentAlarm && currentAlarm.type =='alarm'), working: ribbonStatus == 1,
                                   warning: (!currentAlarm && ribbonStatus == 2) || (currentAlarm && currentAlarm.type =='warning'), opened: opened}">
       <div class="content scrollable" :class="{collapsed: currentAlarm, animated: opened}">
@@ -30,7 +30,7 @@
         <alarm-detail :alarm="currentAlarm" @close-detail="closeDetail()"></alarm-detail>
       </transition>
     </div>
-    <div id="service-list" :class="{expanded: ribbonStatus>1, opened: serviceOpened, coveredByModal:(!showHeaderOnBlur && modalOpened),}" v-if="hasServices">
+    <div id="service-list" :class="{expanded: ribbonStatus>1, opened: serviceOpened,blur:applyBlur}" v-if="hasServices">
       <div class="content scrollable">
         <alarm-item :title="alarm.title == null? getTitle(alarm): alarm.title"
                     :type="alarm.type"
diff --git a/Step/wwwroot/src/components/maintenance.ts b/Step/wwwroot/src/components/maintenance.ts
index 8b9004c2..f0b1af99 100644
--- a/Step/wwwroot/src/components/maintenance.ts
+++ b/Step/wwwroot/src/components/maintenance.ts
@@ -59,7 +59,7 @@ export default class Maintenance extends Vue {
         Factory.Get(MessageService).subscribeToChannel("update-maintenance", args => {
             awaiter(new MaintenanceService().GetMaintenances());
         });
-        ModalHelper.HideModal("modal2");
+        ModalHelper.HideModal("modal-internal");
         await awaiter(new MaintenanceService().GetMaintenances());
         if(this.$route.params.id){
             this.selectedMaintenanceId = this.$route.params.id;
diff --git a/Step/wwwroot/src/components/production.ts b/Step/wwwroot/src/components/production.ts
index 6b00596c..5a6ab4ad 100644
--- a/Step/wwwroot/src/components/production.ts
+++ b/Step/wwwroot/src/components/production.ts
@@ -35,7 +35,7 @@ export default class Production extends Vue {
   }
   async mounted() {
     this.confirmationDelegate = null;
-    ModalHelper.HideModal("modal2");
+    ModalHelper.HideModal("modal-internal");
   }
 
   get machineInfo() {
diff --git a/Step/wwwroot/src/components/test-status.ts b/Step/wwwroot/src/components/test-status.ts
index ce40a4c7..56c4a22d 100644
--- a/Step/wwwroot/src/components/test-status.ts
+++ b/Step/wwwroot/src/components/test-status.ts
@@ -13,7 +13,7 @@ import { ModalHelper } from "../modules/base-components";
 export default class TestStatus extends Vue {
 
   mounted(){
-    ModalHelper.HideModal("modal2");  
+    ModalHelper.HideModal("modal-internal");  
   }
 
   addProcess() {
diff --git a/Step/wwwroot/src/components/tooling/tooling-depot.ts b/Step/wwwroot/src/components/tooling/tooling-depot.ts
index e8615afc..1e660f2a 100644
--- a/Step/wwwroot/src/components/tooling/tooling-depot.ts
+++ b/Step/wwwroot/src/components/tooling/tooling-depot.ts
@@ -213,19 +213,19 @@ export default class depot extends Vue {
   @Watch("magazineStatusModel")
   public modalBlockMagazine() {
     if (this.magazineStatusModel.action == 0) {
-      ModalHelper.HideModal("modal2");
+      ModalHelper.HideModal("modal-internal");
     }
     else if (this.magazineStatusModel.action == 1) {
-      ModalHelper.ShowModal(DepotActionLoading, "modal2");
+      ModalHelper.ShowModal(DepotActionLoading, "modal-internal");
     }
     else if (this.magazineStatusModel.action == 2) {
-      ModalHelper.ShowModal(DepotActionUnloading, "modal2");
+      ModalHelper.ShowModal(DepotActionUnloading, "modal-internal");
     }
     else if (this.magazineStatusModel.action == 4) {
-      ModalHelper.ShowModal(DepotActionTransfer, "modal2");
+      ModalHelper.ShowModal(DepotActionTransfer, "modal-internal");
     }
     else if (this.magazineStatusModel.action == 5) {
-      ModalHelper.ShowModal(DepotActionGeneric, "modal2");
+      ModalHelper.ShowModal(DepotActionGeneric, "modal-internal");
     }
   }
 
diff --git a/Step/wwwroot/src/components/tooling/tooling-equipment.ts b/Step/wwwroot/src/components/tooling/tooling-equipment.ts
index acfede06..8a233504 100644
--- a/Step/wwwroot/src/components/tooling/tooling-equipment.ts
+++ b/Step/wwwroot/src/components/tooling/tooling-equipment.ts
@@ -59,19 +59,19 @@ export default class toolingEquipment extends Vue {
   @Watch("magazineStatusModel")
   public modalBlockMagazine(){
     if(this.magazineStatusModel.action == 0){
-      ModalHelper.HideModal("modal2");
+      ModalHelper.HideModal("modal-internal");
     }
     else if(this.magazineStatusModel.action == 1){
-      ModalHelper.ShowModal(DepotActionLoading, "modal2");
+      ModalHelper.ShowModal(DepotActionLoading, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 2){
-      ModalHelper.ShowModal(DepotActionUnloading, "modal2");
+      ModalHelper.ShowModal(DepotActionUnloading, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 4){
-      ModalHelper.ShowModal(DepotActionTransfer, "modal2");
+      ModalHelper.ShowModal(DepotActionTransfer, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 5){
-      ModalHelper.ShowModal(DepotActionGeneric, "modal2");
+      ModalHelper.ShowModal(DepotActionGeneric, "modal-internal");
     }
   }
 
diff --git a/Step/wwwroot/src/components/tooling/tooling-families.ts b/Step/wwwroot/src/components/tooling/tooling-families.ts
index a97e35de..fbafdfe6 100644
--- a/Step/wwwroot/src/components/tooling/tooling-families.ts
+++ b/Step/wwwroot/src/components/tooling/tooling-families.ts
@@ -38,19 +38,19 @@ export default class toolingFamilies extends Vue {
   @Watch("magazineStatusModel")
   public modalBlockMagazine(){
     if(this.magazineStatusModel.action == 0){
-      ModalHelper.HideModal("modal2");
+      ModalHelper.HideModal("modal-internal");
     }
     else if(this.magazineStatusModel.action == 1){
-      ModalHelper.ShowModal(DepotActionLoading, "modal2");
+      ModalHelper.ShowModal(DepotActionLoading, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 2){
-      ModalHelper.ShowModal(DepotActionUnloading, "modal2");
+      ModalHelper.ShowModal(DepotActionUnloading, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 4){
-      ModalHelper.ShowModal(DepotActionTransfer, "modal2");
+      ModalHelper.ShowModal(DepotActionTransfer, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 5){
-      ModalHelper.ShowModal(DepotActionGeneric, "modal2");
+      ModalHelper.ShowModal(DepotActionGeneric, "modal-internal");
     }
   }
 
diff --git a/Step/wwwroot/src/components/tooling/tooling-magpos.ts b/Step/wwwroot/src/components/tooling/tooling-magpos.ts
index 88e25105..9b669628 100644
--- a/Step/wwwroot/src/components/tooling/tooling-magpos.ts
+++ b/Step/wwwroot/src/components/tooling/tooling-magpos.ts
@@ -33,19 +33,19 @@ export default class toolingMagPos extends Vue {
   @Watch("magazineStatusModel")
   public modalBlockMagazine(){
     if(this.magazineStatusModel.action == 0){
-      ModalHelper.HideModal("modal2");
+      ModalHelper.HideModal("modal-internal");
     }
     else if(this.magazineStatusModel.action == 1){
-      ModalHelper.ShowModal(DepotActionLoading, "modal2");
+      ModalHelper.ShowModal(DepotActionLoading, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 2){
-      ModalHelper.ShowModal(DepotActionUnloading, "modal2");
+      ModalHelper.ShowModal(DepotActionUnloading, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 4){
-      ModalHelper.ShowModal(DepotActionTransfer, "modal2");
+      ModalHelper.ShowModal(DepotActionTransfer, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 5){
-      ModalHelper.ShowModal(DepotActionGeneric, "modal2");
+      ModalHelper.ShowModal(DepotActionGeneric, "modal-internal");
     }
   }
 
diff --git a/Step/wwwroot/src/components/tooling/tooling-shanks.ts b/Step/wwwroot/src/components/tooling/tooling-shanks.ts
index 178d7bc1..7e0510c8 100644
--- a/Step/wwwroot/src/components/tooling/tooling-shanks.ts
+++ b/Step/wwwroot/src/components/tooling/tooling-shanks.ts
@@ -48,19 +48,19 @@ export default class toolingShanks extends Vue {
   @Watch("magazineStatusModel")
   public modalBlockMagazine(){
     if(this.magazineStatusModel.action == 0){
-      ModalHelper.HideModal("modal2");
+      ModalHelper.HideModal("modal-internal");
     }
     else if(this.magazineStatusModel.action == 1){
-      ModalHelper.ShowModal(DepotActionLoading, "modal2");
+      ModalHelper.ShowModal(DepotActionLoading, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 2){
-      ModalHelper.ShowModal(DepotActionUnloading, "modal2");
+      ModalHelper.ShowModal(DepotActionUnloading, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 4){
-      ModalHelper.ShowModal(DepotActionTransfer, "modal2");
+      ModalHelper.ShowModal(DepotActionTransfer, "modal-internal");
     }
     else if(this.magazineStatusModel.action == 5){
-      ModalHelper.ShowModal(DepotActionGeneric, "modal2");
+      ModalHelper.ShowModal(DepotActionGeneric, "modal-internal");
     }
   }
 
diff --git a/Step/wwwroot/src/components/tooling/tooling.ts b/Step/wwwroot/src/components/tooling/tooling.ts
index 62231d9d..571e7a2f 100644
--- a/Step/wwwroot/src/components/tooling/tooling.ts
+++ b/Step/wwwroot/src/components/tooling/tooling.ts
@@ -34,19 +34,19 @@ export default class Tooling extends Vue {
   @Watch("magazineStatusModel")
   public modalBlockMagazine() {
     if (this.magazineStatusModel.action == 0) {
-      ModalHelper.HideModal("modal2");
+      ModalHelper.HideModal("modal-internal");
     }
     else if (this.magazineStatusModel.action == 1) {
-      ModalHelper.ShowModal(DepotActionLoading, "modal2");
+      ModalHelper.ShowModal(DepotActionLoading, "modal-internal");
     }
     else if (this.magazineStatusModel.action == 2) {
-      ModalHelper.ShowModal(DepotActionUnloading, "modal2");
+      ModalHelper.ShowModal(DepotActionUnloading, "modal-internal");
     }
     else if (this.magazineStatusModel.action == 4) {
-      ModalHelper.ShowModal(DepotActionTransfer, "modal2");
+      ModalHelper.ShowModal(DepotActionTransfer, "modal-internal");
     }
     else if (this.magazineStatusModel.action == 5) {
-      ModalHelper.ShowModal(DepotActionGeneric, "modal2");
+      ModalHelper.ShowModal(DepotActionGeneric, "modal-internal");
     }
   }
 
diff --git a/Step/wwwroot/src/components/utilities.ts b/Step/wwwroot/src/components/utilities.ts
index a4f60b0c..1fcce3db 100644
--- a/Step/wwwroot/src/components/utilities.ts
+++ b/Step/wwwroot/src/components/utilities.ts
@@ -11,7 +11,7 @@ export default class Utilities extends Vue{
      
     
     mounted(){
-        ModalHelper.HideModal("modal2");  
+        ModalHelper.HideModal("modal-internal");  
     }
     
 
diff --git a/Step/wwwroot/src/modules/app-header.ts b/Step/wwwroot/src/modules/app-header.ts
index 01703a9a..a6414581 100644
--- a/Step/wwwroot/src/modules/app-header.ts
+++ b/Step/wwwroot/src/modules/app-header.ts
@@ -8,7 +8,7 @@ import { Watch } from "vue-property-decorator";
 
 declare let $: any;
 
-@Component({ name: "app-header", components: { appRibbon: AppRibbon, userInfo: UserInfo, processInfo: ProcessInfo },  props: {modalOpened: Boolean, showHeaderOnBlur:Boolean} })
+@Component({ name: "app-header", components: { appRibbon: AppRibbon, userInfo: UserInfo, processInfo: ProcessInfo } })
 export default class AppHeader extends Vue {
   $store: any;
 
diff --git a/Step/wwwroot/src/modules/app-header.vue b/Step/wwwroot/src/modules/app-header.vue
index 782a21bf..cdbe8306 100644
--- a/Step/wwwroot/src/modules/app-header.vue
+++ b/Step/wwwroot/src/modules/app-header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header :class="{'turn-up':isMainViewLiftedUp,coveredByModal:(modalOpened && !showHeaderOnBlur)}">
+  <header :class="{'turn-up':isMainViewLiftedUp}">
     <app-ribbon :status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"                
                 :expanded="ribbonStatus>1"
                 :show-expander="ribbonStatus>1"
@@ -85,7 +85,7 @@
       </process-info>
     </div>
 
-    <user-info :disabledByModal="(modalOpened && showHeaderOnBlur)" ></user-info>
+    <user-info></user-info>
   </header>
 
 </template>
diff --git a/Step/wwwroot/src/modules/base-components/ModalHelper.ts b/Step/wwwroot/src/modules/base-components/ModalHelper.ts
index 0198e26d..63538072 100644
--- a/Step/wwwroot/src/modules/base-components/ModalHelper.ts
+++ b/Step/wwwroot/src/modules/base-components/ModalHelper.ts
@@ -56,6 +56,14 @@ export class ModalHelper {
     Factory.Get(MessageService).publishToChannel("show-" + modalname, view,null,null,showHeader);
   }
 
+  public static ShowNcModal(view) {
+    Factory.Get(MessageService).publishToChannel("show-modal-nc", view);
+  }
+
+  public static HideNcModal(view) {
+    Factory.Get(MessageService).publishToChannel("hide-modal-nc", view);
+  }
+
   public static ShowModalAsync(view, model= null,  modalname: string = "modal"): Promise<any> {
     let deferred = new Deferred();
     Factory.Get(MessageService).publishToChannel("show-" + modalname, view, deferred, model);
@@ -67,7 +75,7 @@ export class ModalHelper {
     Factory.Get(MessageService).publishToChannel("hide-" + modalname);
   }
 
-  public static AskConfirm(title: string, body: string, onConfirm: Function, onCancel: Function, modalcontainer: string = "modal2") {
+  public static AskConfirm(title: string, body: string, onConfirm: Function, onCancel: Function, modalcontainer: string = "modal-internal") {
 
     ModalHelper._modalData.title = title;
     ModalHelper._modalData.content = body;
diff --git a/Step/wwwroot/src/modules/base-components/index.js b/Step/wwwroot/src/modules/base-components/index.js
index 9f084e0a..49246ba8 100644
--- a/Step/wwwroot/src/modules/base-components/index.js
+++ b/Step/wwwroot/src/modules/base-components/index.js
@@ -4,6 +4,7 @@ import Loader from "./loader.vue";
 import AppRibbon from "./ribbons/app-ribbon.vue";
 import UserInfo from "./user-info.vue";
 import ModalContainer from "./modal-container.vue";
+import ModalNcContainer from "./modal-nc-container.vue";
 import { ModalHelper } from "./ModalHelper";
 import ProcessInfo from "./process-info.vue";
 import Accordion from "./accordion.vue";
@@ -29,6 +30,7 @@ export {
     AppRibbon,
     UserInfo,
     ModalContainer,
+    ModalNcContainer,
     ModalHelper,
     ProcessInfo,
     Accordion,
diff --git a/Step/wwwroot/src/modules/base-components/modal-nc-container.ts b/Step/wwwroot/src/modules/base-components/modal-nc-container.ts
new file mode 100644
index 00000000..d44c1751
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/modal-nc-container.ts
@@ -0,0 +1,53 @@
+import { Factory, MessageService } from "src/_base";
+export default {
+  computed: {
+    isVisible: function () {
+      return this.currentView.length > 0;
+    },
+    VisibleModal: function(){
+      return this.currentView[this.currentView.length - 1];
+    }
+  },
+  props: {
+  },
+  data: function () {
+    return {
+      currentView: []
+    };
+  },
+  created() {
+    Factory.Get(MessageService).subscribeToChannel("show-modal-nc", args => {
+
+      //set blur effect && hide NC HMI
+      Factory.Get(MessageService).publishToChannel("show-modal-nc-called");
+      Factory.Get(MessageService).publishToChannel("HMI-show-modal-nc");
+
+      //Search in the array
+      let v = this.currentView.indexOf(args[0]);
+
+      //Save in the array
+      if(v>=0)
+        this.currentView[v] = args[0]
+      else
+        this.currentView.push(args[0]);
+
+    });
+
+    Factory.Get(MessageService).subscribeToChannel("hide-modal-nc", args => {
+      
+      //Search in the array
+      let v = this.currentView.indexOf(args[0]);
+
+      //If esists delete it
+      if(v>=0)
+        this.currentView.splice(v, 1);
+        
+      //If no modals esists show the normal software
+      if(this.currentView.length == 0){
+        Factory.Get(MessageService).publishToChannel("hide-modal-nc-called");
+        Factory.Get(MessageService).publishToChannel("HMI-hide-modal-nc", 300);
+      }
+
+    });
+  }
+};
diff --git a/Step/wwwroot/src/modules/base-components/modal-nc-container.vue b/Step/wwwroot/src/modules/base-components/modal-nc-container.vue
new file mode 100644
index 00000000..07913ffe
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/modal-nc-container.vue
@@ -0,0 +1,10 @@
+<template>
+<transition v-if="isVisible" name="modal">
+<div class="backdrop nc">
+  <component v-bind:is="VisibleModal">
+  </component>
+</div>
+</transition>
+</template>
+<script src="./modal-nc-container.ts" lang="ts"></script>
+
diff --git a/Step/wwwroot/src/modules/base-components/user-info.ts b/Step/wwwroot/src/modules/base-components/user-info.ts
index 8040e9a6..7627ecaf 100644
--- a/Step/wwwroot/src/modules/base-components/user-info.ts
+++ b/Step/wwwroot/src/modules/base-components/user-info.ts
@@ -5,7 +5,7 @@ import moment from "moment";
 import { AppModel } from "src/store";
 import { getColorFromName,isDarkColor } from "src/_base/utils";
 
-@Component({ name: "user-info",  props: {disabledByModal: Boolean} })
+@Component({ name: "user-info"})
 export default class UserInfo extends Vue {
   $store: any;
 
diff --git a/Step/wwwroot/src/modules/base-components/user-info.vue b/Step/wwwroot/src/modules/base-components/user-info.vue
index 9eae2c5c..1b90927c 100644
--- a/Step/wwwroot/src/modules/base-components/user-info.vue
+++ b/Step/wwwroot/src/modules/base-components/user-info.vue
@@ -1,14 +1,13 @@
 <template>
 <div class="user-info">
   <button class="dark-blue" 
-    :disabled="disabledByModal" 
     @click="sendMessage('show-help')" 
     :title="'header_tooltip_btn_help' | localize('Show Machine Help')"
     >
       ?
     </button>
   <button class="dark-blue" 
-    :disabled="disabledByModal"  @click="sendMessage('show-machine-info')" :title="'header_tooltip_btn_mchinfo' | localize('Show Machine Info')">
+  @click="sendMessage('show-machine-info')" :title="'header_tooltip_btn_mchinfo' | localize('Show Machine Info')">
     <img src="assets/icons/png/machine-info.png" width="28px">
     <div class="machine-info" v-if="state.isMainViewLiftedUp">
       <small>{{state.machineInfo.machineName}}</small>
@@ -19,7 +18,6 @@
     v-if="currentUser"
     @click="sendMessage('show-user-info')" 
     :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')"
-    :disabled="disabledByModal"
     :class="{'colorWhite':isDarkColor(getColor(currentUser.lastName,currentUser.firstName))}"
     :style="{'background-color':getColor(currentUser.lastName,currentUser.firstName) }"
     >
@@ -27,7 +25,6 @@
   </button>
   <button class="profile dark-blue colorWhite" 
     v-if="!currentUser"
-    :disabled="disabledByModal"
     @click="sendMessage('show-user-info')" 
     :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')"
     >
diff --git a/Step/wwwroot/src/services/hub.ts b/Step/wwwroot/src/services/hub.ts
index 77c77675..2e6b287c 100644
--- a/Step/wwwroot/src/services/hub.ts
+++ b/Step/wwwroot/src/services/hub.ts
@@ -341,7 +341,7 @@ export class Hub {
           me._axesVisible = true;
         }
         else if (!resettingAxes && me._axesVisible) {
-          ModalHelper.HideModal();
+          Factory.Get(MessageService).publishToChannel("hide-axes-calibration");
           me._axesVisible = false;
         }
       }, 500);