moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shit more or less works for the very basic stuff

This commit is contained in:
Henry Jameson 2024-01-23 19:18:55 +02:00
parent 0729b529d7
commit 22b32f149d
9 changed files with 132 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/button.style.js
View File

@ -2,10 +2,10 @@ export default {
name: 'Button',
selector: '.btn',
states: {
hover: ':hover',
disabled: ':disabled',
toggled: '.toggled',
pressed: ':active',
toggled: '.toggled'
hover: ':hover'
},
variants: {
danger: '.danger',

3
src/components/panel.style.js
View File

@ -4,6 +4,7 @@ export default {
validInnerComponents: [
'Text',
'Icon',
'Button'
'Button',
'PanelHeader'
]
}

9
src/components/panel_header.style.js Normal file
View File

@ -0,0 +1,9 @@
export default {
name: 'PanelHeader',
selector: '.panel-heading',
validInnerComponents: [
'Text',
'Icon',
'Button'
]
}

2
src/components/text.style.js
View File

@ -1,6 +1,6 @@
export default {
name: 'Text',
selector: '',
selector: '/*text*/',
states: {
faint: '.faint'
}

2
src/components/underlay.style.js
View File

@ -1,6 +1,6 @@
export default {
name: 'Underlay',
selector: '.underlay',
selector: '#app',
validInnerComponents: [
'Panel'
]

1
src/services/color_convert/color_convert.js
View File

@ -188,6 +188,7 @@ export const rgba2css = function (rgba) {
*/
export const getTextColor = function (bg, text, preserve) {
const contrast = getContrastRatio(bg, text)
console.log(contrast)
if (contrast < 4.5) {
const base = typeof text.a !== 'undefined' ? { a: text.a } : {}

10
src/services/theme_data/pleromafe.t3.js
View File

@ -4,7 +4,7 @@ export const sampleRules = [
// variant: 'normal',
// state: 'normal'
directives: {
background: '#000',
background: '#000000',
opacity: 0.2
}
},
@ -15,11 +15,17 @@ export const sampleRules = [
opacity: 0.9
}
},
{
component: 'PanelHeader',
directives: {
background: '#000000',
opacity: 0.9
}
},
{
component: 'Button',
directives: {
background: '#808080',
text: '#FFFFFF',
opacity: 0.5
}
}

116
src/services/theme_data/theme_data_3.service.js
View File

@ -1,5 +1,9 @@
import { convert } from 'chromatism'
import { alphaBlend, getTextColor, rgba2css } from '../color_convert/color_convert.js'
import Underlay from 'src/components/underlay.style.js'
import Panel from 'src/components/panel.style.js'
import PanelHeader from 'src/components/panel_header.style.js'
import Button from 'src/components/button.style.js'
import Text from 'src/components/text.style.js'
import Icon from 'src/components/icon.style.js'
@ -8,6 +12,7 @@ const root = Underlay
const components = {
Underlay,
Panel,
PanelHeader,
Button,
Text,
Icon
@ -34,7 +39,7 @@ export const ruleToSelector = (rule) => {
const component = components[rule.component]
const { states, variants, selector } = component
const applicableStates = (rule.state.filter(x => x !== 'normal') || []).map(state => states[state])
const applicableStates = ((rule.state || []).filter(x => x !== 'normal')).map(state => states[state])
const applicableVariantName = (rule.variant || 'normal')
let applicableVariant = ''
@ -63,12 +68,37 @@ export const init = (ruleset) => {
const addRule = (rule) => {
rules.push(rule)
rulesByComponent[rule.component] = rulesByComponent[rule.component] || []
rulesByComponent.push(rule)
rulesByComponent[rule.component].push(rule)
}
ruleset.forEach(rule => {
const findRules = (combination) => rule => {
if (combination.component !== rule.component) return false
if (Object.prototype.hasOwnProperty.call(rule, 'variant')) {
if (combination.variant !== rule.variant) return false
} else {
if (combination.variant !== 'normal') return false
}
})
if (Object.prototype.hasOwnProperty.call(rule, 'state')) {
const ruleStatesSet = new Set(['normal', ...(rule.state || [])])
return combination.state.every(state => ruleStatesSet.has(state))
} else {
if (combination.state.length !== 1 || combination.state[0] !== 'normal') return false
return true
}
}
const findLowerLevelRule = (parent, filter = () => true) => {
let lowerLevelComponent = null
let currentParent = parent
while (currentParent) {
const rulesParent = ruleset.filter(findRules(currentParent, true))
lowerLevelComponent = rulesParent[rulesParent.length - 1]
currentParent = currentParent.parent
if (lowerLevelComponent && filter(lowerLevelComponent)) currentParent = null
}
return filter(lowerLevelComponent) ? lowerLevelComponent : null
}
const processInnerComponent = (component, parent) => {
const {
@ -87,18 +117,82 @@ export const init = (ruleset) => {
return stateCombinations.map(state => ({ variant, state }))
}).reduce((acc, x) => [...acc, ...x], [])
const VIRTUAL_COMPONENTS = new Set(['Text', 'Link', 'Icon'])
stateVariantCombination.forEach(combination => {
// addRule(({
// parent,
// component: component.name,
// state: combination.state,
// variant: combination.variant
// }))
const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }))
const lastRule = existingRules[existingRules.length - 1]
if (existingRules.length !== 0) {
const { directives } = lastRule
const rgb = convert(directives.background).rgb
// TODO: DEFAULT TEXT COLOR
const bg = findLowerLevelRule(parent)?.cache.background || convert('#FFFFFF').rgb
if (!lastRule.cache?.background) {
const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
lastRule.cache = lastRule.cache || {}
lastRule.cache.background = blend
addRule(lastRule)
}
} else {
if (VIRTUAL_COMPONENTS.has(component.name)) {
const selector = component.name + ruleToSelector({ component: component.name, ...combination })
const lowerLevel = findLowerLevelRule(parent, (r) => {
if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
if (r.cache?.background === undefined) return false
if (r.cache.textDefined) {
return !r.cache.textDefined[selector]
}
return true
})
if (!lowerLevel) return
lowerLevel.cache.textDefined = lowerLevel.cache.textDefined || {}
lowerLevel.cache.textDefined[selector] = true
addRule({
parent,
component: component.name,
...combination,
directives: {
// TODO: DEFAULT TEXT COLOR
textColor: getTextColor(convert(lowerLevel.cache.background).rgb, convert('#FFFFFF').rgb, component.name === 'Link'),
// Debug: lets you see what it think background color should be
background: convert(lowerLevel.cache.background).hex
}
})
}
}
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
})
}
processInnerComponent(components[rootName])
return rules
// console.info(rules.map(x => [
// (parent?.component || 'root') + ' -> ' + x.component,
// // 'Cached background:' + convert(bg).hex,
// // 'Color: ' + convert(x.directives.background).hex + ' A:' + x.directives.opacity,
// JSON.stringify(x.directives)
// // '=> Blend: ' + convert(x.cache.background).hex
// ].join(' ')))
return {
raw: rules,
css: rules.map(rule => {
const header = ruleToSelector(rule) + ' {'
const footer = '}'
const directives = Object.entries(rule.directives).map(([k, v]) => {
switch (k) {
case 'background': return 'background-color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
case 'textColor': return 'color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
default: return ''
}
}).filter(x => x).map(x => ' ' + x).join(';\n')
return [header, directives, footer].join('\n')
})
}
}

7
test/unit/specs/services/theme_data/theme_data3.spec.js
View File

@ -1,8 +1,7 @@
// import { topoSort } from 'src/services/theme_data/theme_data.service.js'
import {
getAllPossibleCombinations,
init,
ruleToSelector
init
} from 'src/services/theme_data/theme_data_3.service.js'
import {
sampleRules
@ -19,8 +18,8 @@ describe.only('Theme Data 3', () => {
describe('init', () => {
it('test simple case', () => {
const out = init(sampleRules)
console.log(JSON.stringify(out, null, 2))
out.forEach(r => console.log(ruleToSelector(r)))
// console.log(JSON.stringify(out, null, 2))
console.log('\n' + out.css.join('\n') + '\n')
})
})
})