From db8dd0cb101c4305777e071b40c2769f381f2c59 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sun, 23 Aug 2020 11:07:36 -0500
Subject: [PATCH] Add better scrollbar/scrolling abilities, fix spinner
 stroke/diameter props, input result count

---
 package-lock.json               | 14 ++++++++++++
 package.json                    |  1 +
 src/components/FontSelector.vue | 40 +++++++++++++++++++++++----------
 3 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cb0c6f6..a3e53c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8600,6 +8600,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "perfect-scrollbar": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
+      "integrity": "sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz",
@@ -11701,6 +11706,15 @@
       "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.5.tgz",
       "integrity": "sha512-th5xVbInVoyIoe+qY+9GCflEVezxAvztD4xpFF39SRQYqpoKD2qkmX8yv08jJG9a2SgNOCjirjJGSwg/wTrbmA=="
     },
+    "vue-custom-scrollbar": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/vue-custom-scrollbar/-/vue-custom-scrollbar-1.3.0.tgz",
+      "integrity": "sha512-sBedMKf9xaXsQCXrrYfgL2RkItlFIjgHJqtj2ErKSMCvtTy4gTWUgkyoA5nxmR6kDjF8IT4KojKGGe7bAP+ydg==",
+      "requires": {
+        "perfect-scrollbar": "^1.5.0",
+        "vue": "^2.6.11"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.0.tgz",
diff --git a/package.json b/package.json
index a4925d4..e2edb7f 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "jspdf": "^2.1.0",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
+    "vue-custom-scrollbar": "^1.3.0",
     "vue-highlightjs": "^1.3.3",
     "vue-material-design-icons": "^4.9.0"
   },
diff --git a/src/components/FontSelector.vue b/src/components/FontSelector.vue
index aa74437..993f735 100644
--- a/src/components/FontSelector.vue
+++ b/src/components/FontSelector.vue
@@ -7,12 +7,15 @@
                         <md-field>
                             <label>Font Family</label>
                             <md-input v-model="search"></md-input>
+                            <span class="md-suffix">{{ results.length }}</span>
                         </md-field>
                     </div>
-                    <md-list class="md-scrollbar">
-                        <md-list-item v-for="font in results" @click="selectFont(font.index)" :key="font.family">
-                            {{ font.family }}
-                        </md-list-item>
+                    <md-list>
+                        <vue-custom-scrollbar :settings="{suppressScrollX: true,  suppressScrollY: false}" class="scroll-area">
+                            <md-list-item v-for="font in results" @click="selectFont(font.index)" :key="font.family">
+                                {{ font.family }}
+                            </md-list-item>
+                        </vue-custom-scrollbar>
                     </md-list>
                 </md-content>
 
@@ -22,7 +25,7 @@
                 </md-dialog-actions>
             </div>
             <div v-else id="spinner-box" :style="[fonts !== null ? 'display: none' : null]">
-                <md-progress-spinner md-stroke=5 md-diameter=45 md-mode="indeterminate"></md-progress-spinner>
+                <md-progress-spinner :md-stroke="5" :md-diameter="45" md-mode="indeterminate"></md-progress-spinner>
             </div>
         </md-dialog>
     </div>
@@ -41,14 +44,23 @@
         -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
     }
-}
 
-#font-dialog.md-dialog > .md-dialog-container {
-    min-height: 9em;
-}
+    &.md-dialog > .md-dialog-container {
+        min-height: 15em;
+    }
 
-#font-dialog .md-progress-spinner {
-    align-content: center;
+    .md-progress-spinner {
+        align-content: center;
+    }
+
+    .md-list {
+        max-height: 15em;
+        //overflow: auto;
+    }
+
+    .scroll-area {
+        position: relative;
+    }
 }
 
 .md-menu-content {
@@ -58,15 +70,19 @@
 
 <script>
 import axios from 'axios';
+import vueCustomScrollbar from 'vue-custom-scrollbar'
 
 axios.baseURL = '';
 
 export default {
     name: "FontSelector",
+    components: {
+        vueCustomScrollbar
+    },
     data: () => ({
         fonts: null,
         visible: false,
-        search: null,
+        search: "",
         selectedFont: null
     }),
     methods: {