commit: 82504a1fcfdbf0fc292635103c0bb31fd6a6de18
parent 28b8620656cff2b6599aedebd917b3d50b133218
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 27 Oct 2024 22:24:39 +0200
wip
Diffstat:
1 file changed, 134 insertions(+), 150 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
@@ -102,7 +102,7 @@ export default {
// ## Palette stuff
const palettes = reactive([
{
- name: 'dark',
+ name: 'default',
bg: '#121a24',
fg: '#182230',
text: '#b9b9ba',
@@ -192,19 +192,20 @@ export default {
const componentKeys = [...componentsMap.keys()]
exports.componentKeys = componentKeys
- // selection basis
+ // Component list and selection
const selectedComponentKey = ref(componentsMap.keys().next().value)
exports.selectedComponentKey = selectedComponentKey
+
const selectedComponent = computed(() => componentsMap.get(selectedComponentKey.value))
const selectedComponentName = computed(() => selectedComponent.value.name)
+
+ // Selection basis
exports.selectedComponentVariants = computed(() => {
return Object.keys({ normal: null, ...(selectedComponent.value.variants || {}) })
})
- const selectedComponentStatesAll = computed(() => {
- return Object.keys({ normal: null, ...(selectedComponent.value.states || {}) })
- })
exports.selectedComponentStates = computed(() => {
- return selectedComponentStatesAll.value.filter(x => x !== 'normal')
+ const all = Object.keys({ normal: null, ...(selectedComponent.value.states || {}) })
+ return all.filter(x => x !== 'normal')
})
// selection
@@ -220,6 +221,17 @@ export default {
}
}
+ // Reset variant and state on component change
+ const updateSelectedComponent = () => {
+ selectedVariant.value = 'normal'
+ selectedState.clear()
+ }
+
+ watch(
+ selectedComponentName,
+ updateSelectedComponent
+ )
+
// ### Rules stuff aka meat and potatoes
// The native structure of separate rules and the child -> parent
// relation isn't very convenient for editor, we replace the array
@@ -276,13 +288,13 @@ export default {
return root
})
- // Checkging whether component can support some "directives" which
+ // Checking whether component can support some "directives" which
// are actually virtual subcomponents, i.e. Text, Link etc
exports.componentHas = (subComponent) => {
return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent)
}
- // Path is path for lodash's get and set
+ // Path for lodash's get and set
const getPath = (component, directive) => {
const pathSuffix = component ? `._children.${component}.normal.normal` : ''
const path = `${selectedComponentName.value}.${selectedVariant.value}.${normalizeStates([...selectedState])}${pathSuffix}.directives.${directive}`
@@ -431,57 +443,6 @@ export default {
}
return styles.join('; ')
})
- // Apart from "hover" we can't really show how component looks like in
- // certain states, so we have to fake them.
- const simulatePseudoSelectors = css => css
- .replace(selectedComponent.value.selector, '.ComponentPreview .preview-block')
- .replace(':active', '.preview-active')
- .replace(':hover', '.preview-hover')
- .replace(':active', '.preview-active')
- .replace(':focus', '.preview-focus')
- .replace(':focus-within', '.preview-focus-within')
- .replace(':disabled', '.preview-disabled')
- exports.previewClass = computed(() => {
- const selectors = []
- if (!!selectedComponent.value.variants?.normal || selectedVariant.value !== 'normal') {
- selectors.push(selectedComponent.value.variants[selectedVariant.value])
- }
- if (selectedState.size > 0) {
- selectedState.forEach(state => {
- const original = selectedComponent.value.states[state]
- selectors.push(simulatePseudoSelectors(original))
- })
- }
- return selectors.map(x => x.substring(1)).join('')
- })
- const previewRules = reactive([])
- exports.previewRules = previewRules
- exports.previewCss = computed(() => {
- try {
- const scoped = getCssRules(previewRules).map(simulatePseudoSelectors)
- return scoped.join('\n')
- } catch (e) {
- console.error('Invalid ruleset', e)
- return null
- }
- })
-
- const applicablePreviewRules = computed(() => {
- return previewRules.filter(rule => {
- const filterable = rule.parent ? rule.parent : rule
- const variantMatches = filterable.variant === selectedVariant.value
- const stateMatches = filterable.state.filter(x => x !== 'normal').every(x => selectedState.has(x))
- return variantMatches && stateMatches
- })
- })
- const previewColors = computed(() => ({
- text: applicablePreviewRules.value.find(r => r.component === 'Text')?.virtualDirectives['--text'],
- link: applicablePreviewRules.value.find(r => r.component === 'Link')?.virtualDirectives['--link'],
- border: applicablePreviewRules.value.find(r => r.component === 'Border')?.virtualDirectives['--border'],
- icon: applicablePreviewRules.value.find(r => r.component === 'Icon')?.virtualDirectives['--icon'],
- background: applicablePreviewRules.value.find(r => r.parent == null)?.dynamicVars.stacked
- }))
- exports.previewColors = previewColors
const editorFriendlyToOriginal = computed(() => {
const resultRules = []
@@ -524,58 +485,6 @@ export default {
return resultRules
})
- const updatePreview = () => {
- try {
- const { name, ...paletteData } = selectedPalette.value
- // This normally would be handled by Root but since we pass something
- // else we have to make do ourselves
- paletteData.accent = paletteData.accent || paletteData.link
- paletteData.link = paletteData.link || paletteData.accent
- const rules = init({
- inputRuleset: editorFriendlyToOriginal.value,
- initialStaticVars: {
- ...paletteData
- },
- ultimateBackgroundColor: '#000000',
- rootComponentName: selectedComponentName.value,
- editMode: true,
- debug: true
- }).eager
- previewRules.splice(0, previewRules.length)
- previewRules.push(...rules)
- } catch (e) {
- console.error('Could not compile preview theme', e)
- }
- }
-
- const updateSelectedComponent = () => {
- selectedVariant.value = 'normal'
- selectedState.clear()
- updatePreview()
- }
- updateSelectedComponent()
-
- // export and import
- watch(
- allEditedRules,
- updatePreview
- )
-
- watch(
- palettes,
- updatePreview
- )
-
- watch(
- selectedPalette,
- updatePreview
- )
-
- watch(
- selectedComponentName,
- updateSelectedComponent
- )
-
const allCustomVirtualDirectives = [...componentsMap.values()]
.map(c => {
return c
@@ -610,7 +519,7 @@ export default {
})
exports.computeColor = (color) => {
- const computedColor = findColor(color, { dynamicVars: {}, staticVars: selectedPalette.value })
+ const computedColor = findColor(color, { dynamicVars: dynamicVars.value, staticVars: selectedPalette.value })
if (computedColor) {
return rgb2hex(computedColor)
}
@@ -625,9 +534,6 @@ export default {
)
})
- const overallPreviewCssRules = ref()
- exports.overallPreviewCssRules = overallPreviewCssRules
-
const paletteRule = computed(() => {
const { name, ...rest } = selectedPalette.value
return {
@@ -647,41 +553,6 @@ export default {
)
}))
- const exportRules = computed(() => [
- paletteRule.value,
- virtualDirectivesRule.value,
- ...editorFriendlyToOriginal.value
- ])
-
- const compilePreviewRules = () => {
- try {
- const rules = init({
- inputRuleset: exportRules.value,
- ultimateBackgroundColor: '#000000',
- liteMode: true,
- debug: true
- }).eager
-
- 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',
@@ -723,6 +594,8 @@ export default {
allEditedRules
)
})
+
+ exports.updateOverallPreview()
}
})
@@ -743,6 +616,117 @@ export default {
styleImporter.importData()
}
+ const exportRules = computed(() => [
+ paletteRule.value,
+ virtualDirectivesRule.value,
+ ...editorFriendlyToOriginal.value
+ ])
+
+ exports.applyStyle = () => {
+ store.dispatch('setStyleCustom', exportRules.value)
+ }
+
+ const overallPreviewRules = ref([])
+ exports.overallPreviewRules = overallPreviewRules
+
+ const overallPreviewCssRules = computed(() => getScopedVersion(
+ getCssRules(overallPreviewRules.value),
+ '#edited-style-preview'
+ ).join('\n'))
+ exports.overallPreviewCssRules = overallPreviewCssRules
+
+ const updateOverallPreview = () => {
+ try {
+ overallPreviewRules.value = init({
+ inputRuleset: exportRules.value,
+ ultimateBackgroundColor: '#000000',
+ liteMode: true,
+ debug: true
+ }).eager
+ } catch (e) {
+ console.error('Could not compile preview theme', e)
+ return null
+ }
+ }
+ //
+ // Apart from "hover" we can't really show how component looks like in
+ // certain states, so we have to fake them.
+ const simulatePseudoSelectors = css => css
+ .replace(selectedComponent.value.selector, '.component-preview .preview-block')
+ .replace(':active', '.preview-active')
+ .replace(':hover', '.preview-hover')
+ .replace(':active', '.preview-active')
+ .replace(':focus', '.preview-focus')
+ .replace(':focus-within', '.preview-focus-within')
+ .replace(':disabled', '.preview-disabled')
+
+ const previewRules = computed(() => {
+ return overallPreviewRules.value.filter(r => {
+ const rule = r.parent ? r.parent : r
+ if (rule.component !== selectedComponentName.value) return false
+ if (rule.variant !== selectedVariant.value) return false
+ return r.state.filter(x => x !== 'normal').every(x => selectedState.has(x)) &&
+ [...selectedState.values()].every(x => r.state.indexOf(x) >= 0)
+ })
+ })
+
+ exports.previewClass = computed(() => {
+ const selectors = []
+ if (!!selectedComponent.value.variants?.normal || selectedVariant.value !== 'normal') {
+ selectors.push(selectedComponent.value.variants[selectedVariant.value])
+ }
+ if (selectedState.size > 0) {
+ selectedState.forEach(state => {
+ const original = selectedComponent.value.states[state]
+ selectors.push(simulatePseudoSelectors(original))
+ })
+ }
+ return selectors.map(x => x.substring(1)).join('')
+ })
+
+ exports.previewCss = computed(() => {
+ try {
+ const scoped = getCssRules(previewRules.value).map(simulatePseudoSelectors)
+ return scoped.join('\n')
+ } catch (e) {
+ console.error('Invalid ruleset', e)
+ return null
+ }
+ })
+
+ const dynamicVars = computed(() => {
+ console.log('ERR', toValue(previewRules.value))
+ // NEED TO FIND SHORTEST
+ return previewRules.value.find(r => r.parent == null).dynamicVars
+ })
+
+ const previewColors = computed(() => {
+ const stacked = dynamicVars.value.stacked
+ const background = typeof stacked === 'string' ? stacked : rgb2hex(stacked)
+ return {
+ text: previewRules.value.find(r => r.component === 'Text')?.virtualDirectives['--text'],
+ link: previewRules.value.find(r => r.component === 'Link')?.virtualDirectives['--link'],
+ border: previewRules.value.find(r => r.component === 'Border')?.virtualDirectives['--border'],
+ icon: previewRules.value.find(r => r.component === 'Icon')?.virtualDirectives['--icon'],
+ background
+ }
+ })
+ exports.previewColors = previewColors
+ exports.updateOverallPreview = updateOverallPreview
+
+ updateOverallPreview()
+
+ watch(
+ [
+ allEditedRules,
+ palettes,
+ selectedPalette,
+ selectedState,
+ selectedVariant
+ ],
+ updateOverallPreview
+ )
+
return exports
}
}
