From d92da4b6e44c692e1a4d7cb3620d0fcb0ee6c0a1 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 22 Aug 2018 21:45:32 +0300
Subject: [PATCH] Support more then 10 items in autocomplete with scrolling

---
 client/src/builtin/EmoteAc.js                 |  2 +-
 .../styles/partials/generic/autocomplete.scss | 28 +++++++++++++++++++
 .../src/ui/components/common/Autocomplete.vue | 20 +++++++------
 3 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/client/src/builtin/EmoteAc.js b/client/src/builtin/EmoteAc.js
index 1659c961..b2cd4c0b 100644
--- a/client/src/builtin/EmoteAc.js
+++ b/client/src/builtin/EmoteAc.js
@@ -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: {
diff --git a/client/src/styles/partials/generic/autocomplete.scss b/client/src/styles/partials/generic/autocomplete.scss
index 0ee5aba0..7f8ed65c 100644
--- a/client/src/styles/partials/generic/autocomplete.scss
+++ b/client/src/styles/partials/generic/autocomplete.scss
@@ -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;
+        }
+    }
 }
diff --git a/client/src/ui/components/common/Autocomplete.vue b/client/src/ui/components/common/Autocomplete.vue
index b377e87d..0be2a163 100644
--- a/client/src/ui/components/common/Autocomplete.vue
+++ b/client/src/ui/components/common/Autocomplete.vue
@@ -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;
                 }
             },