Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix footer menu size & buttons

Browse Source
This commit is contained in:
=
2020-06-25 12:29:17 +02:00
parent f71c03186e
commit 2dc5ca8ebe
5 changed files with 283 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Thermo.Active/wwwroot/assets/styles/base/buttons.less
+4 -1
View File
@@ -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;
Thermo.Active/wwwroot/assets/styles/base/footer.less
+192 -171
View File
@@ -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;
}
}
}
}
Thermo.Active/wwwroot/assets/styles/base/layout.less
+1 -1
View File
@@ -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";
Thermo.Active/wwwroot/assets/styles/style.css
+5 -2
View File
@@ -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;
Thermo.Active/wwwroot/src/modules/app-footer.vue
+81 -55
View File
@@ -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>