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

bundling theme now works and so are bundled style's palettes

Browse source
This commit is contained in:
Henry Jameson 2024-11-19 03:18:52 +02:00
commit 313eb8f4cd
8 changed files with 171 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/button.style.js
View file

@ -89,6 +89,13 @@ export default {
shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
}
},
{
state: ['toggled', 'disabled'],
directives: {
background: '$blend(--inheritedBackground 0.25 --parent)',
shadow: ['--buttonPressedBevel']
}
},
{
state: ['disabled'],
directives: {

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

@ -36,6 +36,7 @@ const AppearanceTab = {
return {
availableStyles: [],
bundledPalettes: [],
compilationCache: {},
fileImporter: newImporter({
accept: '.json, .piss',
validator: this.importValidator,
@ -84,6 +85,8 @@ const AppearanceTab = {
PaletteEditor
},
mounted () {
this.$store.dispatch('getThemeData')
const updateIndex = (resource) => {
const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
const currentIndex = this.$store.state.instance[`${resource}sIndex`]
@ -102,6 +105,13 @@ const AppearanceTab = {
})
}
updateIndex('style').then(styles => {
styles.forEach(([key, stylePromise]) => stylePromise.then(data => {
const meta = data.find(x => x.component === '@meta')
this.availableStyles.push({ key, data, name: meta.directives.name, version: 'v3' })
}))
})
updateIndex('theme').then(themes => {
themes.forEach(([key, themePromise]) => themePromise.then(data => {
this.availableStyles.push({ key, data, name: data.name, version: 'v2' })
@ -166,11 +176,15 @@ const AppearanceTab = {
]
},
stylePalettes () {
if (!this.mergedConfig.styleCustomData) return
const meta = this.mergedConfig.styleCustomData
.find(x => x.component === '@meta')
const result = this.mergedConfig.styleCustomData
.filter(x => x.component.startsWith('@palette'))
const ruleset = this.$store.state.interface.styleDataUsed || []
console.log(
'ASR',
this.$store.state.interface.paletteDataUsed,
this.$store.state.interface.styleDataUsed
)
if (!ruleset && ruleset.length === 0) return
const meta = ruleset.find(x => x.component === '@meta')
const result = ruleset.filter(x => x.component.startsWith('@palette'))
.map(x => {
const { variant, directives } = x
const {
@ -307,7 +321,7 @@ const AppearanceTab = {
return key === palette
},
setStyle (name) {
this.$store.dispatch('setTheme', name)
this.$store.dispatch('setStyle', name)
},
setTheme (name) {
this.$store.dispatch('setTheme', name)
@ -323,18 +337,30 @@ const AppearanceTab = {
resetTheming (name) {
this.$store.dispatch('setStyle', 'stock')
},
previewTheme (key, input) {
previewTheme (key, version, input) {
let theme3
if (input) {
const style = normalizeThemeData(input)
const theme2 = convertTheme2To3(style)
theme3 = init({
inputRuleset: theme2,
ultimateBackgroundColor: '#000000',
liteMode: true,
debug: true,
onlyNormalState: true
})
if (this.compilationCache[key]) {
theme3 = this.compilationCache[key]
} else if (input) {
if (version === 'v2') {
const style = normalizeThemeData(input)
const theme2 = convertTheme2To3(style)
theme3 = init({
inputRuleset: theme2,
ultimateBackgroundColor: '#000000',
liteMode: true,
debug: true,
onlyNormalState: true
})
} else if (version === 'v3') {
theme3 = init({
inputRuleset: input,
ultimateBackgroundColor: '#000000',
liteMode: true,
debug: true,
onlyNormalState: true
})
}
} else {
theme3 = init({
inputRuleset: [],
@ -345,6 +371,10 @@ const AppearanceTab = {
})
}
if (!this.compilationCache[key]) {
this.compilationCache[key] = theme3
}
return getScopedVersion(
getCssRules(theme3.eager),
'#theme-preview-' + key

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

@ -18,7 +18,7 @@
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<component
:is="'style'"
v-html="previewTheme('stock')"
v-html="previewTheme('stock', 'v3')"
/>
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
<preview id="theme-preview-stock" />
@ -30,7 +30,7 @@
<button
v-if="isCustomThemeUsed"
disabled
class="button-default theme-preview"
class="button-default theme-preview toggled"
>
<preview />
<h4 class="theme-name">
@ -38,20 +38,32 @@
<span class="alert neutral version">v2</span>
</h4>
</button>
<button
v-if="isCustomStyleUsed"
disabled
class="button-default theme-preview toggled"
>
<preview />
<h4 class="theme-name">
{{ $t('settings.style.custom_style_used') }}
<span class="alert neutral version">v3</span>
</h4>
</button>
<button
v-for="style in availableStyles"
:key="style.key"
:data-theme-key="style.key"
class="button-default theme-preview"
:class="{ toggled: isThemeActive(style.key) }"
@click="setTheme(style.key)"
@click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
>
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<component
:is="'style'"
v-if="style.ready || noIntersectionObserver"
v-html="previewTheme(style.key, style.data)"
/>
<div v-if="style.ready || noIntersectionObserver">
<component
:is="'style'"
v-html="previewTheme(style.key, style.version, style.data)"
/>
</div>
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
<preview :id="'theme-preview-' + style.key" />
<h4 class="theme-name">