font control args to allow passing an option list of fonts, for future use

2 files changed, 16 insertions, 10 deletions

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 424f6259..004b5546 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -17,7 +17,7 @@
       v-model="preset"
       class="font-switcher"
       id="name + '-font-switcher'">
-      <option v-for="option in options" :value="option">
+      <option v-for="option in availableOptions" :value="option">
         {{ option }}
       </option>
     </select>
@@ -37,11 +37,19 @@ import { set } from 'vue'
 
 export default {
   props: [
-    'name', 'label', 'value', 'fallback', 'options'
+    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
   ],
   data () {
     return {
-      lValue: this.value
+      lValue: this.value,
+      availableOptions: [
+        this.noInherit ? '' : 'inherit',
+        'custom',
+        ...(this.options || []),
+        'serif',
+        'monospace',
+        'sans-serif'
+      ].filter(_ => _)
     }
   },
   beforeUpdate () {
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index f64bda3f..a444c6a7 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -215,31 +215,29 @@
       <div :label="$t('settings.style.fonts._tab_label')" class="fonts-container">
         <div class="tab-header">
           <p>{{$t('settings.style.fonts.help')}}</p>
+          <button class="btn" @click="clearFonts">{{$t('settings.style.switcher.clear_all')}}</button>
         </div>
         <FontControl
           name="ui"
           v-model="fontsLocal.interface"
           :label="$t('settings.style.fonts.components.interface')"
           :fallback="previewTheme.fonts.interface"
-          :options="['serif', 'sans-serif', 'monospace', 'custom']" />
+          no-inherit="1"/>
         <FontControl
           name="input"
           v-model="fontsLocal.input"
           :label="$t('settings.style.fonts.components.input')"
-          :fallback="previewTheme.fonts.input"
-          :options="['serif', 'sans-serif', 'monospace', 'inherit', 'custom']" />
+          :fallback="previewTheme.fonts.input"/>
         <FontControl
           name="post"
           v-model="fontsLocal.post"
           :label="$t('settings.style.fonts.components.post')"
-          :fallback="previewTheme.fonts.post"
-          :options="['serif', 'sans-serif', 'monospace', 'inherit', 'custom']" />
+          :fallback="previewTheme.fonts.post"/>
         <FontControl
           name="postCode"
           v-model="fontsLocal.postCode"
           :label="$t('settings.style.fonts.components.postCode')"
-          :fallback="previewTheme.fonts.postCode"
-          :options="['serif', 'sans-serif', 'monospace', 'inherit', 'custom']" />
+          :fallback="previewTheme.fonts.postCode"/>
       </div>
     </tab-switcher>
   </keep-alive>