Merge branch 'appearance-tab' into shigusegubu-themes3

src/components/font_control/font_control.js

@@ -1,4 +1,3 @@
-import { set, clone } from 'lodash'
 import Select from '../select/select.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
@@ -16,8 +15,6 @@ library.add(
   faFont
 )
 
-const PRESET_FONTS = new Set(['serif', 'sans-serif', 'monospace', 'inherit'])
-
 export default {
   components: {
     Select,
@@ -27,94 +24,36 @@ export default {
   props: [
     'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
   ],
+  mounted () {
+    this.$store.dispatch('queryLocalFonts')
+  },
   emits: ['update:modelValue'],
   data () {
     return {
-      manualEntry: true,
+      manualEntry: false,
-      localValue: clone(this.modelValue),
-      familyCustomLocal: null,
       availableOptions: [
         this.noInherit ? '' : 'inherit',
         'serif',
         'sans-serif',
         'monospace',
-        'local',
         ...(this.options || [])
       ].filter(_ => _)
     }
   },
-  beforeUpdate () {
-    this.localValue = clone(this.modelValue)
-    if (this.familyCustomLocal === null && !this.isInvalidFamily(this.modelValue?.family)) {
-      this.familyCustomLocal = this.modelValue?.family
-    }
-  },
   methods: {
-    lookupLocalFonts () {
-      if (!this.fontsList) {
-        this.$store.dispatch('queryLocalFonts')
-      }
-      this.toggleManualEntry()
-    },
-    isInvalidFamily (value) {
-      return PRESET_FONTS.has(value) || (value === '')
-    },
     toggleManualEntry () {
       this.manualEntry = !this.manualEntry
     }
   },
   computed: {
     present () {
-      return typeof this.localValue !== 'undefined'
+      return typeof this.modelValue !== 'undefined'
     },
-    defaultValue () {
+    localFontsList () {
-      return this.localValue || this.fallback || {}
+      return this.$store.state.interface.localFonts?.values()
     },
-    fontsListCapable () {
+    localFontsSize () {
-      return this.$store.state.interface.browserSupport.localFonts
+      return this.$store.state.interface.localFonts?.size
-    },
-    fontsList () {
-      return this.$store.state.interface.localFonts
-    },
-    family: {
-      get () {
-        return this.defaultValue.family
-      },
-      set (v) {
-        this.familyCustomLocal = ''
-        set(this.localValue, 'family', v)
-        this.$emit('update:modelValue', this.localValue)
-      }
-    },
-    familyCustom: {
-      get () {
-        return this.familyCustomLocal
-      },
-      set (v) {
-        this.familyCustomLocal = v
-        if (!this.isInvalidFamily(v)) {
-          set(this.localValue, 'family', v)
-          this.$emit('update:modelValue', this.localValue)
-        }
-      }
-    },
-    invalidCustom () {
-      return this.isInvalidFamily(this.familyCustomLocal)
-    },
-    isCustom () {
-      return !PRESET_FONTS.has(this.defaultValue.family)
-    },
-    preset: {
-      get () {
-        if (PRESET_FONTS.has(this.family)) {
-          return this.family
-        } else {
-          return 'local'
-        }
-      },
-      set (v) {
-        this.family = v === 'local' ? '' : v
-      }
     }
   }
 }

src/components/font_control/font_control.vue

@@ -10,42 +10,18 @@
     >
       {{ label }}
     </label>
-    <p>
+    {{ ' ' }}
-      <Select
+    <Checkbox
-        :id="name + '-font-switcher'"
+      v-if="typeof fallback !== 'undefined'"
-        v-model="preset"
+      :id="name + '-o'"
-        :disabled="!present"
+      :modelValue="present"
-        class="font-switcher"
+      @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
-      >
+    >
-        <option
+      {{ $t('settings.style.themes3.define') }}
-          v-for="option in availableOptions"
+    </Checkbox>
-          :key="option"
+    <p v-if="modelValue?.family">
-          :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"
+        v-if="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"
@@ -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
+        <input
-            v-if="fontsLists === null || manualEntry"
+          :id="name"
-            :id="name"
+          :model-value="modelValue.family"
-            v-model="familyCustom"
+          class="input custom-font"
-            class="input custom-font"
+          type="text"
-            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
+          <optgroup
-            v-for="option in fontsList.values()"
+            :label="$t('settings.style.themes3.font.group-builtin')"
-            :key="option"
-            :value="option"
-            :style="{ fontFamily: option }"
           >
-            {{ option }}
+            <option
-          </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 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>

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

@@ -748,19 +748,24 @@
       "themes3": {
         "define": "Override",
         "font": {
-          "local": "Local font (must be installed on computer)",
+          "group-builtin": "Browser default fonts",
-          "serif": "Serif (browser default)",
+          "builtin" : {
-          "sans-serif": "Sans-serif (browser default)",
+            "serif": "Serif",
-          "monospace": "Monospace (browser default)",
+            "sans-serif": "Sans-serif",
-          "inherit": "Same as parent component",
+            "monospace": "Monospace",
-          "invalid_custom_reserved": "Empty or reserved font name, it will not be saved as custom font - use dropdown instead",
+            "inherit": "Unchanged"
+          },
+          "group-local": "Locally installed fonts",
+          "local-unavailable1": "List of locally installed fonts unavailalbe",
+          "local-unavailable2": "Use manual entry to specify custom font",
           "font_list_unavailable": "Couldn't get locally installed fonts: {error}",
           "lookup_local_fonts": "Load list of fonts installed on this computer",
           "enter_manually": "Enter font name family manually",
-          "entry": "Font's {fontFamily}",
+          "entry": "Enter {fontFamily}",
-          "select": "Select local font"
+          "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',

src/modules/interface.js

@@ -108,7 +108,6 @@ const interfaceMod = {
       state.lastTimeline = value
     },
     setFontsList (state, value) {
-      console.log(value)
       state.localFonts = new Set(value.map(font => font.family))
     }
   },
@@ -184,10 +183,16 @@ const interfaceMod = {
         commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
       }
     },
-    queryLocalFonts ({ commit, dispatch }) {
+    queryLocalFonts ({ commit, dispatch, state }) {
+      if (state.localFonts !== null) return
+      commit('setFontsList', [])
+      if (!state.browserSupport.localFonts) {
+        return
+      }
       window
         .queryLocalFonts()
         .then((fonts) => {
+          console.log(fonts)
           commit('setFontsList', fonts)
         })
         .catch((e) => {