diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 46 | ||||
| -rw-r--r-- | src/components/user_reporting_modal/user_reporting_modal.vue | 11 | ||||
| -rw-r--r-- | src/main.js | 2 |
3 files changed, 54 insertions, 5 deletions
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 @@ </div> </div> </div> - <div class="user-reporting-panel-right"> - <div v-for="status in statuses" :key="status.id" class="status-fadein user-reporting-panel-sitem"> - <Status :inConversation="false" :focused="false" :statusoid="status" /> - <Checkbox :checked="isChecked(status.id)" @change="checked => toggleStatus(checked, status.id)" /> + <div class="user-reporting-panel-right" v-bar> + <div> + <div v-for="status in statuses" :key="status.id" class="status-fadein user-reporting-panel-sitem"> + <Status :inConversation="false" :focused="false" :statusoid="status" /> + <Checkbox :checked="isChecked(status.id)" @change="checked => toggleStatus(checked, status.id)" /> + </div> </div> </div> </div> @@ -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 |