font selector with proper styles and functionality + local font selector

1 files changed, 84 insertions, 18 deletions

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index e73862a0..f1b126be 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -10,15 +10,6 @@
     >
       {{ label }}
     </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>
       <Select
         :id="name + '-font-switcher'"
@@ -34,15 +25,89 @@
           {{ $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>
-      <input
-        v-if="isCustom"
-        :id="name"
-        v-model="familyCustom"
-        class="input custom-font"
-        type="text"
+    <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>
+      <label
+        v-else
+        :id="name + '-label'"
+        :for="preset === 'custom' ? name : name + '-font-switcher'"
+        class="label"
+      >
+        <i18n-t
+          keypath="settings.style.themes3.font.entry"
+          tag="span"
+        >
+          <template #fontFamily>
+            <code>font-family</code>
+          </template>
+        </i18n-t>
+      </label>
+      {{ ' ' }}
+      <span class="btn-group">
+        <button
+          v-if="fontsListCapable && (fontsList === null || manualEntry)"
+          class="btn button-default"
+          @click="lookupLocalFonts"
+          :title="$t('settings.style.themes3.font.lookup_local_fonts')"
+        >
+          <FAIcon
+            fixed-width
+            icon="font"
+          />
+        </button>
+          <input
+            v-if="fontsLists === null || manualEntry"
+            :id="name"
+            v-model="familyCustom"
+            class="input custom-font"
+            type="text"
+          >
+      </span>
+      <span class="btn-group">
+        <button
+          v-if="fontsList !== null && !manualEntry"
+          class="btn button-default"
+          @click="toggleManualEntry"
+          :title="$t('settings.style.themes3.font.enter_manually')"
+        >
+          <FAIcon
+            fixed-width
+            icon="keyboard"
+          />
+        </button>
+        <Select
+          v-if="fontsList !== null && !manualEntry"
+          :id="name + '-local-font-switcher'"
+          v-model="familyCustom"
+          class="custom-font"
+        >
+          <option
+            v-for="option in fontsList.values()"
+            :key="option"
+            :value="option"
+            :style="{ fontFamily: option }"
+          >
+            {{ option }}
+          </option>
+        </Select>
+      </span>
       <span
         v-if="invalidCustom"
         class="InvalidIndicator"
@@ -70,8 +135,9 @@
 
 <style lang="scss">
 .font-control {
-  input.custom-font {
-    min-width: 12em;
+  .custom-font {
+    min-width: 20em;
+    max-width: 20em;
   }
 }