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

Merge branch 'appearance-tab' into shigusegubu-themes3

Browse source
This commit is contained in:
Henry Jameson 2024-07-21 23:50:13 +03:00
commit 837f53a5c1
9 changed files with 76 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/font_control/font_control.js
View file

@ -50,10 +50,10 @@ export default {
return typeof this.modelValue !== 'undefined'
},
localFontsList () {
return this.$store.state.interface.localFonts?.values()
return this.$store.state.interface.localFonts
},
localFontsSize () {
return this.$store.state.interface.localFonts?.size
return this.$store.state.interface.localFonts?.length
}
}
}

4
src/components/font_control/font_control.vue
View file

@ -82,9 +82,9 @@
</button>
<Select
:id="name + '-local-font-switcher'"
:model-value="modelValue.family"
: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')"

2
src/components/settings_modal/helpers/unit_setting.vue
View file

@ -13,7 +13,7 @@
:id="path"
class="input number-input"
type="number"
step="step"
:step="step"
:disabled="disabled"
:min="min || 0"
:value="stateValue"

14
src/components/settings_modal/tabs/appearance_tab.js
View file

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

18
src/components/settings_modal/tabs/appearance_tab.vue
View file

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

2
src/i18n/en.json
View file

@ -898,7 +898,7 @@
"interface": "Interface",
"input": "Input fields",
"post": "Post text",
"postCode": "Monospaced text in a post (rich text)"
"monospace": "Monospaced text"
},
"family": "Font name",
"size": "Size (in px)",

9
src/modules/config.js
View file

@ -49,10 +49,14 @@ export const defaultState = {
// V3
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
palette: null, // not used yet, will be used for V3
theme3hacks: { // Hacks, user overrides that are independent of theme used
underlay: 'none',
badgeColor: null
fonts: {
interface: undefined,
input: undefined,
post: undefined,
monospace: undefined
}
},
hideISP: false,
@ -147,7 +151,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

45
src/modules/interface.js
View file

@ -112,7 +112,8 @@ const interfaceMod = {
state.lastTimeline = value
},
setFontsList (state, value) {
state.localFonts = new Set(value.map(font => font.family))
// Set is used here so that we filter out duplicate fonts (possibly same font but with different weight)
state.localFonts = [...(new Set(value.map(font => font.family))).values()]
}
},
actions: {
@ -196,7 +197,6 @@ const interfaceMod = {
window
.queryLocalFonts()
.then((fonts) => {
console.log(fonts)
commit('setFontsList', fonts)
})
.catch((e) => {
@ -275,6 +275,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 = {
@ -288,7 +328,6 @@ const interfaceMod = {
if (value === 'transparent') {
newRule.directives.opacity = 0
}
console.log('NEW RULE', newRule)
hacks.push(newRule)
}
break

1
src/services/theme_data/theme_data.service.js
View file

@ -117,7 +117,6 @@ export const topoSort = (
// Put it into the output list
output.push(node)
} else if (grays.has(node)) {
console.debug('Cyclic depenency in topoSort, ignoring')
output.push(node)
} else if (blacks.has(node)) {
// do nothing