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

component preview is finally working

Browse source
This commit is contained in:
Henry Jameson 2024-10-28 16:03:10 +02:00
parent d6600bfa5a
commit e7307d1e19
1 changed files with 19 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -651,8 +651,8 @@ export default {
// //
// Apart from "hover" we can't really show how component looks like in // Apart from "hover" we can't really show how component looks like in
// certain states, so we have to fake them. // certain states, so we have to fake them.
const simulatePseudoSelectors = css => css const simulatePseudoSelectors = (css, prefix) => css
.replace(selectedComponent.value.selector, '.component-preview .preview-block') .replace(prefix, '.component-preview .preview-block')
.replace(':active', '.preview-active') .replace(':active', '.preview-active')
.replace(':hover', '.preview-hover') .replace(':hover', '.preview-hover')
.replace(':active', '.preview-active') .replace(':active', '.preview-active')
@ -661,9 +661,9 @@ export default {
.replace(':disabled', '.preview-disabled') .replace(':disabled', '.preview-disabled')
const previewRules = computed(() => { const previewRules = computed(() => {
return overallPreviewRules.value.filter(r => { const filtered = overallPreviewRules.value.filter(r => {
const componentMatch = r.component === selectedComponentName.value const componentMatch = r.component === selectedComponentName.value
const parentComponentMatch = r.parent === selectedComponentName.value const parentComponentMatch = r.parent?.component === selectedComponentName.value
if (!componentMatch && !parentComponentMatch) return false if (!componentMatch && !parentComponentMatch) return false
const rule = parentComponentMatch ? r.parent : r const rule = parentComponentMatch ? r.parent : r
if (rule.component !== selectedComponentName.value) return false if (rule.component !== selectedComponentName.value) return false
@ -671,6 +671,17 @@ export default {
return r.state.filter(x => x !== 'normal').every(x => selectedState.has(x)) && return r.state.filter(x => x !== 'normal').every(x => selectedState.has(x)) &&
[...selectedState.values()].every(x => r.state.indexOf(x) >= 0) [...selectedState.values()].every(x => r.state.indexOf(x) >= 0)
}) })
const sorted = [...filtered]
.filter(x => x.component === selectedComponentName.value)
.sort((a, b) => {
const aSelectorLength = a.selector.split(/ /g).length
const bSelectorLength = b.selector.split(/ /g).length
return aSelectorLength - bSelectorLength
})
const prefix = sorted[0].selector
return filtered.filter(x => x.selector.startsWith(prefix))
}) })
exports.previewClass = computed(() => { exports.previewClass = computed(() => {
@ -681,6 +692,7 @@ export default {
if (selectedState.size > 0) { if (selectedState.size > 0) {
selectedState.forEach(state => { selectedState.forEach(state => {
const original = selectedComponent.value.states[state] const original = selectedComponent.value.states[state]
console.log('ORIG', original)
selectors.push(simulatePseudoSelectors(original)) selectors.push(simulatePseudoSelectors(original))
}) })
} }
@ -689,7 +701,8 @@ export default {
exports.previewCss = computed(() => { exports.previewCss = computed(() => {
try { try {
const scoped = getCssRules(previewRules.value).map(simulatePseudoSelectors) const prefix = previewRules.value[0].selector
const scoped = getCssRules(previewRules.value).map(x => simulatePseudoSelectors(x, prefix))
return scoped.join('\n') return scoped.join('\n')
} catch (e) { } catch (e) {
console.error('Invalid ruleset', e) console.error('Invalid ruleset', e)
@ -699,13 +712,7 @@ export default {
const dynamicVars = computed(() => { const dynamicVars = computed(() => {
console.log('ERR', selectedComponentName.value) console.log('ERR', selectedComponentName.value)
const sorted = [...previewRules.value].sort((a, b) => { return previewRules.value[0].dynamicVars
const aSelectorLength = a.selector.split(/ /g).length
const bSelectorLength = b.selector.split(/ /g).length
return aSelectorLength - bSelectorLength
})
return sorted[0].dynamicVars
}) })
const previewColors = computed(() => { const previewColors = computed(() => {