From 2dc5ca8ebed4f6e00f14c003ae92cbf84ffc9c72 Mon Sep 17 00:00:00 2001
From: = <paolo@teamdev.it>
Date: Thu, 25 Jun 2020 12:29:17 +0200
Subject: [PATCH] fix footer menu size & buttons

---
 .../wwwroot/assets/styles/base/buttons.less   |   5 +-
 .../wwwroot/assets/styles/base/footer.less    | 363 +++++++++---------
 .../wwwroot/assets/styles/base/layout.less    |   2 +-
 Thermo.Active/wwwroot/assets/styles/style.css |   7 +-
 .../wwwroot/src/modules/app-footer.vue        | 136 ++++---
 5 files changed, 283 insertions(+), 230 deletions(-)

diff --git a/Thermo.Active/wwwroot/assets/styles/base/buttons.less b/Thermo.Active/wwwroot/assets/styles/base/buttons.less
index 9882916f..5c4c7e87 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/buttons.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/buttons.less
@@ -133,7 +133,7 @@ button.btn.btn-success[disabled] {
 }
 
 button.under {
-  width: 208px;
+  min-width: 118px;
   height: 45px;
   object-fit: contain;
   border-radius: 100px;
@@ -144,6 +144,9 @@ button.under {
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  color: #fff;
+  font-weight: 500;
+  font-size: 18px;
 
   img {
     max-width: 178px;
diff --git a/Thermo.Active/wwwroot/assets/styles/base/footer.less b/Thermo.Active/wwwroot/assets/styles/base/footer.less
index 583e9a62..ea0906ca 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/footer.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/footer.less
@@ -8,184 +8,205 @@
 @footer-button-margin: 19px;
 @footer-padding: 0 0 9px 8px;
 @footer-machine-area-size: 300px;
+
 footer {
+  position: absolute;
+  z-index: 300; // Fix z-index del footer in funzione della modifica dello z-index del main panel
+  z-index: 820;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  .machine-area {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: @footer-machine-area-size;
+    height: @footer-height;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    background-image: @color-footer-background-image;
+    box-shadow: @color-footer-box-shadow;
+    right: @footer-machine-area-size;
+    margin: 0;
+    border-top-right-radius: @footer-height / 2;
+    border-bottom-right-radius: @footer-height /2;
+    line-height: @footer-height;
+    padding: @footer-padding;
+    height: @footer-height;
     position: absolute;
-    z-index: 300; // Fix z-index del footer in funzione della modifica dello z-index del main panel
-    z-index: 820;
     bottom: 0;
     left: 0;
-    right: 0;
-    .machine-area {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        width: @footer-machine-area-size;
-        height: @footer-height;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+    box-sizing: border-box;
+    overflow: visible;
+
+    .swipeup {
+      width: 100%;
     }
-    .container {
-        display: flex;
-        flex-direction: row;
-        align-items: flex-end;
-        background-image: @color-footer-background-image;
-        box-shadow: @color-footer-box-shadow;
-        right: @footer-machine-area-size;
-        margin: 0;
-        border-top-right-radius: @footer-height / 2;
-        border-bottom-right-radius: @footer-height /2;
-        line-height: @footer-height;
-        padding: @footer-padding;
-        height: @footer-height;
+
+    button {
+      cursor: pointer;
+      display: flex;
+      margin-left: @footer-button-margin;
+      margin-right: @footer-button-margin;
+      border: none;
+      min-width: @footer-button-size;
+      min-height: @footer-button-size;
+      max-width: @footer-button-size;
+      max-height: @footer-button-size;
+      border-radius: @footer-button-size /2;
+      background-image: @color-button-oval-background-image;
+      box-shadow: @color-button-oval-box-shadow;
+    }
+
+    button.main-production {
+      background-image: url(../icons/png/produzione-BIG.png);
+      background-size: cover;
+    }
+
+    button.tools-manager {
+      background-image: url(../icons/png/attrezzaggio-BIG.png);
+      background-size: cover;
+    }
+
+    button.report-manager {
+      background-image: url(../icons/png/report-BIG.png);
+      background-size: cover;
+    }
+
+    button.alarms-manager {
+      background-image: url(../icons/png/allarmi-BIG.png);
+      background-size: cover;
+    }
+
+    button.maintenance-manager {
+      background-image: url(../icons/png/manutenzione-BIG.png);
+      background-size: cover;
+    }
+
+    button.utilities {
+      background-image: url(../icons/png/Utilities-big.png);
+      background-size: cover;
+    }
+
+    button.externUtility {
+      overflow: hidden;
+      position: relative;
+      box-sizing: border-box;
+      background-image: url(../icons/png/button_bg.png);
+      background-size: cover;
+
+      img {
+        max-width: @footer-button-size;
+        max-height: @footer-button-size;
         position: absolute;
-        bottom: 0;
-        left: 0;
-        box-sizing: border-box;
-        overflow: visible;
-        .swipeup{
-            width: 100%;
-        }
-        button {
-            cursor: pointer;
-            display: flex;
-            margin-left: @footer-button-margin;
-            margin-right: @footer-button-margin;
-            border: none;
-            min-width: @footer-button-size;
-            min-height: @footer-button-size;
-            max-width: @footer-button-size;
-            max-height: @footer-button-size;
-            border-radius: @footer-button-size /2;
-            background-image: @color-button-oval-background-image;
-            box-shadow: @color-button-oval-box-shadow;
-        }
-        button.main-production {
-            background-image: url(../icons/png/produzione-BIG.png);
-            background-size: cover;
-        }
-        button.tools-manager {
-            background-image: url(../icons/png/attrezzaggio-BIG.png);
-            background-size: cover;
-        }
-        button.report-manager{
-          background-image: url(../icons/png/report-BIG.png);
-          background-size: cover;
-        }
-        button.alarms-manager{
-          background-image: url(../icons/png/allarmi-BIG.png);
-          background-size: cover;
-        }
-        button.maintenance-manager{
-          background-image: url(../icons/png/manutenzione-BIG.png);
-          background-size: cover;
-        }
-        button.utilities{
-          background-image: url(../icons/png/Utilities-big.png);
-          background-size: cover;
-        }
-        button.externUtility{
-          overflow: hidden;
-          position: relative;
-          box-sizing: border-box;
-          background-image: url(../icons/png/button_bg.png);
-          background-size: cover;
-          img{
-            max-width: @footer-button-size;
-            max-height: @footer-button-size;
-            position:absolute;
-            top: 50%;
-            left:50%;
-            transform: translate(-50%, -50%);
-          }
-
-          div{
-            max-width: @footer-button-size;
-            max-height: @footer-button-size;
-            position:absolute;
-            top: 50%;
-            left:50%;
-            transform: translate(-50%, -50%);
-            font-size: 26px;
-            font-weight: bold;
-            color: #002680;
-            text-shadow: 1px 1px 0px #fff;
-          }
-        }
-        .divider{
-          height: 63px;
-          line-height: 63px;
-          margin-left: 20px;
-          margin-right: 20px;
-          color: #002680;
-          font-size: 24px;
-          text-shadow: 0px 0px 2px #f1f1f169;
-        }
-
-        button.scada{
-          background-image: url(../icons/png/SCADA-big.png);
-          background-size: cover;
-        }
-        button.ricetta{
-          background-image: url(../icons/png/gestione-programmi-BIG.png);
-          background-size: cover;
-        }
-        button.jobeditor{
-          background-image: url(../icons/png/editor-BIG.png);
-          background-size: cover;
-        }
-        button.users{
-          background-image: url(../icons/png/users-BIG.png);
-          background-size: cover;
-        }
-        button.progrprerisc{
-          background-image: url(../icons/png/programmazione.png);
-          background-size: cover;
-        }
-        button.clock{
-          background-image: url(../icons/png/dashboard.png);
-          background-size: cover;
-        }
-
-        button:active{
-          box-shadow: 0px 0px 1px 1px #FFF;
-        }
-        button[disabled] {
-          filter: grayscale(100%);
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
       }
-        // button:hover,
-        button.big {
-            position: relative;
-            min-height: @footer-button-big-size;
-            min-width: @footer-button-big-size;
-            border-radius: @footer-button-big-size /2;
 
-          //   &:after {
-          //     content: " ";
-          //     background-color: white;
-          //     width: @footer-button-ball-size;
-          //     height: @footer-button-ball-size;
-          //     display: block;
-          //     border-radius: 50%;
-          //     -webkit-animation: fa-spin 2s infinite linear;
-          //     animation: fa-spin 2s infinite linear;
-          //     position: absolute;
-          //     left: -@footer-button-halfball-size;
-          //     top: calc(~'50% - @{footer-button-halfball-size}');
-          //     transform-origin: (@footer-button-big-size /2 + @footer-button-halfball-size) @footer-button-halfball-size;
-          // }
-
-          &:before {
-            content: " ";
-            background-color: white;
-            width: 16px;
-            height: 4px;
-            display: block;
-            position: absolute;
-            bottom: -8px;
-            left: calc(50% - 8px);
-            border-radius: 13px;
-        }
+      div {
+        max-width: @footer-button-size;
+        max-height: @footer-button-size;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 26px;
+        font-weight: bold;
+        color: #002680;
+        text-shadow: 1px 1px 0px #fff;
       }
     }
-}
+
+    .divider {
+      height: 63px;
+      line-height: 63px;
+      margin-left: 20px;
+      margin-right: 20px;
+      color: #002680;
+      font-size: 24px;
+      text-shadow: 0px 0px 2px #f1f1f169;
+    }
+
+    button.scada {
+      background-image: url(../icons/png/SCADA-big.png);
+      background-size: cover;
+    }
+
+    button.ricetta {
+      background-image: url(../icons/png/gestione-programmi-BIG.png);
+      background-size: cover;
+    }
+
+    button.jobeditor {
+      background-image: url(../icons/png/editor-BIG.png);
+      background-size: cover;
+    }
+
+    button.users {
+      background-image: url(../icons/png/users-BIG.png);
+      background-size: cover;
+    }
+
+    button.progrprerisc {
+      background-image: url(../icons/png/programmazione.png);
+      background-size: cover;
+    }
+
+    button.clock {
+      background-image: url(../icons/png/dashboard.png);
+      background-size: cover;
+    }
+
+    button:active {
+      box-shadow: 0px 0px 1px 1px #FFF;
+    }
+
+    button[disabled] {
+      filter: grayscale(100%);
+    }
+
+    // button:hover,
+    button.big {
+      position: relative;
+      min-height: @footer-button-big-size;
+      min-width: @footer-button-big-size;
+      border-radius: @footer-button-big-size /2;
+
+      //   &:after {
+      //     content: " ";
+      //     background-color: white;
+      //     width: @footer-button-ball-size;
+      //     height: @footer-button-ball-size;
+      //     display: block;
+      //     border-radius: 50%;
+      //     -webkit-animation: fa-spin 2s infinite linear;
+      //     animation: fa-spin 2s infinite linear;
+      //     position: absolute;
+      //     left: -@footer-button-halfball-size;
+      //     top: calc(~'50% - @{footer-button-halfball-size}');
+      //     transform-origin: (@footer-button-big-size /2 + @footer-button-halfball-size) @footer-button-halfball-size;
+      // }
+
+      &:before {
+        content: " ";
+        background-color: white;
+        width: 16px;
+        height: 4px;
+        display: block;
+        position: absolute;
+        bottom: -8px;
+        left: calc(50% - 8px);
+        border-radius: 13px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/assets/styles/base/layout.less b/Thermo.Active/wwwroot/assets/styles/base/layout.less
index 2e20b907..ae9a8eb4 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/layout.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/layout.less
@@ -3,7 +3,7 @@
 @import "colors.less";
 @import "modals.less";
 @import "dashboard-gauge.less";
-@import "gantt-component.less";
+
 @import "piece.less";
 @import "dashboard.less";
 @import "riscaldi.less";
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 3b2d3ca0..df8649c6 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -5649,7 +5649,7 @@ button.btn.btn-success[disabled]:hover {
   background-image: linear-gradient(to bottom, #1756ad, #002680) !important;
 }
 button.under {
-  width: 208px;
+  min-width: 118px;
   height: 45px;
   object-fit: contain;
   border-radius: 100px;
@@ -5660,6 +5660,9 @@ button.under {
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  color: #fff;
+  font-weight: 500;
+  font-size: 18px;
 }
 button.under img {
   max-width: 178px;
@@ -6403,7 +6406,7 @@ footer .machine-area {
   height: 80px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-evenly;
 }
 footer .container {
   display: flex;
diff --git a/Thermo.Active/wwwroot/src/modules/app-footer.vue b/Thermo.Active/wwwroot/src/modules/app-footer.vue
index 4c3580df..b739fbdc 100644
--- a/Thermo.Active/wwwroot/src/modules/app-footer.vue
+++ b/Thermo.Active/wwwroot/src/modules/app-footer.vue
@@ -73,72 +73,98 @@
 				class="oval utilities"
 				:class="{ big:isInPath('utilities') && !state.isMainViewLiftedUp}"
 			></button>
--->
-  <footer>      
-    <div class="container">
+	-->
+	<footer>
+		<div class="container">
+			<button
+				@click="openProgram('/ricetta')"
+				:title="'footer_tooltip_ricetta' | localize('Apertura Ricetta')"
+				:disabled="!isAreaEnabled('ricetta')"
+				v-if="isAreaVisible('ricetta')"
+				class="oval ricetta"
+				:class="{ big:isInPath('ricetta') && !state.isMainViewLiftedUp}"
+			></button>
 
-        
-       <button @click="openProgram('/ricetta')" :title="'footer_tooltip_ricetta' | localize('Apertura Ricetta')"
-              :disabled="!isAreaEnabled('ricetta')" v-if="isAreaVisible('ricetta')" class="oval ricetta" :class="{ big:isInPath('ricetta') && !state.isMainViewLiftedUp}"></button> 
-        
-		<button @click="openProgram('/setup')" :title="'footer_tooltip_setup' | localize('Setup')"
-              :disabled="!isAreaEnabled('jobeditor')" v-if="isAreaVisible('jobeditor')" class="oval jobeditor" :class="{ big:isInPath('setup') && !state.isMainViewLiftedUp}"></button>
-      	
-		<button @click="openProgram('/production')" :title="'footer_tooltip_production' | localize('Production')"
-              :disabled="!isAreaEnabled('production')" v-if="isAreaVisible('production')" class="oval main-production" :class="{ big:isInPath('production') && !state.isMainViewLiftedUp}"> </button>
-      
-      <!-- <button @click="openProgram('/tooling')" :title="'footer_tooltip_tooling' | localize('Tooling')"
-              :disabled="!isAreaEnabled('tooling')" v-if="isAreaVisible('tooling')" class="oval tools-manager" :class="{ big:isInPath('tooling') && !state.isMainViewLiftedUp}"></button> -->
-      
-      <button @click="openProgram('/report')" :title="'footer_tooltip_report' | localize('Report')"
-              :disabled="!isAreaEnabled('report')" v-if="isAreaVisible('report')" class="oval report-manager" :class="{ big:isInPath('report') && !state.isMainViewLiftedUp}"></button>
-      
-	  <button @click="openProgram('/alarms')" :title="'footer_tooltip_alarms' | localize('Alarms')"
-              :disabled="!isAreaEnabled('alarms')" v-if="isAreaVisible('alarms')" class="oval alarms-manager" :class="{ big:isInPath('alarms') && !state.isMainViewLiftedUp}"></button>
-     
-      <!-- <button @click="openProgram('/maintenance')" :title="'footer_tooltip_maintenance' | localize('Maintenance')"
+			<button
+				@click="openProgram('/setup')"
+				:title="'footer_tooltip_setup' | localize('Setup')"
+				:disabled="!isAreaEnabled('jobeditor')"
+				v-if="isAreaVisible('jobeditor')"
+				class="oval jobeditor"
+				:class="{ big:isInPath('setup') && !state.isMainViewLiftedUp}"
+			></button>
+
+			<button
+				@click="openProgram('/production')"
+				:title="'footer_tooltip_production' | localize('Production')"
+				:disabled="!isAreaEnabled('production')"
+				v-if="isAreaVisible('production')"
+				class="oval main-production"
+				:class="{ big:isInPath('production') && !state.isMainViewLiftedUp}"
+			></button>
+
+			<!-- <button @click="openProgram('/tooling')" :title="'footer_tooltip_tooling' | localize('Tooling')"
+			:disabled="!isAreaEnabled('tooling')" v-if="isAreaVisible('tooling')" class="oval tools-manager" :class="{ big:isInPath('tooling') && !state.isMainViewLiftedUp}"></button>-->
+
+			<button
+				@click="openProgram('/report')"
+				:title="'footer_tooltip_report' | localize('Report')"
+				:disabled="!isAreaEnabled('report')"
+				v-if="isAreaVisible('report')"
+				class="oval report-manager"
+				:class="{ big:isInPath('report') && !state.isMainViewLiftedUp}"
+			></button>
+
+			<button
+				@click="openProgram('/alarms')"
+				:title="'footer_tooltip_alarms' | localize('Alarms')"
+				:disabled="!isAreaEnabled('alarms')"
+				v-if="isAreaVisible('alarms')"
+				class="oval alarms-manager"
+				:class="{ big:isInPath('alarms') && !state.isMainViewLiftedUp}"
+			></button>
+
+			<!-- <button @click="openProgram('/maintenance')" :title="'footer_tooltip_maintenance' | localize('Maintenance')"
               :disabled="!isAreaEnabled('maintenance')" v-if="isAreaVisible('maintenance')" class="oval maintenance-manager" :class="{ big:isInPath('maintenance') && !state.isMainViewLiftedUp}"></button>
             <button @click="openProgram('/scada')" :title="'footer_tooltip_scada' | localize('Scada')"
               :disabled="!isAreaEnabled('scada')" v-if="isAreaVisible('scada')" class="oval scada" :class="{ big:isInPath('scada') && !state.isMainViewLiftedUp}"></button>
         <button @click="openProgram('/users')" :title="'footer_tooltip_users' | localize('Users-Manager')"
               :disabled="!isAreaEnabled('users')" v-if="isAreaVisible('users')"  class="oval users" :class="{ big:isInPath('users') && !state.isMainViewLiftedUp}"></button>
         <button @click="openProgram('/utilities')" :title="'footer_tooltip_utilities' | localize('Utilities')"
-              :disabled="!isAreaEnabled('utilities')" v-if="isAreaVisible('utilities')" class="oval utilities" :class="{ big:isInPath('utilities') && !state.isMainViewLiftedUp}"></button> -->
-         
-         
-        <button @click="openProgram('/progrprerisc')" :title="'footer_tooltip_progr_prerisc' | localize('Programmazione Preriscaldo')"
-              :disabled="!isAreaEnabled('progrprerisc')" v-if="isAreaVisible('progrprerisc')" class="oval progrprerisc" :class="{ big:isInPath('progrprerisc') && !state.isMainViewLiftedUp}"></button> 
-        
-		<button @click="openProgram('/clock')" :title="'footer_tooltip_dashboard' | localize('Dashboard')"
-              :disabled="!isAreaEnabled('clock')" v-if="isAreaVisible('clock')" class="oval clock" :class="{ big:isInPath('clock') && !state.isMainViewLiftedUp}"></button>
-      
-      <!-- <div v-if="isAreaVisible('utilities') && getUtilities().length > 0" class="divider"><i class="fa fa-circle"></i></div>  
-      <button @click="startUtility(software.id)" :title="software.longName" v-for="software in getUtilities()" :key="software.id"
-              :disabled="!isAreaEnabled('utilities')" v-if="isAreaVisible('utilities')" class="oval externUtility">
-              <img v-if="software.iconBase64 && software.iconBase64!=''" :src="software.iconBase64" />
-              <div v-if="!software.iconBase64 || software.iconBase64==''" >{{software.shortName}}</div>
-      </button>
-     
-    
-        <vue-gesture :type="'swipeup'" :call="OpenMainView" class="swipeup">  
-                <span class="swipeup">&nbsp;</span>
-        </vue-gesture>-->
-    </div> 
-    
-    <div class="machine-area">
-            <button class="under">Manuale</button>
-            <button class="under">Auto</button>
-            <button class="under"></button>
-      <!-- <button class="under" @mouseup="toggleMainView()" :class="{'pressed':state.isMainViewLiftedUp}" :title="'footer_tooltip_under_hood' | localize('Open/Close Under-the-hood area')">
+			:disabled="!isAreaEnabled('utilities')" v-if="isAreaVisible('utilities')" class="oval utilities" :class="{ big:isInPath('utilities') && !state.isMainViewLiftedUp}"></button>-->
+
+			<button
+				@click="openProgram('/progrprerisc')"
+				:title="'footer_tooltip_progr_prerisc' | localize('Programmazione Preriscaldo')"
+				:disabled="!isAreaEnabled('progrprerisc')"
+				v-if="isAreaVisible('progrprerisc')"
+				class="oval progrprerisc"
+				:class="{ big:isInPath('progrprerisc') && !state.isMainViewLiftedUp}"
+			></button>
+
+			<button
+				@click="openProgram('/clock')"
+				:title="'footer_tooltip_dashboard' | localize('Dashboard')"
+				:disabled="!isAreaEnabled('clock')"
+				v-if="isAreaVisible('clock')"
+				class="oval clock"
+				:class="{ big:isInPath('clock') && !state.isMainViewLiftedUp}"
+			></button>
+		</div>
+
+		<div class="machine-area">
+			<button class="under">Manuale</button>
+			<button class="under">Auto</button>
+			<!-- <button class="under" @mouseup="toggleMainView()" :class="{'pressed':state.isMainViewLiftedUp}" :title="'footer_tooltip_under_hood' | localize('Open/Close Under-the-hood area')">
         <img src="../../public/assets/icons/png/siemens-logo.png" v-if="isSiemens()">
         <img src="../../public/assets/icons/png/fanuc-logo.png" v-if="isFanuc()">
         <img src="../../public/assets/icons/png/osai-logo.png" v-if="isOsai()">
         <span v-if="isDemo()" class="btn-demo">DEMO</span>
-      </button> -->
-    </div>
-  </footer>
+			</button>-->
+		</div>
+	</footer>
 
-<!--
+	<!--
 		<div class="machine-area">
 			<button
 				class="under"
@@ -153,6 +179,6 @@
 			</button>
 		</div>
 	</footer>
-    -->
+	-->
 </template>
 <script lang="ts" src="./app-footer.ts"></script>