Massively simplify and improve font input component

1 files changed, 72 insertions, 75 deletions

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index f1b126be..f3ab41a2 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -10,42 +10,18 @@
     >
       {{ label }}
     </label>
-    <p>
-      <Select
-        :id="name + '-font-switcher'"
-        v-model="preset"
-        :disabled="!present"
-        class="font-switcher"
-      >
-        <option
-          v-for="option in availableOptions"
-          :key="option"
-          :value="option"
-        >
-          {{ $t('settings.style.themes3.font.' + option) }}
-        </option>
-      </Select>
-      {{ ' ' }}
-      <Checkbox
-        v-if="typeof fallback !== 'undefined'"
-        :id="name + '-o'"
-        :modelValue="present"
-        @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
-      >
-        {{ $t('settings.style.themes3.define') }}
-      </Checkbox>
-    </p>
-    <p v-if="isCustom">
-      <label
-        v-if="fontsList !== null && !manualEntry"
-        :id="name + '-label'"
-        :for="preset === 'custom' ? name : name + '-font-switcher'"
-        class="label"
-      >
-        {{ $t('settings.style.themes3.font.select') }}
-      </label>
+    {{ ' ' }}
+    <Checkbox
+      v-if="typeof fallback !== 'undefined'"
+      :id="name + '-o'"
+      :modelValue="present"
+      @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+    >
+      {{ $t('settings.style.themes3.define') }}
+    </Checkbox>
+    <p v-if="modelValue?.family">
       <label
-        v-else
+        v-if="manualEntry"
         :id="name + '-label'"
         :for="preset === 'custom' ? name : name + '-font-switcher'"
         class="label"
@@ -59,12 +35,22 @@
           </template>
         </i18n-t>
       </label>
+      <label
+        v-else
+        :id="name + '-label'"
+        :for="preset === 'custom' ? name : name + '-font-switcher'"
+        class="label"
+      >
+        {{ $t('settings.style.themes3.font.select') }}
+      </label>
       {{ ' ' }}
-      <span class="btn-group">
+      <span
+        v-if="manualEntry"
+        class="btn-group"
+      >
         <button
-          v-if="fontsListCapable && (fontsList === null || manualEntry)"
           class="btn button-default"
-          @click="lookupLocalFonts"
+          @click="toggleManualEntry"
           :title="$t('settings.style.themes3.font.lookup_local_fonts')"
         >
           <FAIcon
@@ -72,17 +58,19 @@
             icon="font"
           />
         </button>
-          <input
-            v-if="fontsLists === null || manualEntry"
-            :id="name"
-            v-model="familyCustom"
-            class="input custom-font"
-            type="text"
-          >
+        <input
+          :id="name"
+          :model-value="modelValue.family"
+          class="input custom-font"
+          type="text"
+          @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
+        >
       </span>
-      <span class="btn-group">
+      <span
+        v-else
+        class="btn-group"
+      >
         <button
-          v-if="fontsList !== null && !manualEntry"
           class="btn button-default"
           @click="toggleManualEntry"
           :title="$t('settings.style.themes3.font.enter_manually')"
@@ -93,40 +81,49 @@
           />
         </button>
         <Select
-          v-if="fontsList !== null && !manualEntry"
           :id="name + '-local-font-switcher'"
-          v-model="familyCustom"
+          :model-value="modelValue.family"
           class="custom-font"
+          @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
         >
-          <option
-            v-for="option in fontsList.values()"
-            :key="option"
-            :value="option"
-            :style="{ fontFamily: option }"
+          <optgroup
+            :label="$t('settings.style.themes3.font.group-builtin')"
+          >
+            <option
+              v-for="option in availableOptions"
+              :key="option"
+              :value="option"
+              :style="{ fontFamily: option === 'inherit' ? null : option }"
+            >
+              {{ $t('settings.style.themes3.font.builtin.' + option) }}
+            </option>
+          </optgroup>
+          <optgroup
+            v-if="localFontsSize > 0"
+            :label="$t('settings.style.themes3.font.group-local')"
+          >
+            <option
+              v-for="option in localFontsList"
+              :key="option"
+              :value="option"
+              :style="{ fontFamily: option }"
+            >
+              {{ option }}
+            </option>
+          </optgroup>
+          <optgroup
+            v-else
+            :label="$t('settings.style.themes3.font.group-local')"
           >
-            {{ option }}
-          </option>
+            <option disabled>
+              {{ $t('settings.style.themes3.font.local-unavailable1') }}
+            </option>
+            <option disabled>
+              {{ $t('settings.style.themes3.font.local-unavailable2') }}
+            </option>
+          </optgroup>
         </Select>
       </span>
-      <span
-        v-if="invalidCustom"
-        class="InvalidIndicator"
-      >
-        <Popover
-          trigger="hover"
-          :trigger-attrs="{ 'aria-label': $t('settings.style.themes3.font.invalid_custom_reserved') }"
-        >
-          <template #trigger>
-            &nbsp;
-            <FAIcon icon="exclamation-triangle" />
-          </template>
-          <template #content>
-            <div class="invalid-tooltip">
-              {{ $t('settings.style.themes3.font.invalid_custom_reserved') }}
-            </div>
-          </template>
-        </Popover>
-      </span>
     </p>
   </div>
 </template>