main view handle e animazione collegata

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

@@ -9,7 +9,9 @@
 @import "ribbons.less";
 @import "footer.less";
 @import "process-info.less";
-
+@background-color: rgb(216, 216, 216);
+@handle-width: 48px;
+@handle-height: 32px;
 @persona-size: 88px;
 .persona {
     height: @persona-size;
@@ -35,7 +37,7 @@ body {
     position: relative;
 }
 
-#app.blur{
+#app.blur {
     filter: blur(10px);
 }
 
@@ -46,15 +48,50 @@ body {
     right: 0;
     bottom: 80px;
     height: calc(~'100vh - 80px');
-    background-color: rgb(216, 216, 216);
+    background-color: @background-color;
     z-index: 100;
     transition: 0.5s ease-out;
+    .handle {
+        display: none;
+    }
 }
 
 #main-view.turn-up {
     transform: translateY(-100vh);
 }
 
+#main-view-handler {
+    position: absolute;
+    top: -100px;
+    left: 0;
+    width: 100vw;
+    box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.4);
+    z-index: 300;
+    transition: 0.5s 0.5s ease-out;
+    .handle {
+        background-color: @background-color;
+        display: block;
+        position: absolute;
+        top: 0;
+        left: calc(~'50vw - 24px');
+        text-align: center;
+        width: @handle-width;
+        height: @handle-height;
+        border-bottom-left-radius: @handle-height /2;
+        border-bottom-right-radius: @handle-height /2;
+        box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.4);
+        font-size: 26px;
+        color: @color-darkish-blue;
+        line-height: @handle-height;
+        cursor: pointer;
+    }
+}
+
+#main-view-handler.turn-up {
+    transform: translateY(100px);
+
+}
+
 #back-view {
     position: absolute;
     top: 0;
@@ -74,13 +111,11 @@ body {
     left: calc(50% - 30vw);
     background-color: white;
     padding: 10px;
-
-    .row{
-      display: flex;
+    .row {
+        display: flex;
     }
-
-    button{
-      height: 50px;
-      margin: 0 10px;
+    button {
+        height: 50px;
+        margin: 0 10px;
     }
 }

Step/wwwroot/assets/styles/base/process-info.less

@@ -2,6 +2,11 @@
 @import "colors.less";
 @width: 280px;
 @height: 64px;
+
+.turn-up{
+  .process-info{ display: none;}
+}
+
 .process-info {
     background-color: @color-white;
     width: @width;

Step/wwwroot/assets/styles/style.css

@@ -606,6 +606,9 @@ footer .container button.big::before {
   left: calc(42%);
   border-radius: 13px;
 }
+.turn-up .process-info {
+  display: none;
+}
 .process-info {
   background-color: #fff;
   width: 280px;
@@ -685,9 +688,41 @@ body {
   z-index: 100;
   transition: 0.5s ease-out;
 }
+#main-view .handle {
+  display: none;
+}
 #main-view.turn-up {
   transform: translateY(-100vh);
 }
+#main-view-handler {
+  position: absolute;
+  top: -100px;
+  left: 0;
+  width: 100vw;
+  box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.4);
+  z-index: 300;
+  transition: 0.5s 0.5s ease-out;
+}
+#main-view-handler .handle {
+  background-color: #d8d8d8;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: calc(50vw - 24px);
+  text-align: center;
+  width: 48px;
+  height: 32px;
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+  box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.4);
+  font-size: 26px;
+  color: #002680;
+  line-height: 32px;
+  cursor: pointer;
+}
+#main-view-handler.turn-up {
+  transform: translateY(100px);
+}
 #back-view {
   position: absolute;
   top: 0;

Step/wwwroot/src/App.vue

@@ -5,6 +5,11 @@
       <div id="back-view">
         <router-view name="backview"></router-view>
       </div>
+      <div id="main-view-handler" :class="{'turn-up':state.isMainViewLiftedUp}" @click="toggleMainView()">
+        <div class="handle">
+          <i class="fa fa-angle-double-down"></i>
+        </div>
+      </div>
       <div id="main-view" :class="{'turn-up':state.isMainViewLiftedUp}">
         <router-view/>
       </div>
@@ -26,6 +31,7 @@ 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 { appModelActions } from "src/store";
 import "./app.business-logic";
 
 export default {
@@ -36,7 +42,6 @@ export default {
     modalContainer: ModalContainer
   },
   mounted: function() {
-
     Factory.Get(MessageService).subscribeToChannel("show-modal", args => {
       this.applyBlur = true;
     });
@@ -56,6 +61,9 @@ export default {
   methods: {
     callHub: function() {
       this.hub.Hello();
+    },
+    toggleMainView() {
+      appModelActions.MainViewToggle(this.$store);
     }
   },
   data: function() {

Step/wwwroot/src/modules/app-header.ts

@@ -10,6 +10,7 @@ export default class AppHeader extends Vue {
   $store: any;
 
   public get state() { return this.$store.state.machineStatus; };
+  public get isMainViewLiftedUp() { return this.$store.state.isMainViewLiftedUp; }
   public get mainStatus() { return this.$store.getters.mainStatus; };
   public get powerOnStatus() { return this.$store.getters.powerOnAlarms; };
 

Step/wwwroot/src/modules/app-header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header :class="{'turn-up':isMainViewLiftedUp}">
     <app-ribbon :status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
                 :expanded="ribbonStatus>1"
                 :show-expander="ribbonStatus>1">