fields for user font overrides

This commit is contained in:
Henry Jameson 2024-06-27 00:59:24 +03:00
commit 80cbf29bdf
6 changed files with 57 additions and 2 deletions

View file

@ -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

View file

@ -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"