fields for user font overrides

src/components/font_control/font_control.js

@@ -30,7 +30,7 @@ export default {
   emits: ['update:modelValue'],
   data () {
     return {
-      manualEntry: true,
+      manualEntry: false,
       availableOptions: [
         this.noInherit ? '' : 'inherit',
         'serif',

src/components/settings_modal/tabs/appearance_tab.js

@@ -4,6 +4,8 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
 import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
 
+import FontControl from 'src/components/font_control/font_control.vue'
+
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -36,12 +38,16 @@ const AppearanceTab = {
     IntegerSetting,
     FloatSetting,
     UnitSetting,
-    ProfileSettingIndicator
+    ProfileSettingIndicator,
+    FontControl
   },
   computed: {
     horizontalUnits () {
       return defaultHorizontalUnits
     },
+    fontsOverride () {
+      return this.$store.getters.mergedConfig.fontsOverride
+    },
     columns () {
       const mode = this.$store.getters.mergedConfig.thirdColumnMode
 

src/components/settings_modal/tabs/appearance_tab.vue

@@ -34,6 +34,51 @@
             </small>
           </div>
         </li>
+        <li>
+          <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
+          <ul class="setting-list">
+            <li>
+              <FontControl
+                :model-value="fontsOverride.interface"
+                name="ui"
+                :label="$t('settings.style.fonts.components.interface')"
+                :fallback="{ family: 'sans-serif' }"
+                no-inherit="1"
+                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, interface: v } })"
+              />
+            </li>
+            <li>
+              <FontControl
+                v-if="expertLevel > 0"
+                :model-value="fontsOverride.input"
+                name="input"
+                :fallback="{ family: 'inherit' }"
+                :label="$t('settings.style.fonts.components.input')"
+                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, input: v } })"
+              />
+            </li>
+            <li>
+              <FontControl
+                v-if="expertLevel > 0"
+                :model-value="fontsOverride.post"
+                name="post"
+                :fallback="{ family: 'inherit' }"
+                :label="$t('settings.style.fonts.components.post')"
+                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, post: v } })"
+              />
+            </li>
+            <li>
+              <FontControl
+                v-if="expertLevel > 0"
+                :model-value="fontsOverride.postCode"
+                name="postCode"
+                :fallback="{ family: 'monospace' }"
+                :label="$t('settings.style.fonts.components.postCode')"
+                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, postCode: v } })"
+              />
+            </li>
+          </ul>
+        </li>
         <li>
           <UnitSetting
             path="emojiSize"

src/i18n/en.json

@@ -765,6 +765,7 @@
           "select": "Select font"
         }
       },
+      "interface_font_user_override": "Override theme/browser font used",
       "switcher": {
         "keep_color": "Keep colors",
         "keep_shadows": "Keep shadows",

src/modules/config.js

@@ -121,6 +121,7 @@ export const defaultState = {
   navbarSize: undefined, // instance default
   panelHeaderSize: undefined, // instance default
   forcedRoundness: undefined, // instance default
+  fontsOverride: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -184,6 +185,7 @@ const config = {
       applyConfig(state)
     },
     setOption (state, { name, value }) {
+      console.log('SET OPTION', state, name, value)
       set(state, name, value)
     },
     setHighlight (state, { user, color, type }) {

src/modules/instance.js

@@ -104,6 +104,7 @@ const defaultState = {
   navbarSize: '3.5rem',
   panelHeaderSize: '3.2rem',
   forcedRoundness: -1,
+  fontsOverride: {},
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',