properly sort, properly do icon colors, some initial attachment buttons work
This commit is contained in:
parent
13a289ac74
commit
f0bbb75df5
23
src/components/attachment.style.js
Normal file
23
src/components/attachment.style.js
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
@ -16,6 +16,8 @@ export default {
|
|||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
directives: {
|
directives: {
|
||||||
|
background: '#ffffff',
|
||||||
|
opacity: 0,
|
||||||
shadow: []
|
shadow: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -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'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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({
|
||||||
|
Loading…
Reference in New Issue
Block a user