lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Support more then 10 items in autocomplete with scrolling

This commit is contained in:
Jiiks 2018-08-22 21:45:32 +03:00
parent a1e32f8b89
commit d92da4b6e4
3 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/builtin/EmoteAc.js
View File

@ -42,7 +42,7 @@ export default new class EmoteAc extends BuiltinModule {
return { return {
type: 'imagetext', type: 'imagetext',
title: [`Your ${acType ? 'most used' : 'favourite'} emotes`, '', `⬅ ${acType ? 'Favourites' : 'Most Used'} ⮕`], title: [`Your ${acType ? 'most used' : 'favourite'} emotes`, '', `⬅ ${acType ? 'Favourites' : 'Most Used'} ⮕`],
items: EmoteModule[acType ? 'mostUsed' : 'favourites'].sort((a, b) => b.useCount - a.useCount).slice(0, 10).map(mu => { items: EmoteModule[acType ? 'mostUsed' : 'favourites'].sort((a, b) => b.useCount - a.useCount).map(mu => {
return { return {
key: acType ? mu.key : mu.name, key: acType ? mu.key : mu.name,
value: { value: {

28
client/src/styles/partials/generic/autocomplete.scss
View File

@ -9,6 +9,7 @@
position: absolute; position: absolute;
right: 0; right: 0;
background-color: #2f3136; background-color: #2f3136;
max-height: 370px;
.bd-acInner { .bd-acInner {
padding-bottom: 8px; padding-bottom: 8px;
@ -86,4 +87,31 @@
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.bd-acScroller {
overflow-x: hidden;
overflow-y: auto;
max-height: 320px;
&::-webkit-scrollbar {
width: 14px;
}
&::-webkit-scrollbar-thumb {
background-color: #202225;
border: 3px solid #2f3136;
}
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track-piece {
background-clip: padding-box;
border-radius: 7px;
}
&::-webkit-scrollbar-track-piece {
background-color: #2f3136;
border-color: #2f3136;
border: 3px solid #2f3136;
}
}
} }

8
client/src/ui/components/common/Autocomplete.vue
View File

@ -20,6 +20,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bd-acScroller" ref="scroller">
<div v-for="(item, index) in search.items" class="bd-acRow" @mouseover="selectedIndex = index" @click="inject"> <div v-for="(item, index) in search.items" class="bd-acRow" @mouseover="selectedIndex = index" @click="inject">
<div class="bd-acSelector bd-selectable" :class="{'bd-selected': index === selectedIndex}"> <div class="bd-acSelector bd-selectable" :class="{'bd-selected': index === selectedIndex}">
<div class="bd-acField"> <div class="bd-acField">
@ -31,6 +32,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -106,11 +108,13 @@
traverse(key) { traverse(key) {
if (!this.open) return; if (!this.open) return;
if (key === 'ArrowUp') { if (key === 'ArrowUp') {
this.selectedIndex = (this.selectedIndex - 1) < 0 ? Math.min(this.search.items.length, 10) - 1 : this.selectedIndex - 1; this.selectedIndex = (this.selectedIndex - 1) < 0 ? this.search.items.length - 1 : this.selectedIndex - 1;
this.$refs.scroller.scrollTop = (this.selectedIndex + 1) * 32 - 320;
return; return;
} }
if (key === 'ArrowDown') { if (key === 'ArrowDown') {
this.selectedIndex = (this.selectedIndex + 1) >= Math.min(this.search.items.length, 10) ? 0 : this.selectedIndex + 1; this.selectedIndex = (this.selectedIndex + 1) >= this.search.items.length ? 0 : this.selectedIndex + 1;
this.$refs.scroller.scrollTop = (this.selectedIndex + 1) * 32 - 320;
return; return;
} }
}, },