feat: added vuescroll

client/client-app.js

@@ -17,6 +17,7 @@ import { getMainDefinition } from 'apollo-utilities'
 import VueApollo from 'vue-apollo'
 import Vuetify from 'vuetify'
 import Velocity from 'velocity-animate'
+import Vuescroll from 'vuescroll/dist/vuescroll-native'
 import Hammer from 'hammerjs'
 import moment from 'moment'
 import VueMoment from 'vue-moment'
@@ -147,6 +148,7 @@ Vue.use(helpers)
 Vue.use(VeeValidate, { events: '' })
 Vue.use(Vuetify)
 Vue.use(VueMoment, { moment })
+Vue.use(Vuescroll)
 Vue.use(VueTour)
 
 Vue.prototype.Velocity = Velocity

client/components/admin.vue

@@ -2,79 +2,80 @@
   v-app(:dark='darkMode').admin
     nav-header
     v-navigation-drawer.pb-0.admin-sidebar(v-model='adminDrawerShown', app, fixed, clipped, left, permanent)
-      v-list(dense)
-        v-list-tile.pt-2(to='/dashboard')
-          v-list-tile-avatar: v-icon dashboard
-          v-list-tile-title {{ $t('admin:dashboard.title') }}
-        v-divider.my-2
-        v-subheader.pl-4 {{ $t('admin:nav.site') }}
-        v-list-tile(to='/general')
-          v-list-tile-avatar: v-icon widgets
-          v-list-tile-title {{ $t('admin:general.title') }}
-        v-list-tile(to='/locale')
-          v-list-tile-avatar: v-icon language
-          v-list-tile-title {{ $t('admin:locale.title') }}
-        v-list-tile(to='/navigation')
-          v-list-tile-avatar: v-icon near_me
-          v-list-tile-title {{ $t('admin:navigation.title') }}
-        v-list-tile(to='/pages')
-          v-list-tile-avatar: v-icon insert_drive_file
-          v-list-tile-title {{ $t('admin:pages.title') }}
-          v-list-tile-action
-            v-chip(small, disabled, color='grey lighten-4')
-              .caption.grey--text 123
-        v-list-tile(to='/theme')
-          v-list-tile-avatar: v-icon palette
-          v-list-tile-title {{ $t('admin:theme.title') }}
-        v-divider.my-2
-        v-subheader.pl-4 {{ $t('admin:nav.users') }}
-        v-list-tile(to='/groups')
-          v-list-tile-avatar: v-icon people
-          v-list-tile-title {{ $t('admin:groups.title') }}
-        v-list-tile(to='/users')
-          v-list-tile-avatar: v-icon perm_identity
-          v-list-tile-title {{ $t('admin:users.title') }}
-          v-list-tile-action
-            v-chip(small, disabled, color='grey lighten-4')
-              .caption.grey--text 1
-        v-divider.my-2
-        v-subheader.pl-4 {{ $t('admin:nav.modules') }}
-        v-list-tile(to='/auth')
-          v-list-tile-avatar: v-icon lock_outline
-          v-list-tile-title {{ $t('admin:auth.title') }}
-        v-list-tile(to='/editor')
-          v-list-tile-avatar: v-icon transform
-          v-list-tile-title {{ $t('admin:editor.title') }}
-        v-list-tile(to='/logging')
-          v-list-tile-avatar: v-icon graphic_eq
-          v-list-tile-title {{ $t('admin:logging.title') }}
-        v-list-tile(to='/rendering')
-          v-list-tile-avatar: v-icon system_update_alt
-          v-list-tile-title {{ $t('admin:rendering.title') }}
-        v-list-tile(to='/search')
-          v-list-tile-avatar: v-icon search
-          v-list-tile-title {{ $t('admin:search.title') }}
-        v-list-tile(to='/storage')
-          v-list-tile-avatar: v-icon storage
-          v-list-tile-title {{ $t('admin:storage.title') }}
-        v-divider.my-2
-        v-subheader.pl-4 {{ $t('admin:nav.system') }}
-        v-list-tile(to='/api')
-          v-list-tile-avatar: v-icon call_split
-          v-list-tile-title {{ $t('admin:api.title') }}
-        v-list-tile(to='/system')
-          v-list-tile-avatar: v-icon tune
-          v-list-tile-title {{ $t('admin:system.title') }}
-        v-list-tile(to='/utilities')
-          v-list-tile-avatar: v-icon build
-          v-list-tile-title {{ $t('admin:utilities.title') }}
-        v-list-tile(to='/dev')
-          v-list-tile-avatar: v-icon weekend
-          v-list-tile-title {{ $t('admin:dev.title') }}
-        v-divider.my-2
-        v-list-tile(to='/contribute')
-          v-list-tile-avatar: v-icon favorite
-          v-list-tile-title {{ $t('admin:contribute.title') }}
+      vue-scroll(:ops='scrollStyle')
+        v-list(dense)
+          v-list-tile.pt-2(to='/dashboard')
+            v-list-tile-avatar: v-icon dashboard
+            v-list-tile-title {{ $t('admin:dashboard.title') }}
+          v-divider.my-2
+          v-subheader.pl-4 {{ $t('admin:nav.site') }}
+          v-list-tile(to='/general')
+            v-list-tile-avatar: v-icon widgets
+            v-list-tile-title {{ $t('admin:general.title') }}
+          v-list-tile(to='/locale')
+            v-list-tile-avatar: v-icon language
+            v-list-tile-title {{ $t('admin:locale.title') }}
+          v-list-tile(to='/navigation')
+            v-list-tile-avatar: v-icon near_me
+            v-list-tile-title {{ $t('admin:navigation.title') }}
+          v-list-tile(to='/pages')
+            v-list-tile-avatar: v-icon insert_drive_file
+            v-list-tile-title {{ $t('admin:pages.title') }}
+            v-list-tile-action
+              v-chip(small, disabled, color='grey lighten-4')
+                .caption.grey--text 123
+          v-list-tile(to='/theme')
+            v-list-tile-avatar: v-icon palette
+            v-list-tile-title {{ $t('admin:theme.title') }}
+          v-divider.my-2
+          v-subheader.pl-4 {{ $t('admin:nav.users') }}
+          v-list-tile(to='/groups')
+            v-list-tile-avatar: v-icon people
+            v-list-tile-title {{ $t('admin:groups.title') }}
+          v-list-tile(to='/users')
+            v-list-tile-avatar: v-icon perm_identity
+            v-list-tile-title {{ $t('admin:users.title') }}
+            v-list-tile-action
+              v-chip(small, disabled, color='grey lighten-4')
+                .caption.grey--text 1
+          v-divider.my-2
+          v-subheader.pl-4 {{ $t('admin:nav.modules') }}
+          v-list-tile(to='/auth')
+            v-list-tile-avatar: v-icon lock_outline
+            v-list-tile-title {{ $t('admin:auth.title') }}
+          v-list-tile(to='/editor')
+            v-list-tile-avatar: v-icon transform
+            v-list-tile-title {{ $t('admin:editor.title') }}
+          v-list-tile(to='/logging')
+            v-list-tile-avatar: v-icon graphic_eq
+            v-list-tile-title {{ $t('admin:logging.title') }}
+          v-list-tile(to='/rendering')
+            v-list-tile-avatar: v-icon system_update_alt
+            v-list-tile-title {{ $t('admin:rendering.title') }}
+          v-list-tile(to='/search')
+            v-list-tile-avatar: v-icon search
+            v-list-tile-title {{ $t('admin:search.title') }}
+          v-list-tile(to='/storage')
+            v-list-tile-avatar: v-icon storage
+            v-list-tile-title {{ $t('admin:storage.title') }}
+          v-divider.my-2
+          v-subheader.pl-4 {{ $t('admin:nav.system') }}
+          v-list-tile(to='/api')
+            v-list-tile-avatar: v-icon call_split
+            v-list-tile-title {{ $t('admin:api.title') }}
+          v-list-tile(to='/system')
+            v-list-tile-avatar: v-icon tune
+            v-list-tile-title {{ $t('admin:system.title') }}
+          v-list-tile(to='/utilities')
+            v-list-tile-avatar: v-icon build
+            v-list-tile-title {{ $t('admin:utilities.title') }}
+          v-list-tile(to='/dev')
+            v-list-tile-avatar: v-icon weekend
+            v-list-tile-title {{ $t('admin:dev.title') }}
+          v-divider.my-2
+          v-list-tile(to='/contribute')
+            v-list-tile-avatar: v-icon favorite
+            v-list-tile-title {{ $t('admin:contribute.title') }}
 
     v-content(:class='darkMode ? "grey darken-4" : ""')
       transition(name='admin-router')
@@ -119,7 +120,27 @@ export default {
   i18nOptions: { namespaces: 'admin' },
   data() {
     return {
-      adminDrawerShown: true
+      adminDrawerShown: true,
+      scrollStyle: {
+        vuescroll: {},
+        scrollPanel: {
+          initialScrollY: 0,
+          initialScrollX: 0,
+          scrollingX: false,
+          easing: 'easeOutQuad',
+          speed: 1000
+        },
+        rail: {
+          gutterOfEnds: '2px'
+        },
+        bar: {
+          onlyShowBarOnScroll: false,
+          background: '#CCC',
+          hoverStyle: {
+            background: '#999'
+          }
+        }
+      }
     }
   },
   computed: {

client/scss/app.scss

@@ -5,6 +5,7 @@
 
 @import "../libs/animate/animate";
 @import '~vue2-animate/src/sass/vue2-animate';
+@import '~vuescroll/dist/vuescroll.css';
 @import '~diff2html/dist/diff2html.min.css';
 
 @import 'components/v-btn';

client/themes/default/components/page.vue

@@ -11,8 +11,9 @@
       :temporary='$vuetify.breakpoint.xs'
       v-model='navShown'
       )
-      nav-sidebar
-        slot(name='sidebar')
+      vue-scroll(:ops='scrollStyle')
+        nav-sidebar
+          slot(name='sidebar')
 
     v-content
       template(v-if='path !== `home`')
@@ -182,7 +183,25 @@ export default {
         { path: '/universe/galaxy', name: 'Galaxy' },
         { path: '/universe/galaxy/solar-system', name: 'Solar System' },
         { path: '/universe/galaxy/solar-system/planet-earth', name: 'Planet Earth' }
-      ]
+      ],
+      scrollStyle: {
+        vuescroll: {},
+        scrollPanel: {
+          initialScrollX: 0.01, // fix scrollbar not disappearing on load
+          scrollingX: false,
+          speed: 50
+        },
+        rail: {
+          gutterOfEnds: '2px'
+        },
+        bar: {
+          onlyShowBarOnScroll: false,
+          background: '#42A5F5',
+          hoverStyle: {
+            background: '#64B5F6'
+          }
+        }
+      }
     }
   },
   computed: {

package.json

@@ -269,6 +269,7 @@
     "vue-tour": "1.1.0",
     "vue2-animate": "2.1.0",
     "vuedraggable": "2.16.0",
+    "vuescroll": "4.9.0-beta.14",
     "vuetify": "1.3.8",
     "vuex": "3.0.1",
     "vuex-pathify": "1.1.3",

yarn.lock

@@ -15349,6 +15349,11 @@ vuedraggable@2.16.0:
   dependencies:
     sortablejs "^1.7.0"
 
+vuescroll@4.9.0-beta.14:
+  version "4.9.0-beta.14"
+  resolved "https://registry.yarnpkg.com/vuescroll/-/vuescroll-4.9.0-beta.14.tgz#09cd3707be0baebb71e6c11e3bf4fd649a204b65"
+  integrity sha512-3Z/zTa53/dlHYsSLyiKCGh6J26pMhl2CS0MU0hs+AiUT5SX10I9ZZow8OaVsLwXdNOPv4cPU63/5e+i8qDW7eA==
+
 vuetify@1.3.8:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.3.8.tgz#e56832f40e5043470e2100a1501463d5a1ca6d8e"