properly sort, properly do icon colors, some initial attachment buttons work

This commit is contained in:
Henry Jameson 2024-02-19 00:00:43 +02:00
parent 13a289ac74
commit f0bbb75df5
4 changed files with 49 additions and 11 deletions

View File

@ -0,0 +1,23 @@
export default {
name: 'Attachment',
selector: '.Attachment',
validInnerComponents: [
'Border',
'ButtonUnstyled'
],
defaultRules: [
{
directives: {
roundness: 3
}
},
{
component: 'ButtonUnstyled',
parent: { component: 'Attachment' },
directives: {
background: '#FFFFFF',
opacity: 0.9
}
}
]
}

View File

@ -16,6 +16,8 @@ export default {
defaultRules: [ defaultRules: [
{ {
directives: { directives: {
background: '#ffffff',
opacity: 0,
shadow: [] shadow: []
} }
}, },

View File

@ -6,7 +6,7 @@ export default {
{ {
component: 'Icon', component: 'Icon',
directives: { directives: {
textColor: '$blend(--parent, 0.5, --parent--text)', textColor: '$blend(--stack, 0.5, --parent--text)',
textAuto: 'no-auto' textAuto: 'no-auto'
} }
} }

View File

@ -16,7 +16,8 @@ const components = {
FunText: null, FunText: null,
Link: null, Link: null,
Icon: null, Icon: null,
Border: null Border: null,
Panel: null
} }
// Loading all style.js[on] files dynamically // Loading all style.js[on] files dynamically
@ -175,10 +176,14 @@ export const init = (extraRuleset, palette) => {
const parentsA = unroll(a).length const parentsA = unroll(a).length
const parentsB = unroll(b).length const parentsB = unroll(b).length
if (parentsA === parentsB || (parentsB !== 0 && parentsA !== 0)) return ai - bi if (parentsA === parentsB) {
if (a.component === 'Text') return -1
if (b.component === 'Text') return 1
return ai - bi
}
if (parentsA === 0 && parentsB !== 0) return -1 if (parentsA === 0 && parentsB !== 0) return -1
if (parentsB === 0 && parentsA !== 0) return 1 if (parentsB === 0 && parentsA !== 0) return 1
return 0 // failsafe, shouldn't happen? return parentsA - parentsB
}) })
.map(({ data }) => data) .map(({ data }) => data)
@ -190,7 +195,12 @@ export const init = (extraRuleset, palette) => {
if (color.startsWith('--')) { if (color.startsWith('--')) {
const [variable, modifier] = color.split(/,/g).map(str => str.trim()) const [variable, modifier] = color.split(/,/g).map(str => str.trim())
const variableSlot = variable.substring(2) const variableSlot = variable.substring(2)
if (variableSlot.startsWith('parent')) { if (variableSlot === 'stack') {
console.log(dynamicVars)
console.log(stacked)
const { r, g, b } = dynamicVars.stacked
targetColor = { r, g, b }
} else if (variableSlot.startsWith('parent')) {
if (variableSlot === 'parent') { if (variableSlot === 'parent') {
const { r, g, b } = dynamicVars.lowerLevelBackground const { r, g, b } = dynamicVars.lowerLevelBackground
targetColor = { r, g, b } targetColor = { r, g, b }
@ -451,6 +461,7 @@ export const init = (extraRuleset, palette) => {
} }
dynamicVars.inheritedBackground = lowerLevelBackground dynamicVars.inheritedBackground = lowerLevelBackground
dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars)).rgb const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars)).rgb
const textColor = newTextRule.directives.textAuto === 'no-auto' const textColor = newTextRule.directives.textAuto === 'no-auto'
@ -500,7 +511,7 @@ export const init = (extraRuleset, palette) => {
let addRuleNeeded = false let addRuleNeeded = false
// TODO: DEFAULT TEXT COLOR // TODO: DEFAULT TEXT COLOR
const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb
if (computedDirectives.shadow != null || computedDirectives.roundness != null) { if (computedDirectives.shadow != null || computedDirectives.roundness != null) {
addRuleNeeded = true addRuleNeeded = true
@ -532,11 +543,12 @@ export const init = (extraRuleset, palette) => {
if (alpha >= 1) { if (alpha >= 1) {
blend = rgb blend = rgb
} else if (alpha <= 0) { } else if (alpha <= 0) {
blend = lowerLevelComputedBackground blend = lowerLevelStackedBackground
} else { } else {
blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelComputedBackground) blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelStackedBackground)
} }
stacked[selector] = blend stacked[selector] = blend
dynamicVars.stacked = blend
computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 } computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
} }
} }
@ -544,11 +556,12 @@ export const init = (extraRuleset, palette) => {
if (!stacked[selector]) { if (!stacked[selector]) {
computedDirectives.background = 'transparent' computedDirectives.background = 'transparent'
computedDirectives.opacity = 0 computedDirectives.opacity = 0
stacked[selector] = lowerLevelComputedBackground stacked[selector] = lowerLevelStackedBackground
computed[selector].background = { ...lowerLevelComputedBackground, a: 0 } computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
} }
computed[selector].dynamicVars.background = computed[selector].background dynamicVars.stacked = lowerLevelStackedBackground
dynamicVars.background = computed[selector].background
if (addRuleNeeded) { if (addRuleNeeded) {
addRule({ addRule({