From 3dcf57d3812b59743c3f802bf8e32e446c332f9c Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sun, 23 Aug 2020 01:59:36 -0500
Subject: [PATCH] fix FontSelector spinner's centering, size, force
 display:none for leftover animation, dialog min height

---
 src/components/FontSelector.vue | 68 +++++++++++++++++++++++----------
 1 file changed, 47 insertions(+), 21 deletions(-)

diff --git a/src/components/FontSelector.vue b/src/components/FontSelector.vue
index 376d996..aa74437 100644
--- a/src/components/FontSelector.vue
+++ b/src/components/FontSelector.vue
@@ -1,29 +1,56 @@
 <template>
     <div>
-        <md-dialog :md-active.sync="visible">
-            <md-content v-if="fonts !== null">
-                <div style="margin: 0 1em">
-                    <md-field>
-                        <label>Font Family</label>
-                        <md-input v-model="search"></md-input>
-                    </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>
-            </md-content>
-            <md-progress-spinner v-else md-mode="indeterminate"></md-progress-spinner>
-            <md-dialog-actions>
-                <md-button class="md-primary" @click="toggle">Close</md-button>
-                <md-button class="md-primary" @click="toggle">Save</md-button>
-            </md-dialog-actions>
+        <md-dialog id="font-dialog" :md-active.sync="visible">
+            <div v-if="fonts !== null">
+                <md-content>
+                    <div>
+                        <md-field>
+                            <label>Font Family</label>
+                            <md-input v-model="search"></md-input>
+                        </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>
+                </md-content>
+
+                <md-dialog-actions>
+                    <md-button class="md-primary" @click="toggle">Close</md-button>
+                    <md-button class="md-primary" @click="toggle">Save</md-button>
+                </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>
+            </div>
         </md-dialog>
     </div>
 </template>
 
 <style lang="scss">
+#font-dialog {
+    .md-content > div {
+        margin: 0 1em
+    }
+
+    #spinner-box {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+    }
+}
+
+#font-dialog.md-dialog > .md-dialog-container {
+    min-height: 9em;
+}
+
+#font-dialog .md-progress-spinner {
+    align-content: center;
+}
+
 .md-menu-content {
     z-index: 11 !important;
 }
@@ -45,7 +72,6 @@ export default {
     methods: {
         toggle() {
             this.visible = !this.visible;
-
             // If showing font menu and fonts have not been fetched before
             if (this.visible && this.fonts === null)
                 this.getFonts();
@@ -64,7 +90,7 @@ export default {
     },
     computed: {
         results() {
-          return this.fonts !== null ? this.fonts.items.filter(font => font.family.includes(this.search)) : [];
+            return this.fonts !== null ? this.fonts.items.filter(font => font.family.includes(this.search)) : [];
         }
     }
 }