blur effect

Step/wwwroot/assets/styles/base/layout.less

@@ -35,6 +35,10 @@ body {
     position: relative;
 }
 
+#app.blur{
+    filter: blur(5px);
+}
+
 #main-view {
     position: absolute;
     top: 0;

Step/wwwroot/assets/styles/style.css

@@ -639,6 +639,9 @@ body {
   width: 100vw;
   position: relative;
 }
+#app.blur {
+  filter: blur(5px);
+}
 #main-view {
   position: absolute;
   top: 0;

Step/wwwroot/src/App.vue

@@ -1,27 +1,30 @@
 <template>
-  <div id="app">
-    <app-header></app-header>
-    <div id="back-view">
-      <router-view name="backview"></router-view>
+  <div class="container">
+    <div id="app" :class="{'blur':applyBlur}">
+      <app-header></app-header>
+      <div id="back-view">
+        <router-view name="backview"></router-view>
+      </div>
+      <div id="main-view" :class="{'turn-up':state.isMainViewLiftedUp}">
+        <router-view/>
+      </div>
+
+      <app-footer></app-footer>
+
+      <!-- Modali sempre disponibili -->
+      <!-- <login></login> -->
+      <!-- <user-info></user-info>
+      <machine-info></machine-info> -->
+
     </div>
-    <div id="main-view" :class="{'turn-up':state.isMainViewLiftedUp}">
-      <router-view/>
-    </div>
-
-    <app-footer></app-footer>
-
-    <!-- Modali sempre disponibili -->
-    <modal-container name="modal"></modal-container>
-    <!-- <login></login> -->
-    <!-- <user-info></user-info>
-    <machine-info></machine-info> -->
-
+    <modal-container name="modal" ></modal-container>
   </div>
 </template>
 
 <script>
 import { Hub } from "./services/hub";
 import { Header, Footer, Login } from "./app.modules";
+import {Factory, MessageService } from "./_base";
 import { ModalContainer, ModalHelper } from "./modules/base-components";
 import "./app.business-logic";
 
@@ -33,11 +36,20 @@ export default {
     modalContainer: ModalContainer
   },
   mounted: function() {
+
+    Factory.Get(MessageService).subscribeToChannel("show-modal", args => {
+      this.applyBlur = true;
+    });
+
+    Factory.Get(MessageService).subscribeToChannel("hide-modal", args => {
+      this.applyBlur = false;
+    });
+
     this.$nextTick(() => ModalHelper.ShowModal(Login));
     this.hub = new Hub();
   },
   computed: {
-    debugStore: function(){
+    debugStore: function() {
       return this.$store.state;
     }
   },
@@ -48,7 +60,8 @@ export default {
   },
   data: function() {
     return {
-      state: this.$store.state
+      state: this.$store.state,
+      applyBlur: false
     };
   }
 };