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

Merge branch 'newfeature/paddle' into develop

Browse Source
This commit is contained in:
Alessio
2020-06-17 08:32:19 +02:00
parent d74f886a06 0be93533d7
commit b84ca57735
3 changed files with 161 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Thermo.Active/wwwroot/assets/styles/base/paddle.less
+87 -82
View File
@@ -4,15 +4,15 @@
@import "fonts.less";
html {
height: 100%;
height : 100%;
overflow: hidden;
}
body {
border: 0;
margin: 0;
border : 0;
margin : 0;
padding: 0;
height: 100%;
height : 100%;
}
.hidden {
@@ -21,9 +21,9 @@ body {
.main-nav {
position: absolute;
top: 50%;
right: 0;
z-index: 1000;
top : 50%;
right : 0;
z-index : 1000;
}
.container {
@@ -32,8 +32,12 @@ body {
nav {
position: absolute;
top: 50%;
right: 0;
// top : 50%;
right : 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.active button {
@@ -43,36 +47,36 @@ body {
div {
button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 1000;
border: 0;
border-radius: 0;
pointer-events: all;
background: #dddddd;
position : relative;
height : 30px;
width : 32px;
display : block;
z-index : 1000;
border : 0;
border-radius : 0;
pointer-events : all;
background : #dddddd;
border-bottom-left-radius: 90px;
border-top-left-radius: 90px;
height: 90px;
width: 45px;
box-shadow: -3px 0 3px rgba(0, 0, 0, .2);
border-top-left-radius : 90px;
height : 90px;
width : 45px;
box-shadow : -3px 0 3px rgba(0, 0, 0, .2);
div {
display: grid;
display : grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 1fr;
align-items: center;
justify-items: center;
padding: 5px;
grid-template-rows : 1fr 1fr;
align-items : center;
justify-items : center;
padding : 5px;
div {
width: 2px;
height: 2px;
width : 2px;
height : 2px;
border-radius: 10px;
margin: 2px;
background: #002680;
margin : 2px;
background : #002680;
}
@@ -86,80 +90,83 @@ body {
.sidebar {
width : 100vw;
height : 100vh;
display : flex;
flex-direction : column;
justify-content: center;
.sidebar-backdrop {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
}
// .sidebar-backdrop {
// width: 100vw;
// height: 100vh;
// // position: fixed;
// // top: 0;
// // left: 0;
// cursor: pointer;
// }
.sidebar-panel {
overflow-y: auto;
overflow-y : auto;
background-color: #130f40;
position: fixed;
right: 0;
top: 141px;
height: 100vh;
z-index: 900;
padding: 3rem 20px 2rem 20px;
width: 721px;
height: 920px;
border-radius: 4px;
box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5);
// top: 141px;
z-index : 900;
padding : 3rem 20px 2rem 20px;
width : 721px;
height : 920px;
border-radius : 4px;
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;
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;
text-align : center;
color : #002680;
}
.box-sidebar-panel {
display: grid;
display : grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
justify-items: center;
align-items : center;
justify-items : center;
.sidebar-panel-nav {
width: 286px;
height: 100px;
border-radius: 2px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
width : 286px;
height : 100px;
border-radius : 2px;
box-shadow : 0 2px 4px 0 rgba(0, 0, 0, 0.5);
background-color: #808e96;
margin: 10px 30px;
margin : 10px 30px;
.text-box-paddle {
display: flex;
width: 268px;
height: 78px;
font-family: WorkSans;
font-size: 18px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
display : flex;
width : 268px;
height : 78px;
font-family : WorkSans;
font-size : 18px;
font-weight : 500;
font-stretch : normal;
font-style : normal;
line-height : normal;
letter-spacing: normal;
color: #ffffff;
margin: 10px;
color : #ffffff;
margin : 10px;
i {
text-align: end;
width: 50px;
color: #bbbcbc;
width : 50px;
color : #bbbcbc;
}
label {
width: 117px;
width : 117px;
margin: 10px;
}
@@ -167,7 +174,7 @@ body {
.text-box-paddle.text-soft {
label {
width: 100%;
width : 100%;
align-self: center;
}
}
@@ -179,8 +186,6 @@ body {
}
}
}
Thermo.Active/wwwroot/assets/styles/style.css
+8 -8
View File
@@ -4977,8 +4977,11 @@ body {
}
.container #app nav {
position: absolute;
top: 50%;
right: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.container #app nav .active button {
transform: translate(-761px, 0px);
@@ -5014,21 +5017,18 @@ body {
margin: 2px;
background: #002680;
}
.container #app .sidebar .sidebar-backdrop {
.container #app .sidebar {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
}
.container #app .sidebar .sidebar-panel {
overflow-y: auto;
background-color: #130f40;
position: fixed;
right: 0;
top: 141px;
height: 100vh;
z-index: 900;
padding: 3rem 20px 2rem 20px;
width: 721px;
Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
+66 -73
View File
@@ -1,80 +1,73 @@
<template>
<div class="sidebar">
<div class="sidebar-backdrop" @click="closeSidebarPanel()" v-if="isPanelOpen()"></div>
<!-- <transition name="slide"> -->
<transition>
<div v-if="isPanelOpen()" class="sidebar-panel">
<div class="sidebar">
<!-- <transition> -->
<div v-if="isPanelOpen()" class="sidebar-panel">
<div class="text-head-sidebar">
<label>Pulsanti personalizzati</label>
</div>
<div class="text-head-sidebar">
<label>Pulsanti personalizzati</label>
</div>
<div class="box-sidebar-panel">
<div class="sidebar-panel-nav">
<div class="text-box-paddle">
<img src="assets/icons/svg/paddle-riscaldo.svg" />
<label>Estensione riscaldo 20 secondi</label>
<i class="fa fa-cog gear-box-paddle"></i>
</div>
</div>
<div class="sidebar-panel-nav">
<div class="text-box-paddle">
<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>
</div>
</div>
</div>
<div class="box-sidebar-panel">
<div class="sidebar-panel-nav">
<div class="text-box-paddle">
<img src="assets/icons/svg/paddle-riscaldo.svg" />
<label>Estensione riscaldo 20 secondi</label>
<i class="fa fa-cog gear-box-paddle"></i>
</div>
</div>
<div class="sidebar-panel-nav">
<div class="text-box-paddle">
<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>
</div>
</div>
</div>
<div class="text-head-sidebar">
<label>Soft keys</label>
</div>
<div class="text-head-sidebar">
<label>Soft keys</label>
</div>
<div class="box-sidebar-panel">
<div class="sidebar-panel-nav">
<div class="text-box-paddle text-soft">
<label>Nome azione soft key</label>
</div>
</div>
<div class="sidebar-panel-nav">
<div class="text-box-paddle text-soft">
<label>Nome azione soft key</label>
</div>
</div>
<div class="sidebar-panel-nav">
<div class="text-box-paddle text-soft">
<label>Nome azione soft key</label>
</div>
</div>
<div class="sidebar-panel-nav">
<div class="text-box-paddle text-soft">
<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>
<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>
<label>Nome azione soft key</label>
</div>
</div>
<div class="sidebar-panel-nav">
<div class="text-box-paddle text-soft">
<label>Nome azione soft key</label>
</div>
</div>
</div>
<!-- <i class="fa fa-cog gear-sidebar-paddle"></i> -->
</div>
</transition>
<div class="box-sidebar-panel">
<div class="sidebar-panel-nav">
<div class="text-box-paddle text-soft">
<label>Nome azione soft key</label>
</div>
</div>
<div class="sidebar-panel-nav">
<div class="text-box-paddle text-soft">
<label>Nome azione soft key</label>
</div>
</div>
<div class="sidebar-panel-nav">
<div class="text-box-paddle text-soft">
<label>Nome azione soft key</label>
</div>
</div>
<div class="sidebar-panel-nav">
<div class="text-box-paddle text-soft">
<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>
<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>
<label>Nome azione soft key</label>
</div>
</div>
<div class="sidebar-panel-nav">
<div class="text-box-paddle text-soft">
<label>Nome azione soft key</label>
</div>
</div>
</div>
</div>
<!-- </transition> -->
</div>
</template>
<script lang="ts" src="./sidebar.ts" />