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

swipe sul pannelllo principale - prima versione

Browse Source
This commit is contained in:
Paolo Possanzini
2018-01-11 15:00:58 +01:00
parent def81d8720
commit 5b693fd86e
9 changed files with 87 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/assets/styles/base/alarms.less
+1 -1
View File
@@ -9,7 +9,7 @@
top: 40px;
background-color: #fff;
padding: 0 0;
transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out;
transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out;
z-index: 150;
box-shadow: @color-alarm-list-shadow;
box-sizing: border-box;
Step/wwwroot/assets/styles/base/footer.less
+1 -1
View File
@@ -10,7 +10,7 @@
@footer-machine-area-size: 300px;
footer {
position: absolute;
z-index: 200;
z-index: 300;
bottom: 0;
left: 0;
right: 0;
Step/wwwroot/assets/styles/base/header.less
+19 -18
View File
@@ -64,32 +64,33 @@
color:white;
}
button.profile {
width: @header-button-size;
background-image: url(../profile.png);
background-size: cover;
width: @header-button-size;
background-image: url(../profile.png);
background-size: cover;
}
&.turn-up .user-info time {
color:#fff;
}
.user-info {
display: flex;
position: absolute;
right: 12px;
font-size: 25px;
color: @color-input-light;
.window-buttons,
time {
transition: color 200ms ease-in-out;
margin-left: 10px;
padding: 0 18px;
border-left: 2px solid #bbbcbc;
display: flex;
position: absolute;
right: 12px;
font-size: 25px;
color: @color-input-light;
.window-buttons,
time {
margin-left: 10px;
padding: 0 18px;
border-left: 2px solid #bbbcbc;
display: flex;
justify-content: center;
align-items: center;
i {
margin-right: 10px;
}
justify-content: center;
align-items: center;
i {
margin-right: 10px;
}
}
}
.window-buttons {
position: relative;
Step/wwwroot/assets/styles/base/layout.less
+6 -8
View File
@@ -67,6 +67,7 @@ body {
left: 0;
right: 0;
bottom: 80px;
box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.2);
height: calc(~'100vh - 80px');
background-color: @background-color;
z-index: 100;
@@ -76,18 +77,18 @@ body {
}
}
#main-view.turn-up {
transform: translateY(-100vh);
#main-view.turn-up, #main-view-handler.turn-up {
transform: translateY(calc(~'-100vh + 84px'));
}
#main-view-handler {
position: absolute;
top: -100px;
bottom: 80px;
left: 0;
width: 100vw;
box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.4);
z-index: 300;
transition: 0.5s 0.5s ease-out;
z-index: 250;
transition: 0.5s ease-out;
.handle {
background-color: @background-color;
display: block;
@@ -107,9 +108,6 @@ body {
}
}
#main-view-handler.turn-up {
transform: translateY(100px);
}
#back-view {
position: absolute;
Step/wwwroot/assets/styles/style.css
+9 -9
View File
@@ -389,6 +389,7 @@ button.square {
}
#app > header .user-info .window-buttons,
#app > header .user-info time {
transition: color 200ms ease-in-out;
margin-left: 10px;
padding: 0 18px;
border-left: 2px solid #bbbcbc;
@@ -605,7 +606,7 @@ button.square {
}
footer {
position: absolute;
z-index: 200;
z-index: 300;
bottom: 0;
left: 0;
right: 0;
@@ -926,6 +927,7 @@ body {
left: 0;
right: 0;
bottom: 80px;
box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.2);
height: calc(100vh - 80px);
background-color: #d8d8d8;
z-index: 100;
@@ -934,17 +936,18 @@ body {
#main-view .handle {
display: none;
}
#main-view.turn-up {
transform: translateY(-100vh);
#main-view.turn-up,
#main-view-handler.turn-up {
transform: translateY(calc(-100vh + 84px));
}
#main-view-handler {
position: absolute;
top: -100px;
bottom: 80px;
left: 0;
width: 100vw;
box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.4);
z-index: 300;
transition: 0.5s 0.5s ease-out;
z-index: 250;
transition: 0.5s ease-out;
}
#main-view-handler .handle {
background-color: #d8d8d8;
@@ -963,9 +966,6 @@ body {
line-height: 32px;
cursor: pointer;
}
#main-view-handler.turn-up {
transform: translateY(100px);
}
#back-view {
position: absolute;
top: 0;
Step/wwwroot/dist/1.build.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
Step/wwwroot/dist/build.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
Step/wwwroot/src/App.vue
+34 -10
View File
@@ -6,20 +6,23 @@
<div id="back-view">
<router-view name="backview"></router-view>
</div>
<div id="main-view-handler" :class="{'turn-up':state.isMainViewLiftedUp}" @click="toggleMainView()">
<vue-gesture :type="'swipedown'" :call="toggleMainView">
<div class="handle">
<i class="fa fa-angle-double-down"></i>
</div>
</vue-gesture>
</div>
<div id="main-view" :class="{'turn-up':state.isMainViewLiftedUp}">
<div id="main-view" ref="main-view">
<router-view/>
</div>
<div id="main-view-handler" ref="main-view-handler" @click="toggleMainView()">
<vue-gesture :type="'swipedown'" :call="toggleMainView" :onmove="movepanel">
<div class="handle">
<i class="fa fa-angle-double-down"></i>
</div>
</vue-gesture>
</div>
<app-footer></app-footer>
<!--
:class="{'turn-up':state.isMainViewLiftedUp}"
-->
<!-- Modali sempre disponibili -->
<!-- <login></login> -->
<!-- <user-info></user-info>
@@ -55,12 +58,22 @@ export default {
this.applyBlur = false;
});
this.$nextTick(() => ModalHelper.ShowModal(Login));
// this.$nextTick(() => ModalHelper.ShowModal(Login));
this.hub = new Hub();
},
computed: {
debugStore: function() {
return this.$store.state;
},
isMainViewLiftedUp: function() {
return this.$store.state.isMainViewLiftedUp;
}
},
watch: {
isMainViewLiftedUp: function() {
if (this.state.isMainViewLiftedUp)
this.applyViewPosition(-window.innerHeight + 82);
else this.applyViewPosition(0);
}
},
methods: {
@@ -69,6 +82,17 @@ export default {
},
toggleMainView() {
appModelActions.MainViewToggle(this.$store);
},
movepanel(e) {
if (e && e.touches && e.touches[0]) {
this.applyViewPosition(-window.innerHeight + 82 + e.touches[0].screenY, true);
}
},
applyViewPosition(position, removetransition) {
this.$refs["main-view"].style = this.$refs["main-view-handler"].style =
"transform:translateY(" +
position +
"px);" + (removetransition ? "transition:unset;" : "");
}
},
data: function() {
Step/wwwroot/src/_base/gestures.js
+14 -4
View File
@@ -1,7 +1,7 @@
import Vue from "vue";
// credit: http://www.javascriptkit.com/javatutors/touchevents2.shtml
function swipedetect(el, callback) {
function swipedetect(el, callback, onmovecallback) {
var touchsurface = el,
swipedir,
@@ -29,6 +29,10 @@ function swipedetect(el, callback) {
touchsurface.addEventListener('touchmove', function(e) {
e.preventDefault() // prevent scrolling when inside DIV
if (onmovecallback)
onmovecallback(e)
}, false)
touchsurface.addEventListener('touchend', function(e) {
@@ -51,17 +55,23 @@ function swipedetect(el, callback) {
Vue.component('vue-gesture', {
template: '<span><slot></slot></span>',
props: {
call: { type: Function }
call: { type: Function },
onmove: { type: Function }
},
mounted: function() {
var self = this;
if (typeof this.call !== 'function') {
console.log(this.call);
return console.error('The expression of directive "v-gesture" must be a function!');
return console.error('The expression of directive "v-gesture call" must be a function!');
}
if (this.onmove && typeof this.onmove !== 'function') {
console.log(this.call);
return console.error('The expression of directive "v-gesture onmove" must be a function!');
}
if (this.$el)
swipedetect(this.$el, this.call);
swipedetect(this.$el, this.call, this.onmove);
}
});