summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DashboardPage.vue
diff options
context:
space:
mode:
authorUdo Walter2018-07-04 03:44:51 +0200
committerUdo Walter2018-07-04 03:44:51 +0200
commit44070e74e4d001eb0cb2e04e379a62f62714b42f (patch)
treeca3b1356cf99281b6834f17da5d85ea839ce8243 /webapp/src/components/DashboardPage.vue
parent[webapp] updated node modules (diff)
downloadbas-44070e74e4d001eb0cb2e04e379a62f62714b42f.tar.gz
bas-44070e74e4d001eb0cb2e04e379a62f62714b42f.tar.xz
bas-44070e74e4d001eb0cb2e04e379a62f62714b42f.zip
[webapp/dashboard] fixed drawer touch bug
Diffstat (limited to 'webapp/src/components/DashboardPage.vue')
-rw-r--r--webapp/src/components/DashboardPage.vue42
1 files changed, 30 insertions, 12 deletions
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 4004147..6432a1f 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -35,7 +35,7 @@
></v-touch>
<v-navigation-drawer
class="drawer"
- :style="dragging && { transform: 'translateX(' + drawerTranslateX + 'px)', transition: 'none' }"
+ :style="drawerDraggingStyle"
persistent
:mini-variant="desktop && drawerMini"
:clipped="clipped && desktop"
@@ -48,6 +48,7 @@
@panstart="drawerDragStart"
@panmove="drawerDragMove"
@panend="drawerDragEnd"
+ @pancancel="drawerDragEnd"
:pan-options="{ direction: 'horizontal', threshold: 0 }"
class="drawer-handle-open"
>
@@ -122,8 +123,8 @@ export default {
data () {
return {
dragging: false,
+ drawerWidth: 250,
drawerTranslateX: 0,
- drawerStartX: 0,
drawerMini: localStorage.getItem('drawerMini') === 'true',
drawerOpen: localStorage.getItem('drawerOpen') !== 'false',
userFullName: ''
@@ -131,7 +132,16 @@ export default {
},
computed: {
...mapState(['dark', 'clipped', 'mini']),
- desktop () { return this.$vuetify.breakpoint.lgAndUp }
+ desktop () { return this.$vuetify.breakpoint.lgAndUp },
+ drawerDraggingStyle () {
+ var style = {}
+ if (this.dragging) {
+ style.transition = 'none'
+ if (this.mini) style.width = this.drawerWidth + 'px'
+ else style.transform = 'translateX(' + this.drawerTranslateX + 'px)'
+ }
+ return style
+ }
},
watch: {
mini (value) {
@@ -152,17 +162,29 @@ export default {
else this.drawerOpen = !this.drawerOpen
},
drawerDragStart (event) {
- this.drawerTranslateStartX = this.drawerTranslateX = this.drawerOpen ? 0 : -250
+ if (this.mini && this.desktop) this.drawerWidth = this.drawerStartWidth = this.drawerMini ? 80 : 250
+ else this.drawerTranslateStartX = this.drawerTranslateX = this.drawerOpen ? 0 : -250
this.dragging = true
},
drawerDragMove (event) {
- var newX = this.drawerTranslateStartX + event.deltaX
- if (newX <= 0 && newX >= -250) this.drawerTranslateX = newX
+ if (this.mini && this.desktop) {
+ var newX = this.drawerStartWidth + event.deltaX
+ if (newX >= 80 && newX <= 250) this.drawerWidth = newX
+ } else {
+ var newX = this.drawerTranslateStartX + event.deltaX
+ if (newX <= 0 && newX >= -250) this.drawerTranslateX = newX
+ }
},
drawerDragEnd (event) {
this.dragging = false
- if ((this.drawerTranslateX < -100 && event.velocityX <= 0) || event.velocityX < -0.4) this.drawerOpen = false
- else this.drawerOpen = true
+ if (this.mini) {
+ if ((this.drawerWidth < 100 && event.velocityX <= 0) || event.velocityX < -0.4) this.drawerMini = true
+ else this.drawerMini = false
+ } else {
+ if ((this.drawerTranslateX < -100 && event.velocityX <= 0) || event.velocityX < -0.4) this.drawerOpen = false
+ else this.drawerOpen = true
+ }
+
},
logout () {
this.$http.post('/api/logout').then(response => {
@@ -230,8 +252,4 @@ export default {
margin-right: 8px;
}
-.drawer-icon {
- margin-left: 16px !important;
-}
-
</style>