From a7fc560573c21e6522a8814545ea76c97728f76d Mon Sep 17 00:00:00 2001 From: Nicolas Giard Date: Sun, 25 Nov 2018 22:10:20 -0500 Subject: [PATCH] feat: added vuescroll --- client/client-app.js | 2 + client/components/admin.vue | 169 ++++++++++++---------- client/scss/app.scss | 1 + client/themes/default/components/page.vue | 25 +++- package.json | 1 + yarn.lock | 5 + 6 files changed, 126 insertions(+), 77 deletions(-) diff --git a/client/client-app.js b/client/client-app.js index 9b08f91a..39bc03ee 100644 --- a/client/client-app.js +++ b/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 diff --git a/client/components/admin.vue b/client/components/admin.vue index 57674105..2c2d0e77 100644 --- a/client/components/admin.vue +++ b/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: { diff --git a/client/scss/app.scss b/client/scss/app.scss index faa049ad..33e6d38a 100644 --- a/client/scss/app.scss +++ b/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'; diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue index 62951e1d..b8ea868f 100644 --- a/client/themes/default/components/page.vue +++ b/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: { diff --git a/package.json b/package.json index 5d9ba49c..1016ee01 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 38a85ed3..f7684319 100644 --- a/yarn.lock +++ b/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"