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

fix paddle

Browse Source
This commit is contained in:
Alessio
2020-06-17 11:37:38 +02:00
parent d32f00bde6
commit 36c5ff8def
7 changed files with 169 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Thermo.Active/wwwroot/assets/styles/base/paddle.less
+38 -65
View File
@@ -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,29 @@ 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;
justify-content: center;
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 +126,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 +146,12 @@ body {
}
label {
width : 117px;
width : 100%;
margin: 10px;
}
}
.text-box-paddle.text-soft {
label {
width : 100%;
align-self: center;
}
}
}
}
Thermo.Active/wwwroot/assets/styles/style.css
+21 -33
View File
@@ -4956,25 +4956,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;
@@ -4986,6 +4967,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;
@@ -5024,8 +5008,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;
@@ -5037,8 +5023,12 @@ 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;
justify-content: center;
}
.container #app .sidebar .sidebar-panel .head-sidebar label {
font-size: 24px;
font-weight: 500;
font-stretch: normal;
@@ -5048,13 +5038,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;
@@ -5062,11 +5055,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;
@@ -5076,18 +5068,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;
Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts
+11 -5
View File
@@ -5,14 +5,20 @@ import { paddleActions } from '@/store/paddle.store';
@Component({ name: 'sidebar' })
export default class Sidebar extends Vue {
azione1: boolean = false;
azione2: boolean = false;
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);
}
}
Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
+71 -20
View File
@@ -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>Tutti</button>
<button>Gruppo 1</button>
<button>Gruppo 2</button>
<button>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>
Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/switch-button.ts
+8
View File
@@ -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);
}
Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/switch-button.vue
+1 -1
View File
@@ -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>
Thermo.Active/wwwroot/src/store/paddle.store.ts
+19 -3
View File
@@ -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);
}
}
}