From 6b1e305a181386be11fde996abe66e3be5a35600 Mon Sep 17 00:00:00 2001 From: taehoon Date: Thu, 28 Mar 2019 14:11:52 -0400 Subject: [PATCH] use custom scrollbar --- package.json | 1 + src/App.scss | 46 ++++++++++++++++++- .../user_reporting_modal.vue | 11 +++-- src/main.js | 2 + yarn.lock | 4 ++ 5 files changed, 59 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index fcdea2c1..36dfda31 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "vue-router": "^3.0.1", "vue-template-compiler": "^2.3.4", "vue-timeago": "^3.1.2", + "vuebar": "^0.0.20", "vuelidate": "^0.7.4", "vuex": "^3.0.1", "whatwg-fetch": "^2.0.3" diff --git a/src/App.scss b/src/App.scss index 07b33f47..6d16c7c9 100644 --- a/src/App.scss +++ b/src/App.scss @@ -794,4 +794,48 @@ nav { background-color: var(--lightBg, $fallback--fg); } } -} \ No newline at end of file +} + +// Vuebar default style +.vb > .vb-dragger { + z-index: 5; + width: 12px; + right: 0; +} + +.vb > .vb-dragger > .vb-dragger-styler { + backface-visibility: hidden; + transform: rotate3d(0,0,0,0); + transition: + opacity 100ms ease-out, + margin 100ms ease-out, + height 100ms ease-out; + + background-color: $fallback--text; + background-color: var(--text, $fallback--text); + opacity: .1; + margin: 5px 5px 5px 0; + border-radius: 20px; + height: calc(100% - 10px); + display: block; +} + +.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler { + opacity: .3; +} + +.vb > .vb-dragger:hover > .vb-dragger-styler { + opacity: .5; + margin: 0px; + height: 100%; +} + +.vb.vb-dragging > .vb-dragger > .vb-dragger-styler { + opacity: .5; + margin: 0px; + height: 100%; +} + +.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler { + opacity: .5; +} diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue index becf882a..acd184cd 100644 --- a/src/components/user_reporting_modal/user_reporting_modal.vue +++ b/src/components/user_reporting_modal/user_reporting_modal.vue @@ -27,10 +27,12 @@ -
-
- - +
+
+
+ + +
@@ -111,6 +113,7 @@ border-bottom-style: solid; border-color: $fallback--border; border-color: var(--border, $fallback--border); + padding-right: 15px; > .status-el { flex: 1; diff --git a/src/main.js b/src/main.js index 92f843b1..e01c921c 100644 --- a/src/main.js +++ b/src/main.js @@ -16,6 +16,7 @@ import reportsModule from './modules/reports.js' import VueTimeago from 'vue-timeago' import VueI18n from 'vue-i18n' +import Vuebar from 'vuebar' import createPersistedState from './lib/persisted_state.js' import pushNotifications from './lib/push_notifications_plugin.js' @@ -42,6 +43,7 @@ Vue.use(VueTimeago, { Vue.use(VueI18n) Vue.use(VueChatScroll) Vue.use(VueClickOutside) +Vue.use(Vuebar) const i18n = new VueI18n({ // By default, use the browser locale, we will update it if neccessary diff --git a/yarn.lock b/yarn.lock index 69951563..0dd2173e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6491,6 +6491,10 @@ vue@^2.5.13: version "2.5.21" resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.21.tgz#3d33dcd03bb813912ce894a8303ab553699c4a85" +vuebar@^0.0.20: + version "0.0.20" + resolved "https://registry.yarnpkg.com/vuebar/-/vuebar-0.0.20.tgz#fd6313c2d3a2202c49e42419fe1d9ef126134200" + vuelidate@^0.7.4: version "0.7.4" resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.4.tgz#5a0e54be09ac0192f1aa3387d74b92e0945bf8aa"