darkkirb/akkoma-fe
1
0
Fork 0
forked from mirrors/akkoma-fe
Code Pull requests Activity

use custom scrollbar

Browse source
This commit is contained in:
taehoon 2019-03-28 14:11:52 -04:00
parent 01cc7e4480
commit 6b1e305a18
5 changed files with 59 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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"

46
src/App.scss
View file

@ -794,4 +794,48 @@ nav {
background-color: var(--lightBg, $fallback--fg);
}
}
}
}
// 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;
}

11
src/components/user_reporting_modal/user_reporting_modal.vue
View file

@ -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;

2
src/main.js
View file

@ -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

4
yarn.lock
View file

@ -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"