commit: 28b8620656cff2b6599aedebd917b3d50b133218
parent 7419616f616be044b8d295e3c1833ed02169a0a6
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 27 Oct 2024 01:33:40 +0300
style application stuff
Diffstat:
3 files changed, 58 insertions(+), 43 deletions(-)
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -1,4 +1,5 @@
import { ref, reactive, computed, watch, provide } from 'vue'
+import { useStore } from 'vuex'
import { get, set } from 'lodash'
import Select from 'src/components/select/select.vue'
@@ -75,8 +76,9 @@ export default {
Preview,
VirtualDirectivesTab
},
- setup () {
+ setup (props, context) {
const exports = {}
+ const store = useStore()
// All rules that are made by editor
const allEditedRules = reactive({})
@@ -515,7 +517,9 @@ export default {
})
}
- convert(selectedComponentName.value, allEditedRules[selectedComponentName.value])
+ componentsMap.values().forEach(({ name }) => {
+ convert(name, allEditedRules[name])
+ })
return resultRules
})
@@ -621,49 +625,63 @@ export default {
)
})
- const overallPreviewRules = ref()
- exports.overallPreviewRules = overallPreviewRules
- exports.updateOverallPreview = () => {
- try {
- // This normally would be handled by Root but since we pass something
- // else we have to make do ourselves
+ const overallPreviewCssRules = ref()
+ exports.overallPreviewCssRules = overallPreviewCssRules
+
+ const paletteRule = computed(() => {
+ const { name, ...rest } = selectedPalette.value
+ return {
+ component: 'Root',
+ directives: Object
+ .entries(rest)
+ .filter(([k, v]) => v)
+ .map(([k, v]) => ['--' + k, v])
+ .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
+ }
+ })
- const { name, ...rest } = selectedPalette.value
- const paletteRule = {
- component: 'Root',
- directives: Object
- .entries(rest)
- .map(([k, v]) => ['--' + k, v])
- .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
- }
+ const virtualDirectivesRule = computed(() => ({
+ component: 'Root',
+ directives: Object.fromEntries(
+ virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
+ )
+ }))
- const virtualDirectivesRule = {
- component: 'Root',
- directives: Object.fromEntries(
- virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
- )
- }
+ const exportRules = computed(() => [
+ paletteRule.value,
+ virtualDirectivesRule.value,
+ ...editorFriendlyToOriginal.value
+ ])
+ const compilePreviewRules = () => {
+ try {
const rules = init({
- inputRuleset: [
- paletteRule,
- virtualDirectivesRule,
- ...editorFriendlyToOriginal.value
- ],
+ inputRuleset: exportRules.value,
ultimateBackgroundColor: '#000000',
liteMode: true,
debug: true
}).eager
- overallPreviewRules.value = getScopedVersion(
- getCssRules(rules),
- '#edited-style-preview'
- ).join('\n')
+ return rules
} catch (e) {
console.error('Could not compile preview theme', e)
+ return null
}
}
+ exports.updateOverallPreview = () => {
+ const rules = compilePreviewRules()
+ if (rules === null) return
+ overallPreviewCssRules.value = getScopedVersion(
+ getCssRules(rules),
+ '#edited-style-preview'
+ ).join('\n')
+ }
+
+ exports.applyStyle = () => {
+ store.dispatch('setStyleCustom', exportRules.value)
+ }
+
// ## Export and Import
const styleExporter = newExporter({
filename: () => exports.name.value ?? 'pleroma_theme',
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -7,7 +7,7 @@
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<component
:is="'style'"
- v-html="overallPreviewRules"
+ v-html="overallPreviewCssRules"
/>
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
<Preview id="edited-style-preview" />
@@ -41,7 +41,7 @@
</button>
<button
class="btn button-default button-apply"
- @click="applyTheme"
+ @click="applyStyle"
>
<FAIcon icon="check" />
{{ $t('settings.style.themes3.editor.apply_preview') }}
diff --git a/src/modules/interface.js b/src/modules/interface.js
@@ -351,10 +351,10 @@ const interfaceMod = {
let majorVersionUsed
console.log(
- `USER V3 palette: ${userPaletteName}, style: ${userStyleName} `
+ `USER V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`
)
console.log(
- `USER V2 name: ${userThemeV2Name}, source: ${userThemeV2Source}, snapshot: ${userThemeV2Snapshot}`
+ `USER V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`
)
console.log(`INST V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
@@ -411,8 +411,8 @@ const interfaceMod = {
let styleDataUsed = null
let styleNameUsed = null
let paletteDataUsed = null
- let paletteNameUsed = null
- let themeNameUsed = null
+ // let paletteNameUsed = null
+ // let themeNameUsed = null
let themeDataUsed = null
const getData = async (resource, index, customData, name) => {
@@ -455,7 +455,7 @@ const interfaceMod = {
userPaletteCustomData,
userPaletteName || instancePaletteName
)
- paletteNameUsed = palette.nameUsed
+ // paletteNameUsed = palette.nameUsed
paletteDataUsed = palette.dataUsed
if (Array.isArray(paletteDataUsed)) {
const [
@@ -471,9 +471,8 @@ const interfaceMod = {
] = paletteDataUsed
paletteDataUsed = { name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange }
}
- console.log('PAL', userPaletteName, paletteNameUsed)
- console.log('PAL', paletteDataUsed)
+ console.log('USCD', userStyleCustomData)
const style = await getData(
'style',
stylesIndex,
@@ -489,15 +488,13 @@ const interfaceMod = {
userThemeV2Source || userThemeV2Snapshot,
userThemeV2Name || instanceThemeV2Name
)
- themeNameUsed = theme.nameUsed
+ // themeNameUsed = theme.nameUsed
themeDataUsed = theme.dataUsed
// Themes v2 editor support
commit('setInstanceOption', { name: 'themeData', value: themeDataUsed })
}
- console.log('STYLE', styleNameUsed, paletteNameUsed, themeNameUsed)
-
// commit('setOption', { name: 'palette', value: paletteNameUsed })
// commit('setOption', { name: 'style', value: styleNameUsed })
// commit('setOption', { name: 'theme', value: themeNameUsed })
