summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DashboardPage.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/DashboardPage.vue')
-rw-r--r--webapp/src/components/DashboardPage.vue93
1 files changed, 15 insertions, 78 deletions
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 83fda1a..19d8f44 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -17,16 +17,8 @@
<template>
<v-app :dark="settings.dark" :class="{ 'no-animation': settings.noAnimations }">
- <v-touch
- @panstart="drawerDragStart"
- @panmove="drawerDragMove"
- @panend="drawerDragEnd"
- @pancancel="drawerDragEnd"
- :pan-options="{ direction: 'horizontal', threshold: 0 }"
- class="drawer-handle-closed"
- ></v-touch>
+
<v-navigation-drawer
- style="z-index: 11;"
class="drawer non-selectable"
:style="drawerDraggingStyle"
persistent
@@ -36,19 +28,12 @@
fixed
width="250"
app
- touchless
>
- <v-touch
- @panstart="drawerDragStart"
- @panmove="drawerDragMove"
- @panend="drawerDragEnd"
- @pancancel="drawerDragEnd"
- :pan-options="{ direction: 'horizontal', threshold: 0 }"
- class="drawer-handle-open"
- >
- <div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
+ <div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
+ <div v-for="category in categories" :key="category.name">
+ <div class="dashboard-category text--secondary">{{ desktop && drawerMini ? '' : $t('$dashboardCategories.' + category.name) }}</div>
<v-list>
- <v-list-tile ripple v-for="module in modules" :key="module.name" :to="{ name: module.name }">
+ <v-list-tile ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
<v-list-tile-action>
<v-icon v-html="module.icon"></v-icon>
</v-list-tile-action>
@@ -57,7 +42,8 @@
</v-list-tile-content>
</v-list-tile>
</v-list>
- </v-touch>
+ <v-divider></v-divider>
+ </div>
</v-navigation-drawer>
<v-toolbar :height="$vuetify.breakpoint.smAndDown ? 56 : 64" dark app :clipped-left="settings.clipped" class="non-selectable" style="z-index: 10;" id="topbar">
@@ -110,7 +96,7 @@ import NotificationsAlerts from '@/components/NotificationsAlerts'
import NotificationsSnackbars from '@/components/NotificationsSnackbars'
import AccountModule from '@/components/AccountModule'
import SettingsModule from '@/components/SettingsModule'
-import dashboardModules from '@/config/dashboard'
+import dashboardCategories from '@/config/dashboard'
export default {
name: 'DashboardPage',
@@ -127,13 +113,10 @@ export default {
},
data () {
return {
- modules: dashboardModules,
+ categories: dashboardCategories,
dragging: false,
- drawerWidth: 250,
- drawerTranslateX: 0,
drawerMini: localStorage.getItem('drawerMini') === 'true',
- drawerOpen: localStorage.getItem('drawerOpen') !== 'false',
- clientCount: 0
+ drawerOpen: localStorage.getItem('drawerOpen') !== 'false'
}
},
computed: {
@@ -141,15 +124,6 @@ export default {
...mapGetters(['user']),
mini () { return this.settings.mini },
desktop () { return this.$vuetify.breakpoint.lgAndUp },
- drawerDraggingStyle () {
- var style = {}
- if (this.dragging) {
- style.transition = 'none'
- if (this.settings.mini && this.desktop) style.width = this.drawerWidth + 'px'
- else style.transform = 'translateX(' + this.drawerTranslateX + 'px)'
- }
- return style
- },
devMode () { return localStorage.getItem('dev') === 'true' }
},
watch: {
@@ -171,30 +145,6 @@ export default {
if (this.settings.mini && this.desktop) this.drawerMini = !this.drawerMini
else this.drawerOpen = !this.drawerOpen
},
- drawerDragStart (event) {
- if (this.settings.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) {
- if (this.settings.mini && this.desktop) {
- let newX = this.drawerStartWidth + event.deltaX
- if (newX >= 80 && newX <= 250) this.drawerWidth = newX
- } else {
- let newX = this.drawerTranslateStartX + event.deltaX
- if (newX <= 0 && newX >= -250) this.drawerTranslateX = newX
- }
- },
- drawerDragEnd (event) {
- this.dragging = false
- if (this.settings.mini && this.desktop) {
- 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/authentication/logout').then(response => {
this.setLoginRedirect(this.$route.fullPath)
@@ -212,6 +162,10 @@ export default {
<style scoped>
+.dashboard-category {
+ padding: 16px 0 0 32px;
+}
+
.logo {
height: 100%;
overflow: hidden;
@@ -224,24 +178,7 @@ export default {
}
.drawer {
- height: 100vh !important;
-}
-
-.drawer-handle-closed {
- position: fixed;
- height: 100vh;
- top: 0;
- left: 0;
- width: 15px;
- z-index: 1000;
- /* border: 2px red solid; */
-}
-
-.drawer-handle-open {
- position: absolute;
- height: 100%;
- width: 100%;
- /* border: 2px red solid; */
+ z-index: 11;
}
.drawer-header {