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

Merge pull request #241 from JsSucks/emote-stuff 

Support more then 10 items in autocomplete with scrolling
This commit is contained in:
Alexei Stukov 2018-08-22 21:49:51 +03:00 committed by GitHub
parent a1e32f8b89 d92da4b6e4
commit 1e9b1618f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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 {
type: 'imagetext',
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 {
key: acType ? mu.key : mu.name,
value: {

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

@ -9,6 +9,7 @@
position: absolute;
right: 0;
background-color: #2f3136;
max-height: 370px;
.bd-acInner {
padding-bottom: 8px;
@ -86,4 +87,31 @@
border-top-left-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;
}
}
}

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

@ -20,12 +20,14 @@
</div>
</div>
</div>
<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-acField">
<img v-if="search.type === 'imagetext'" :src="item.src || item.value.src" :alt="item.key || item.text || item.alt" />
<div class="bd-flexGrow">{{item.key || item.text}}</div>
<div class="bd-acHint" v-if="item.hint || (item.value && item.value.hint)">{{item.hint || item.value.hint}}</div>
<div class="bd-acScroller" ref="scroller">
<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-acField">
<img v-if="search.type === 'imagetext'" :src="item.src || item.value.src" :alt="item.key || item.text || item.alt" />
<div class="bd-flexGrow">{{item.key || item.text}}</div>
<div class="bd-acHint" v-if="item.hint || (item.value && item.value.hint)">{{item.hint || item.value.hint}}</div>
</div>
</div>
</div>
</div>
@ -106,11 +108,13 @@
traverse(key) {
if (!this.open) return;
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;
}
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;
}
},