commit: 665faf892a418fa1e7aeda1d1c82d926a2ed4f3a
parent 895261e112dc520136fde82b34a649812eca6f64
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 21 Jul 2024 23:27:11 +0300
font overrides + fixes for font component
Diffstat:
5 files changed, 70 insertions(+), 13 deletions(-)
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
@@ -84,7 +84,7 @@
:id="name + '-local-font-switcher'"
:model-value="modelValue.family"
class="custom-font"
- @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
+ @update:modelValue="v => $emit('update:modelValue', { ...(modelValue || {}), family: v })"
>
<optgroup
:label="$t('settings.style.themes3.font.group-builtin')"
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
@@ -151,9 +151,21 @@ const AppearanceTab = {
...SharedComputedObject()
},
methods: {
+ updateFont (key, value) {
+ console.log(key, value)
+ this.$store.dispatch('setOption', {
+ name: 'theme3hacks',
+ value: {
+ ...this.mergedConfig.theme3hacks,
+ fonts: {
+ ...this.mergedConfig.theme3hacks.fonts,
+ [key]: value
+ }
+ }
+ })
+ },
isThemeActive (key) {
const { theme } = this.mergedConfig
- console.log(key, theme)
return key === theme
},
setTheme (name) {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -73,42 +73,42 @@
<ul class="setting-list">
<li>
<FontControl
- :model-value="fontsOverride.interface"
+ :model-value="mergedConfig.theme3hacks.fonts.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 } })"
+ @update:modelValue="v => updateFont('interface', v)"
/>
</li>
<li>
<FontControl
v-if="expertLevel > 0"
- :model-value="fontsOverride.input"
+ :model-value="mergedConfig.theme3hacks.fonts.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 } })"
+ @update:modelValue="v => updateFont('input', v)"
/>
</li>
<li>
<FontControl
v-if="expertLevel > 0"
- :model-value="fontsOverride.post"
+ :model-value="mergedConfig.theme3hacks.fonts.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 } })"
+ @update:modelValue="v => updateFont('post', v)"
/>
</li>
<li>
<FontControl
v-if="expertLevel > 0"
- :model-value="fontsOverride.postCode"
+ :model-value="mergedConfig.theme3hacks.fonts.monospace"
name="postCode"
:fallback="{ family: 'monospace' }"
- :label="$t('settings.style.fonts.components.postCode')"
- @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, postCode: v } })"
+ :label="$t('settings.style.fonts.components.monospace')"
+ @update:modelValue="v => updateFont('monospace', v)"
/>
</li>
</ul>
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -52,7 +52,13 @@ export const defaultState = {
palette: null, // not used yet, will be used for V3
theme3hacks: { // Hacks, user overrides that are independent of theme used
underlay: 'none',
- badgeColor: null
+ badgeColor: null,
+ fonts: {
+ interface: undefined,
+ input: undefined,
+ post: undefined,
+ monospace: undefined
+ }
},
hideISP: false,
@@ -147,7 +153,6 @@ 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
diff --git a/src/modules/interface.js b/src/modules/interface.js
@@ -274,6 +274,46 @@ const interfaceMod = {
Object.entries(theme3hacks).forEach(([key, value]) => {
switch (key) {
+ case 'fonts': {
+ Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
+ if (!font?.family) return
+ switch (fontKey) {
+ case 'interface':
+ hacks.push({
+ component: 'Root',
+ directives: {
+ '--font': 'generic | ' + font.family
+ }
+ })
+ break
+ case 'input':
+ hacks.push({
+ component: 'Input',
+ directives: {
+ '--font': 'generic | ' + font.family
+ }
+ })
+ break
+ case 'post':
+ hacks.push({
+ component: 'RichContent',
+ directives: {
+ '--font': 'generic | ' + font.family
+ }
+ })
+ break
+ case 'monospace':
+ hacks.push({
+ component: 'Root',
+ directives: {
+ '--monoFont': 'generic | ' + font.family
+ }
+ })
+ break
+ }
+ })
+ break
+ }
case 'underlay': {
if (value !== 'none') {
const newRule = {
