feat: added vuescroll
This commit is contained in:
parent
964712905b
commit
a7fc560573
@ -17,6 +17,7 @@ import { getMainDefinition } from 'apollo-utilities'
|
|||||||
import VueApollo from 'vue-apollo'
|
import VueApollo from 'vue-apollo'
|
||||||
import Vuetify from 'vuetify'
|
import Vuetify from 'vuetify'
|
||||||
import Velocity from 'velocity-animate'
|
import Velocity from 'velocity-animate'
|
||||||
|
import Vuescroll from 'vuescroll/dist/vuescroll-native'
|
||||||
import Hammer from 'hammerjs'
|
import Hammer from 'hammerjs'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import VueMoment from 'vue-moment'
|
import VueMoment from 'vue-moment'
|
||||||
@ -147,6 +148,7 @@ Vue.use(helpers)
|
|||||||
Vue.use(VeeValidate, { events: '' })
|
Vue.use(VeeValidate, { events: '' })
|
||||||
Vue.use(Vuetify)
|
Vue.use(Vuetify)
|
||||||
Vue.use(VueMoment, { moment })
|
Vue.use(VueMoment, { moment })
|
||||||
|
Vue.use(Vuescroll)
|
||||||
Vue.use(VueTour)
|
Vue.use(VueTour)
|
||||||
|
|
||||||
Vue.prototype.Velocity = Velocity
|
Vue.prototype.Velocity = Velocity
|
||||||
|
@ -2,79 +2,80 @@
|
|||||||
v-app(:dark='darkMode').admin
|
v-app(:dark='darkMode').admin
|
||||||
nav-header
|
nav-header
|
||||||
v-navigation-drawer.pb-0.admin-sidebar(v-model='adminDrawerShown', app, fixed, clipped, left, permanent)
|
v-navigation-drawer.pb-0.admin-sidebar(v-model='adminDrawerShown', app, fixed, clipped, left, permanent)
|
||||||
v-list(dense)
|
vue-scroll(:ops='scrollStyle')
|
||||||
v-list-tile.pt-2(to='/dashboard')
|
v-list(dense)
|
||||||
v-list-tile-avatar: v-icon dashboard
|
v-list-tile.pt-2(to='/dashboard')
|
||||||
v-list-tile-title {{ $t('admin:dashboard.title') }}
|
v-list-tile-avatar: v-icon dashboard
|
||||||
v-divider.my-2
|
v-list-tile-title {{ $t('admin:dashboard.title') }}
|
||||||
v-subheader.pl-4 {{ $t('admin:nav.site') }}
|
v-divider.my-2
|
||||||
v-list-tile(to='/general')
|
v-subheader.pl-4 {{ $t('admin:nav.site') }}
|
||||||
v-list-tile-avatar: v-icon widgets
|
v-list-tile(to='/general')
|
||||||
v-list-tile-title {{ $t('admin:general.title') }}
|
v-list-tile-avatar: v-icon widgets
|
||||||
v-list-tile(to='/locale')
|
v-list-tile-title {{ $t('admin:general.title') }}
|
||||||
v-list-tile-avatar: v-icon language
|
v-list-tile(to='/locale')
|
||||||
v-list-tile-title {{ $t('admin:locale.title') }}
|
v-list-tile-avatar: v-icon language
|
||||||
v-list-tile(to='/navigation')
|
v-list-tile-title {{ $t('admin:locale.title') }}
|
||||||
v-list-tile-avatar: v-icon near_me
|
v-list-tile(to='/navigation')
|
||||||
v-list-tile-title {{ $t('admin:navigation.title') }}
|
v-list-tile-avatar: v-icon near_me
|
||||||
v-list-tile(to='/pages')
|
v-list-tile-title {{ $t('admin:navigation.title') }}
|
||||||
v-list-tile-avatar: v-icon insert_drive_file
|
v-list-tile(to='/pages')
|
||||||
v-list-tile-title {{ $t('admin:pages.title') }}
|
v-list-tile-avatar: v-icon insert_drive_file
|
||||||
v-list-tile-action
|
v-list-tile-title {{ $t('admin:pages.title') }}
|
||||||
v-chip(small, disabled, color='grey lighten-4')
|
v-list-tile-action
|
||||||
.caption.grey--text 123
|
v-chip(small, disabled, color='grey lighten-4')
|
||||||
v-list-tile(to='/theme')
|
.caption.grey--text 123
|
||||||
v-list-tile-avatar: v-icon palette
|
v-list-tile(to='/theme')
|
||||||
v-list-tile-title {{ $t('admin:theme.title') }}
|
v-list-tile-avatar: v-icon palette
|
||||||
v-divider.my-2
|
v-list-tile-title {{ $t('admin:theme.title') }}
|
||||||
v-subheader.pl-4 {{ $t('admin:nav.users') }}
|
v-divider.my-2
|
||||||
v-list-tile(to='/groups')
|
v-subheader.pl-4 {{ $t('admin:nav.users') }}
|
||||||
v-list-tile-avatar: v-icon people
|
v-list-tile(to='/groups')
|
||||||
v-list-tile-title {{ $t('admin:groups.title') }}
|
v-list-tile-avatar: v-icon people
|
||||||
v-list-tile(to='/users')
|
v-list-tile-title {{ $t('admin:groups.title') }}
|
||||||
v-list-tile-avatar: v-icon perm_identity
|
v-list-tile(to='/users')
|
||||||
v-list-tile-title {{ $t('admin:users.title') }}
|
v-list-tile-avatar: v-icon perm_identity
|
||||||
v-list-tile-action
|
v-list-tile-title {{ $t('admin:users.title') }}
|
||||||
v-chip(small, disabled, color='grey lighten-4')
|
v-list-tile-action
|
||||||
.caption.grey--text 1
|
v-chip(small, disabled, color='grey lighten-4')
|
||||||
v-divider.my-2
|
.caption.grey--text 1
|
||||||
v-subheader.pl-4 {{ $t('admin:nav.modules') }}
|
v-divider.my-2
|
||||||
v-list-tile(to='/auth')
|
v-subheader.pl-4 {{ $t('admin:nav.modules') }}
|
||||||
v-list-tile-avatar: v-icon lock_outline
|
v-list-tile(to='/auth')
|
||||||
v-list-tile-title {{ $t('admin:auth.title') }}
|
v-list-tile-avatar: v-icon lock_outline
|
||||||
v-list-tile(to='/editor')
|
v-list-tile-title {{ $t('admin:auth.title') }}
|
||||||
v-list-tile-avatar: v-icon transform
|
v-list-tile(to='/editor')
|
||||||
v-list-tile-title {{ $t('admin:editor.title') }}
|
v-list-tile-avatar: v-icon transform
|
||||||
v-list-tile(to='/logging')
|
v-list-tile-title {{ $t('admin:editor.title') }}
|
||||||
v-list-tile-avatar: v-icon graphic_eq
|
v-list-tile(to='/logging')
|
||||||
v-list-tile-title {{ $t('admin:logging.title') }}
|
v-list-tile-avatar: v-icon graphic_eq
|
||||||
v-list-tile(to='/rendering')
|
v-list-tile-title {{ $t('admin:logging.title') }}
|
||||||
v-list-tile-avatar: v-icon system_update_alt
|
v-list-tile(to='/rendering')
|
||||||
v-list-tile-title {{ $t('admin:rendering.title') }}
|
v-list-tile-avatar: v-icon system_update_alt
|
||||||
v-list-tile(to='/search')
|
v-list-tile-title {{ $t('admin:rendering.title') }}
|
||||||
v-list-tile-avatar: v-icon search
|
v-list-tile(to='/search')
|
||||||
v-list-tile-title {{ $t('admin:search.title') }}
|
v-list-tile-avatar: v-icon search
|
||||||
v-list-tile(to='/storage')
|
v-list-tile-title {{ $t('admin:search.title') }}
|
||||||
v-list-tile-avatar: v-icon storage
|
v-list-tile(to='/storage')
|
||||||
v-list-tile-title {{ $t('admin:storage.title') }}
|
v-list-tile-avatar: v-icon storage
|
||||||
v-divider.my-2
|
v-list-tile-title {{ $t('admin:storage.title') }}
|
||||||
v-subheader.pl-4 {{ $t('admin:nav.system') }}
|
v-divider.my-2
|
||||||
v-list-tile(to='/api')
|
v-subheader.pl-4 {{ $t('admin:nav.system') }}
|
||||||
v-list-tile-avatar: v-icon call_split
|
v-list-tile(to='/api')
|
||||||
v-list-tile-title {{ $t('admin:api.title') }}
|
v-list-tile-avatar: v-icon call_split
|
||||||
v-list-tile(to='/system')
|
v-list-tile-title {{ $t('admin:api.title') }}
|
||||||
v-list-tile-avatar: v-icon tune
|
v-list-tile(to='/system')
|
||||||
v-list-tile-title {{ $t('admin:system.title') }}
|
v-list-tile-avatar: v-icon tune
|
||||||
v-list-tile(to='/utilities')
|
v-list-tile-title {{ $t('admin:system.title') }}
|
||||||
v-list-tile-avatar: v-icon build
|
v-list-tile(to='/utilities')
|
||||||
v-list-tile-title {{ $t('admin:utilities.title') }}
|
v-list-tile-avatar: v-icon build
|
||||||
v-list-tile(to='/dev')
|
v-list-tile-title {{ $t('admin:utilities.title') }}
|
||||||
v-list-tile-avatar: v-icon weekend
|
v-list-tile(to='/dev')
|
||||||
v-list-tile-title {{ $t('admin:dev.title') }}
|
v-list-tile-avatar: v-icon weekend
|
||||||
v-divider.my-2
|
v-list-tile-title {{ $t('admin:dev.title') }}
|
||||||
v-list-tile(to='/contribute')
|
v-divider.my-2
|
||||||
v-list-tile-avatar: v-icon favorite
|
v-list-tile(to='/contribute')
|
||||||
v-list-tile-title {{ $t('admin:contribute.title') }}
|
v-list-tile-avatar: v-icon favorite
|
||||||
|
v-list-tile-title {{ $t('admin:contribute.title') }}
|
||||||
|
|
||||||
v-content(:class='darkMode ? "grey darken-4" : ""')
|
v-content(:class='darkMode ? "grey darken-4" : ""')
|
||||||
transition(name='admin-router')
|
transition(name='admin-router')
|
||||||
@ -119,7 +120,27 @@ export default {
|
|||||||
i18nOptions: { namespaces: 'admin' },
|
i18nOptions: { namespaces: 'admin' },
|
||||||
data() {
|
data() {
|
||||||
return {
|
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: {
|
computed: {
|
||||||
|
@ -5,6 +5,7 @@
|
|||||||
|
|
||||||
@import "../libs/animate/animate";
|
@import "../libs/animate/animate";
|
||||||
@import '~vue2-animate/src/sass/vue2-animate';
|
@import '~vue2-animate/src/sass/vue2-animate';
|
||||||
|
@import '~vuescroll/dist/vuescroll.css';
|
||||||
@import '~diff2html/dist/diff2html.min.css';
|
@import '~diff2html/dist/diff2html.min.css';
|
||||||
|
|
||||||
@import 'components/v-btn';
|
@import 'components/v-btn';
|
||||||
|
@ -11,8 +11,9 @@
|
|||||||
:temporary='$vuetify.breakpoint.xs'
|
:temporary='$vuetify.breakpoint.xs'
|
||||||
v-model='navShown'
|
v-model='navShown'
|
||||||
)
|
)
|
||||||
nav-sidebar
|
vue-scroll(:ops='scrollStyle')
|
||||||
slot(name='sidebar')
|
nav-sidebar
|
||||||
|
slot(name='sidebar')
|
||||||
|
|
||||||
v-content
|
v-content
|
||||||
template(v-if='path !== `home`')
|
template(v-if='path !== `home`')
|
||||||
@ -182,7 +183,25 @@ export default {
|
|||||||
{ path: '/universe/galaxy', name: 'Galaxy' },
|
{ path: '/universe/galaxy', name: 'Galaxy' },
|
||||||
{ path: '/universe/galaxy/solar-system', name: 'Solar System' },
|
{ path: '/universe/galaxy/solar-system', name: 'Solar System' },
|
||||||
{ path: '/universe/galaxy/solar-system/planet-earth', name: 'Planet Earth' }
|
{ 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: {
|
computed: {
|
||||||
|
@ -269,6 +269,7 @@
|
|||||||
"vue-tour": "1.1.0",
|
"vue-tour": "1.1.0",
|
||||||
"vue2-animate": "2.1.0",
|
"vue2-animate": "2.1.0",
|
||||||
"vuedraggable": "2.16.0",
|
"vuedraggable": "2.16.0",
|
||||||
|
"vuescroll": "4.9.0-beta.14",
|
||||||
"vuetify": "1.3.8",
|
"vuetify": "1.3.8",
|
||||||
"vuex": "3.0.1",
|
"vuex": "3.0.1",
|
||||||
"vuex-pathify": "1.1.3",
|
"vuex-pathify": "1.1.3",
|
||||||
|
@ -15349,6 +15349,11 @@ vuedraggable@2.16.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
sortablejs "^1.7.0"
|
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:
|
vuetify@1.3.8:
|
||||||
version "1.3.8"
|
version "1.3.8"
|
||||||
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.3.8.tgz#e56832f40e5043470e2100a1501463d5a1ca6d8e"
|
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.3.8.tgz#e56832f40e5043470e2100a1501463d5a1ca6d8e"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user