hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fixed fonts (post fonts seem to be broken in develop)

Browse source
This commit is contained in:
Henry Jameson 2026-03-18 16:46:39 +02:00
commit e6649c7c25
11 changed files with 110 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/emoji_reactions/emoji_reactions.js
View file

@ -2,9 +2,10 @@ import StillImage from 'src/components/still-image/still-image.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import UserListPopover from '../user_list_popover/user_list_popover.vue'
import { useInstanceStore } from 'src/stores/instance.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCheck, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'
import { useInstanceStore } from 'src/stores/instance.js'
library.add(faPlus, faMinus, faCheck)

10
src/components/settings_modal/tabs/general_tab.js
View file

@ -48,9 +48,6 @@ const GeneralTab = {
},
...SharedComputedObject(),
...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
...mapState(useSyncConfigStore, {
theme3hacks: (store) => store.mergedConfig.theme3hacks,
}),
},
methods: {
updateProfile() {
@ -67,11 +64,8 @@ const GeneralTab = {
this.$store.commit('setCurrentUser', user)
})
},
updateFont(key, value) {
useLocalConfigStore().set({
path: `theme3hacks.fonts.${key}`,
value,
})
updateFont(path, value) {
useLocalConfigStore().set({ path, value })
},
},
}

8
src/components/settings_modal/tabs/general_tab.vue
View file

@ -64,21 +64,21 @@
</li>
<li>
<FontControl
:model-value="theme3hacks.fonts.interface"
:model-value="mergedConfig.fontInterface"
name="ui"
:label="$t('settings.style.fonts.components_inline.interface')"
:fallback="{ family: 'sans-serif' }"
no-inherit="1"
@update:model-value="v => updateFont('interface', v)"
@update:model-value="v => updateFont('fontInterface', v)"
/>
</li>
<li>
<FontControl
:model-value="theme3hacks.fonts.input"
:model-value="mergedConfig.fontInput"
name="input"
:fallback="{ family: 'inherit' }"
:label="$t('settings.style.fonts.components_inline.input')"
@update:model-value="v => updateFont('input', v)"
@update:model-value="v => updateFont('fontInput', v)"
/>
</li>
<li>

18
src/components/settings_modal/tabs/posts_tab.js
View file

@ -4,9 +4,10 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
import IntegerSetting from '../helpers/integer_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
import { useLocalConfigStore } from 'src/stores/local_config.js'
import { useSyncConfigStore } from 'src/stores/sync_config.js'
const GeneralTab = {
const PostsTab = {
data() {
return {
conversationDisplayOptions: ['tree', 'linear'].map((mode) => ({
@ -66,19 +67,10 @@ const GeneralTab = {
...SharedComputedObject(),
},
methods: {
updateFont(key, value) {
useSyncConfigStore().setSimplePrefAndSave({
path: 'theme3hacks',
value: {
...this.mergedConfig.theme3hacks,
fonts: {
...this.mergedConfig.theme3hacks.fonts,
[key]: value,
},
},
})
updateFont(path, value) {
useLocalConfigStore().set({ path, value })
},
},
}
export default GeneralTab
export default PostsTab

10
src/components/settings_modal/tabs/posts_tab.vue
View file

@ -56,22 +56,20 @@
</li>
<li>
<FontControl
:model-value="mergedConfig.theme3hacks.fonts.post"
:model-value="mergedConfig.fontPosts"
name="post"
:is-local="true"
:fallback="{ family: 'inherit' }"
:label="$t('settings.style.fonts.components.post')"
@update:model-value="v => updateFont('post', v)"
@update:model-value="v => updateFont('fontPosts', v)"
/>
</li>
<li>
<FontControl
:model-value="mergedConfig.theme3hacks.fonts.monospace"
:is-local="true"
:model-value="mergedConfig.fontMonospace"
name="postCode"
:fallback="{ family: 'monospace' }"
:label="$t('settings.style.fonts.components.monospace')"
@update:model-value="v => updateFont('monospace', v)"
@update:model-value="v => updateFont('fontMonospace', v)"
/>
</li>
<li>

13
src/lib/style.js
View file

@ -1,3 +1,4 @@
import { useInterfaceStore } from 'src/stores/interface.js'
import { useSyncConfigStore } from 'src/stores/sync_config.js'
import { applyStyleConfig } from 'src/services/style_setter/style_setter.js'
@ -23,6 +24,15 @@ const APPEARANCE_SETTINGS_KEYS = [
'emojiSize',
'emojiReactionsScale',
]
const HACKS_KEYS = new Set([
'fontInterface',
'fontPosts',
'fontInput',
'fontMonospace',
'underlay',
])
const MIXED_KEYS = new Set([
...APPEARANCE_SETTINGS_KEYS,
...APPEARANCE_SETTINGS_KEYS.map((x) => 'simple.' + x),
@ -36,6 +46,9 @@ export const piniaStylePlugin = ({ store, options }) => {
if (MIXED_KEYS.has(path)) {
after(() => applyStyleConfig(useSyncConfigStore().mergedConfig))
}
if (HACKS_KEYS.has(path)) {
after(() => useInterfaceStore().applyTheme({ recompile: true }))
}
}
})
}

19
src/modules/default_config_state.js
View file

@ -181,6 +181,13 @@ export const defaultConfigLocal = {
alwaysUseJpeg: false,
imageCompression: true,
useStreamingApi: false,
underlay: 'none',
fontInterface: undefined,
fontInput: undefined,
fontPosts: undefined,
fontMonospace: undefined,
themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
forceThemeRecompilation: false, // flag that forces recompilation on boot even if cache exists
}
export const LOCAL_ONLY_KEYS = new Set(Object.keys(defaultConfigLocal))
@ -212,16 +219,4 @@ export const defaultState = {
styleCustomData: null,
palette: null,
paletteCustomData: null,
themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
forceThemeRecompilation: false, // flag that forces recompilation on boot even if cache exists
theme3hacks: {
// Hacks, user overrides that are independent of theme used
underlay: 'none',
fonts: {
interface: undefined,
input: undefined,
post: undefined,
monospace: undefined,
},
},
}

2
src/modules/old_default_config_state.js
View file

@ -2,7 +2,7 @@
// used to migrate from old config.
// commented entries are unsynced stuff
export const defaultConfigSync = {
export const oldDefaultConfigSync = {
expertLevel: 0, // used to track which settings to show and hide
hideISP: false,
hideInstanceWallpaper: false,

16
src/modules/users.js
View file

@ -702,13 +702,15 @@ const users = {
user.domainMutes = []
commit('setCurrentUser', user)
useSyncConfigStore().initSyncConfig(user).then(() => {
useInterfaceStore()
.applyTheme()
.catch((e) => {
console.error('Error setting theme', e)
})
})
useSyncConfigStore()
.initSyncConfig(user)
.then(() => {
useInterfaceStore()
.applyTheme()
.catch((e) => {
console.error('Error setting theme', e)
})
})
useUserHighlightStore().initUserHighlight(user)
commit('addNewUsers', [user])

97
src/stores/interface.js
View file

@ -598,8 +598,9 @@ export const useInterfaceStore = defineStore('interface', {
this.themeApplied = true
},
async applyTheme({ recompile = false } = {}) {
const { forceThemeRecompilation, themeDebug, theme3hacks } =
useSyncConfigStore().mergedConfig
const { mergedConfig } = useSyncConfigStore()
const { forceThemeRecompilation, themeDebug } = mergedConfig
this.themeChangeInProgress = true
// If we're not forced to recompile try using
// cache (tryLoadCache return true if load successful)
@ -646,68 +647,41 @@ export const useInterfaceStore = defineStore('interface', {
convertTheme2To3(normalizeThemeData(this.themeDataUsed))
const hacks = []
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 = {
component: 'Underlay',
directives: {},
}
if (value === 'opaque') {
newRule.directives.opacity = 1
newRule.directives.background = '--wallpaper'
}
if (value === 'transparent') {
newRule.directives.opacity = 0
}
hacks.push(newRule)
}
break
}
const fontMap = {
Interface: 'Root',
Input: 'Input',
Posts: 'RichContent',
Monospace: 'Root',
}
Object.entries(fontMap).forEach(([font, component]) => {
const family = mergedConfig[`font${font}`]?.family
const variable = font === 'Monospace' ? '--monoFont' : '--font'
if (family) {
hacks.push({
component,
directives: {
[variable]: `generic | "${family}"`,
},
})
}
})
if (mergedConfig.underlay !== 'none') {
const newRule = {
component: 'Underlay',
directives: {},
}
if (mergedConfig.underlay === 'opaque') {
newRule.directives.opacity = 1
newRule.directives.background = '--wallpaper'
}
if (mergedConfig.underlay === 'transparent') {
newRule.directives.opacity = 0
}
hacks.push(newRule)
}
const rulesetArray = [
theme2ruleset,
this.styleDataUsed,
@ -724,6 +698,7 @@ export const useInterfaceStore = defineStore('interface', {
themeDebug,
)
} catch (e) {
console.error(e)
window.splashError(e)
}
},

32
src/stores/sync_config.js
View file

@ -28,7 +28,7 @@ import {
instanceDefaultConfig,
LOCAL_ONLY_KEYS,
} from 'src/modules/default_config_state.js'
import { defaultConfigSync } from 'src/modules/old_default_config_state.js'
import { oldDefaultConfigSync } from 'src/modules/old_default_config_state.js'
export const VERSION = 2
export const NEW_USER_DATE = new Date('2026-03-16') // date of writing this, basically
@ -628,7 +628,7 @@ export const useSyncConfigStore = defineStore('sync_config', {
const migratedEntries = new Set(vuexState.config._syncMigration ?? [])
console.debug(`Already migrated Values: ${[...migratedEntries].join()}`)
Object.entries(defaultConfigSync).forEach(([key, value]) => {
Object.entries(oldDefaultConfigSync).forEach(([key, value]) => {
const oldValue = vuexState.config[key]
const defaultValue = value
@ -638,7 +638,30 @@ export const useSyncConfigStore = defineStore('sync_config', {
if (present && !migrated && different) {
console.debug(`Migrating config ${key}: ${oldValue}`)
this.setPreference({ path: `simple.${key}`, oldValue })
if (key === 'theme3hacks') {
useLocalConfigStore().set({
path: 'fontInterface',
value: oldValue.fonts.interface,
})
useLocalConfigStore().set({
path: 'fontInput',
value: oldValue.fonts.input,
})
useLocalConfigStore().set({
path: 'fontPost',
value: oldValue.fonts.post,
})
useLocalConfigStore().set({
path: 'fontMonospace',
value: oldValue.fonts.monospace,
})
useLocalConfigStore().set({
path: 'underlay',
value: oldValue.underlay,
})
} else {
this.setPreference({ path: `simple.${key}`, value: oldValue })
}
migratedEntries.add(key)
needUpload = true
}
@ -705,8 +728,7 @@ export const useSyncConfigStore = defineStore('sync_config', {
if (!needPush) return
this.updateCache({ username: window.vuex.state.users.currentUser.fqn })
const params = { pleroma_settings_store: { 'pleroma-fe': this.cache } }
window.vuex.state.api.backendInteractor
.updateProfileJSON({ params })
window.vuex.state.api.backendInteractor.updateProfileJSON({ params })
},
},
getters: {