Merge remote-tracking branch 'teamdev/develop' into develop
This commit is contained in:
=
@@ -3,47 +3,26 @@
|
||||
@import "colors.less";
|
||||
@import "fonts.less";
|
||||
|
||||
html {
|
||||
height : 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
border : 0;
|
||||
margin : 0;
|
||||
padding: 0;
|
||||
height : 100%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
position: absolute;
|
||||
top : 50%;
|
||||
right : 0;
|
||||
z-index : 1000;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
#app {
|
||||
|
||||
nav {
|
||||
position: absolute;
|
||||
// top : 50%;
|
||||
right : 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position : absolute;
|
||||
right : 0;
|
||||
height : 100%;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
.active button {
|
||||
transform: translate(-761px, 0px);
|
||||
}
|
||||
|
||||
.active_second_card button {
|
||||
transform: translate(-1522px, 0px);
|
||||
}
|
||||
|
||||
div {
|
||||
|
||||
button {
|
||||
@@ -87,8 +66,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sidebar {
|
||||
width : 100vw;
|
||||
height : 100vh;
|
||||
@@ -96,21 +73,15 @@ body {
|
||||
flex-direction : column;
|
||||
justify-content: center;
|
||||
|
||||
// .sidebar-backdrop {
|
||||
// width: 100vw;
|
||||
// height: 100vh;
|
||||
// // position: fixed;
|
||||
// // top: 0;
|
||||
// // left: 0;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
.active {
|
||||
transform: translate(-761px, 0px);
|
||||
}
|
||||
|
||||
.sidebar-panel {
|
||||
overflow-y : auto;
|
||||
// overflow-y : auto;
|
||||
background-color: #130f40;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
// top: 141px;
|
||||
position : fixed;
|
||||
right : 0;
|
||||
z-index : 900;
|
||||
padding : 3rem 20px 2rem 20px;
|
||||
width : 721px;
|
||||
@@ -119,19 +90,43 @@ body {
|
||||
box-shadow : 2px 10px 15px 0 rgba(0, 0, 0, 0.5);
|
||||
background-color: #dddddd;
|
||||
|
||||
.text-head-sidebar {
|
||||
margin : 10px auto;
|
||||
font-size : 24px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : normal;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #002680;
|
||||
.head-sidebar {
|
||||
margin: 10px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
button{
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
background-color: unset;
|
||||
border: none;
|
||||
|
||||
&.selected{
|
||||
color:#002680;
|
||||
border-bottom: 2px solid #002680;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size : 24px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
font-style : normal;
|
||||
line-height : normal;
|
||||
letter-spacing: normal;
|
||||
text-align : center;
|
||||
color : #002680;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.box-sidebar-panel {
|
||||
aside {
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
section {
|
||||
display : grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
align-items : center;
|
||||
@@ -145,11 +140,10 @@ body {
|
||||
background-color: #808e96;
|
||||
margin : 10px 30px;
|
||||
|
||||
.text-box-paddle {
|
||||
div {
|
||||
display : flex;
|
||||
width : 268px;
|
||||
height : 78px;
|
||||
font-family : WorkSans;
|
||||
font-size : 18px;
|
||||
font-weight : 500;
|
||||
font-stretch : normal;
|
||||
@@ -166,19 +160,12 @@ body {
|
||||
}
|
||||
|
||||
label {
|
||||
width : 117px;
|
||||
width : 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.text-box-paddle.text-soft {
|
||||
label {
|
||||
width : 100%;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -5,49 +5,48 @@
|
||||
|
||||
|
||||
.modal.processo-info {
|
||||
width : 1808px;
|
||||
height : 976px;
|
||||
margin : 120px auto;
|
||||
box-shadow: none;
|
||||
position : relative;
|
||||
|
||||
header {
|
||||
font-size: 22px;
|
||||
color: #4b4b4b;
|
||||
font-size : 22px;
|
||||
color : #4b4b4b;
|
||||
display : flex;
|
||||
flex-flow : row nowrap;
|
||||
justify-content: space-evenly;
|
||||
align-items : center;
|
||||
|
||||
.tab-header {
|
||||
padding: 10px 0px;
|
||||
width : 70%;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-right: 10px;
|
||||
width: 149px;
|
||||
height: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
|
||||
background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.15;
|
||||
letter-spacing: normal;
|
||||
color: #4b4b4b;
|
||||
border : none;
|
||||
border-radius : 2px;
|
||||
background-image : linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%);
|
||||
display : grid;
|
||||
grid-template-columns: 48px 101px;
|
||||
grid-template-rows : 48px;
|
||||
|
||||
img {
|
||||
margin-right: 20px;
|
||||
span {
|
||||
margin : auto;
|
||||
font-size: 13px;
|
||||
color : #4b4b4b;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
width: 106px;
|
||||
height: 32px;
|
||||
label{
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-align: right;
|
||||
color: #545454;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -11,7 +11,29 @@
|
||||
flex-flow: column nowrap;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
|
||||
.tab-header {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: 1px solid #bbbcbc;
|
||||
padding: 0 38px;
|
||||
border-bottom: none;
|
||||
font-size: 20px;
|
||||
background-color: #bbbcbc;
|
||||
color: #002680;
|
||||
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
border-top: 2px solid #002680;
|
||||
}
|
||||
}
|
||||
}
|
||||
hr {
|
||||
flex-shrink: 0;
|
||||
background-color: #979797;
|
||||
@@ -237,37 +259,11 @@
|
||||
padding-left: 31px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: darkblue;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tab-header {
|
||||
display: flex;
|
||||
|
||||
flex-flow: row;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
|
||||
button {
|
||||
|
||||
background: none;
|
||||
border: 1px solid #bbbcbc;
|
||||
padding: 0 38px;
|
||||
border-bottom: none;
|
||||
font-size: 20px;
|
||||
background-color: #bbbcbc;
|
||||
color: #002680;
|
||||
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
border-top: 2px solid #002680;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal.setup-info {
|
||||
@@ -277,7 +273,7 @@
|
||||
margin: 150px auto;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
|
||||
|
||||
section {
|
||||
height: 100%;
|
||||
|
||||
|
||||
@@ -10,6 +10,26 @@
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.setup .tab-header {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.setup .tab-header button {
|
||||
background: none;
|
||||
border: 1px solid #bbbcbc;
|
||||
padding: 0 38px;
|
||||
border-bottom: none;
|
||||
font-size: 20px;
|
||||
background-color: #bbbcbc;
|
||||
color: #002680;
|
||||
}
|
||||
.setup .tab-header button.active {
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
border-top: 2px solid #002680;
|
||||
}
|
||||
.setup hr {
|
||||
flex-shrink: 0;
|
||||
background-color: #979797;
|
||||
@@ -195,26 +215,6 @@
|
||||
font-weight: bold;
|
||||
color: darkblue;
|
||||
}
|
||||
.tab-header {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.tab-header button {
|
||||
background: none;
|
||||
border: 1px solid #bbbcbc;
|
||||
padding: 0 38px;
|
||||
border-bottom: none;
|
||||
font-size: 20px;
|
||||
background-color: #bbbcbc;
|
||||
color: #002680;
|
||||
}
|
||||
.tab-header button.active {
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
border-top: 2px solid #002680;
|
||||
}
|
||||
.modal.setup-info {
|
||||
width: 1639px;
|
||||
height: 695px;
|
||||
@@ -4586,25 +4586,6 @@ article .box .body {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.main-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.container #app nav {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -4616,6 +4597,9 @@ body {
|
||||
.container #app nav .active button {
|
||||
transform: translate(-761px, 0px);
|
||||
}
|
||||
.container #app nav .active_second_card button {
|
||||
transform: translate(-1522px, 0px);
|
||||
}
|
||||
.container #app nav div button {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
@@ -4654,8 +4638,10 @@ body {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.container #app .sidebar .active {
|
||||
transform: translate(-761px, 0px);
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel {
|
||||
overflow-y: auto;
|
||||
background-color: #130f40;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
@@ -4667,8 +4653,24 @@ body {
|
||||
box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5);
|
||||
background-color: #dddddd;
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel .text-head-sidebar {
|
||||
margin: 10px auto;
|
||||
.container #app .sidebar .sidebar-panel .head-sidebar {
|
||||
margin: 10px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel .head-sidebar button {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
background-color: unset;
|
||||
border: none;
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel .head-sidebar button.selected {
|
||||
color: #002680;
|
||||
border-bottom: 2px solid #002680;
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel .head-sidebar label {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
@@ -4678,13 +4680,16 @@ body {
|
||||
text-align: center;
|
||||
color: #002680;
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel .box-sidebar-panel {
|
||||
.container #app .sidebar .sidebar-panel aside {
|
||||
height: 95%;
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav {
|
||||
.container #app .sidebar .sidebar-panel section .sidebar-panel-nav {
|
||||
width: 286px;
|
||||
height: 100px;
|
||||
border-radius: 2px;
|
||||
@@ -4692,11 +4697,10 @@ body {
|
||||
background-color: #808e96;
|
||||
margin: 10px 30px;
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle {
|
||||
.container #app .sidebar .sidebar-panel section .sidebar-panel-nav div {
|
||||
display: flex;
|
||||
width: 268px;
|
||||
height: 78px;
|
||||
font-family: WorkSans;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
@@ -4706,18 +4710,14 @@ body {
|
||||
color: #ffffff;
|
||||
margin: 10px;
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle i {
|
||||
.container #app .sidebar .sidebar-panel section .sidebar-panel-nav div i {
|
||||
text-align: end;
|
||||
width: 50px;
|
||||
color: #bbbcbc;
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle label {
|
||||
width: 117px;
|
||||
margin: 10px;
|
||||
}
|
||||
.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle.text-soft label {
|
||||
.container #app .sidebar .sidebar-panel section .sidebar-panel-nav div label {
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
margin: 10px;
|
||||
}
|
||||
.arch {
|
||||
display: flex;
|
||||
@@ -4788,45 +4788,46 @@ body {
|
||||
.modal.avvio-produzione-info section.body section .specific .tast {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.modal.processo-info {
|
||||
width: 1808px;
|
||||
height: 976px;
|
||||
margin: 120px auto;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
}
|
||||
.modal.processo-info header {
|
||||
font-size: 22px;
|
||||
color: #4b4b4b;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
.modal.processo-info header .tab-header {
|
||||
padding: 10px 0px;
|
||||
width: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.modal.processo-info header .tab-header button {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-right: 10px;
|
||||
width: 149px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
|
||||
background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.15;
|
||||
letter-spacing: normal;
|
||||
display: grid;
|
||||
grid-template-columns: 48px 101px;
|
||||
grid-template-rows: 48px;
|
||||
}
|
||||
.modal.processo-info header .tab-header button span {
|
||||
margin: auto;
|
||||
font-size: 13px;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.modal.processo-info header .tab-header button img {
|
||||
margin-right: 20px;
|
||||
margin: auto;
|
||||
}
|
||||
.modal.processo-info header .tab-header label {
|
||||
width: 106px;
|
||||
height: 32px;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-align: right;
|
||||
color: #545454;
|
||||
}
|
||||
.modal.progr-preriscaldo-info header {
|
||||
padding-left: 31px;
|
||||
|
||||
@@ -5,14 +5,22 @@ import { paddleActions } from '@/store/paddle.store';
|
||||
@Component({ name: 'sidebar' })
|
||||
export default class Sidebar extends Vue {
|
||||
|
||||
azione1: boolean = false;
|
||||
azione2: boolean = false;
|
||||
show:string="tutti";
|
||||
|
||||
isPanelOpen() {
|
||||
return this.$store.state.paddle.isNavOpen;
|
||||
}
|
||||
|
||||
closeSidebarPanel() {
|
||||
paddleActions.Toggle(this.$store);
|
||||
get action1() {
|
||||
return this.$store.state.paddle.action1;
|
||||
}
|
||||
|
||||
get action2() {
|
||||
return this.$store.state.paddle.action2;
|
||||
}
|
||||
|
||||
ConfigPressed(action: string) {
|
||||
paddleActions.ToggleAction(this.$store,action);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,71 +1,122 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<!-- <transition> -->
|
||||
<div v-if="isPanelOpen()" class="sidebar-panel">
|
||||
<div class="text-head-sidebar">
|
||||
<div v-if="isPanelOpen()" class="sidebar-panel" :class="{ 'active' : action1||action2 }">
|
||||
<div class="head-sidebar">
|
||||
<label>Pulsanti personalizzati</label>
|
||||
</div>
|
||||
|
||||
<div class="box-sidebar-panel">
|
||||
<section @click="ConfigPressed('action1')">
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle">
|
||||
<div>
|
||||
<img src="assets/icons/svg/paddle-riscaldo.svg" />
|
||||
<label>Estensione riscaldo 20 secondi</label>
|
||||
<i class="fa fa-cog gear-box-paddle"></i>
|
||||
<i class="fa fa-cog"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle">
|
||||
<div class="sidebar-panel-nav" @click="ConfigPressed('action2')">
|
||||
<div>
|
||||
<img src="assets/icons/svg/paddle-altra-funzione.svg" />
|
||||
<label>Altra funzione tasto fisico della tastiera</label>
|
||||
<i class="fa fa-cog gear-box-paddle"></i>
|
||||
<i class="fa fa-cog"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="text-head-sidebar">
|
||||
<div class="head-sidebar">
|
||||
<label>Soft keys</label>
|
||||
</div>
|
||||
|
||||
<div class="box-sidebar-panel">
|
||||
<section>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<div>
|
||||
<label>Estensione riscaldo 20 secondi</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<toggle-button v-model="azione1"></toggle-button>
|
||||
<div>
|
||||
<toggle-button></toggle-button>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<toggle-button v-model="azione2"></toggle-button>
|
||||
<div>
|
||||
<toggle-button></toggle-button>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div class="text-box-paddle text-soft">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div v-if="(action1||action2) && isPanelOpen()" class="sidebar-panel">
|
||||
<div class="head-sidebar">
|
||||
<button :class="{'selected':show=='tutti'}" @click="show='tutti'">Tutti</button>
|
||||
<button :class="{'selected':show=='one'}" @click="show='one'">Gruppo 1</button>
|
||||
<button :class="{'selected':show=='two'}" @click="show='two'">Gruppo 2</button>
|
||||
<button :class="{'selected':show=='three'}" @click="show='three'">Gruppo 3</button>
|
||||
</div>
|
||||
|
||||
<aside class="scrollable auto">
|
||||
<section>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<label>Estensione riscaldo 20 secondi</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<toggle-button></toggle-button>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<toggle-button></toggle-button>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-panel-nav">
|
||||
<div>
|
||||
<label>Nome azione soft key</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
<!-- </transition> -->
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,14 @@ export default class SwitchButton extends Vue{
|
||||
return this.$store.state.paddle.isNavOpen;
|
||||
}
|
||||
|
||||
get action1(){
|
||||
return this.$store.state.paddle.action1;
|
||||
}
|
||||
|
||||
get action2(){
|
||||
return this.$store.state.paddle.action2;
|
||||
}
|
||||
|
||||
togglePaddle() {
|
||||
paddleActions.Toggle(this.$store);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="{ 'active' : isSwitchActive() }" @click="togglePaddle()">
|
||||
<div :class="{ 'active' : isSwitchActive() , 'active_second_card' : action1 || action2}" @click="togglePaddle()">
|
||||
<slot>
|
||||
<button title="Menu">
|
||||
<div>
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
<template>
|
||||
<div class="setup">
|
||||
<div class="container">
|
||||
<modal type="processo-info" :title="'processo_lbl_title' | localize('Attività attuale (es. attesa spostamento assi)')">
|
||||
<div class="tab-header" slot="header-buttons">
|
||||
<button> <img src="assets/icons/png/star.png"> Opzioni di lavorazione </button>
|
||||
<button> <img src="assets/icons/png/star.png"> Pirometro</button>
|
||||
<button> <img src="assets/icons/png/star.png"> Attivazione riscaldi</button>
|
||||
<button> <img src="assets/icons/png/star.png"> Riscaldo +10 secondi</button>
|
||||
<button> <img src="assets/icons/png/star.png"> Risclado -10 secondi</button>
|
||||
<button> <img src="assets/icons/png/star.png"> Label pulsante opzionanle</button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Opzioni di lavorazione</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Pirometro</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Attivazione riscaldi</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Riscaldo +10 secondi</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Risclado -10 secondi</span> </button>
|
||||
<button> <img src="assets/icons/png/star.png"> <span>Label pulsante opzionale</span></button>
|
||||
<label>{{actual}}/{{tot}}</label>
|
||||
</div>
|
||||
<circlegantt></circlegantt>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,20 +1,36 @@
|
||||
|
||||
export interface PaddleModel {
|
||||
isNavOpen: boolean
|
||||
isNavOpen: boolean,
|
||||
action1: boolean,
|
||||
action2:boolean
|
||||
}
|
||||
|
||||
export const paddleStore={
|
||||
state:{
|
||||
isNavOpen:false
|
||||
isNavOpen:false,
|
||||
action1:false,
|
||||
action2:false
|
||||
} as PaddleModel,
|
||||
mutations: {
|
||||
toggleNav(state){
|
||||
state.isNavOpen=!state.isNavOpen
|
||||
state.isNavOpen=!state.isNavOpen,
|
||||
state.action1=false,
|
||||
state.action2=false
|
||||
},
|
||||
toggleAction(state,action:string){
|
||||
if(action=="action1"){
|
||||
state.action1=!state.action1
|
||||
}else{
|
||||
state.action2=!state.action2
|
||||
}
|
||||
}
|
||||
},
|
||||
actions:{
|
||||
Toggle(context){
|
||||
context.commit("toggleNav");
|
||||
},
|
||||
ToggleAction(context,action:string){
|
||||
context.commit("toggleAction",action);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user