sjw/pleroma-fe
1
0
Fork 0
mirror of https://git.pleroma.social/sjw/pleroma-fe.git synced 2024-12-23 14:05:16 +01:00
Code Issues Releases Wiki Activity

fixed oot selectors not working, added support for (webkit) scrollbars

Browse Source
This commit is contained in:
Henry Jameson 2024-02-18 20:11:06 +02:00
parent 3e198526e6
commit 13a289ac74
11 changed files with 214 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/App.scss
View File

@ -49,9 +49,8 @@ body {
&::-webkit-scrollbar-button,
&::-webkit-scrollbar-thumb {
background-color: var(--btn);
box-shadow: var(--buttonShadow);
border-radius: var(--btnRadius);
box-shadow: var(--shadow);
border-radius: var(--roundness);
}
// horizontal/vertical/increment/decrement are webkit-specific stuff
@ -60,7 +59,7 @@ body {
&::-webkit-scrollbar-button {
--___bgPadding: 2px;
color: var(--btnText);
color: var(--text);
background-repeat: no-repeat, no-repeat;
&:horizontal {
@ -68,15 +67,15 @@ body {
&:increment {
background-image:
linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
linear-gradient(45deg, var(--text) 50%, transparent 51%),
linear-gradient(-45deg, transparent 50%, var(--text) 51%);
background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
}
&:decrement {
background-image:
linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
linear-gradient(45deg, transparent 50%, var(--text) 51%),
linear-gradient(-45deg, var(--text) 50%, transparent 51%);
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
}
}
@ -86,15 +85,15 @@ body {
&:increment {
background-image:
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
linear-gradient(-45deg, transparent 50%, var(--text) 51%),
linear-gradient(45deg, transparent 50%, var(--text) 51%);
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
}
&:decrement {
background-image:
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
linear-gradient(-45deg, var(--text) 50%, transparent 51%),
linear-gradient(45deg, var(--text) 50%, transparent 51%);
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
}
}

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

@ -103,7 +103,7 @@ export default {
{
state: ['disabled'],
directives: {
background: '$blend(--background, 0.25, --parent)',
background: '$blend(--inheritedBackground, 0.25, --parent)',
shadow: [...buttonInsetFakeBorders]
}
},

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

@ -12,7 +12,8 @@ export default {
'MenuItem',
'Post',
'Notification',
'Alert'
'Alert',
'UserCard'
],
defaultRules: [
{

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

@ -14,7 +14,8 @@ export default {
'ButtonUnstyled',
'Input',
'MenuItem',
'Post'
'Post',
'UserCard'
],
defaultRules: [
{

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

@ -5,6 +5,8 @@ export default {
'Underlay',
'Modals',
'Popover',
'TopBar'
'TopBar',
'Scrollbar',
'ScrollbarElement'
]
}

11
src/components/scrollbar.style.js Normal file
View File

@ -0,0 +1,11 @@
export default {
name: 'Scrollbar',
selector: '::-webkit-scrollbar',
defaultRules: [
{
directives: {
background: '--bg'
}
}
]
}

101
src/components/scrollbar_element.style.js Normal file
View File

@ -0,0 +1,101 @@
const border = (top, shadow) => ({
x: 0,
y: top ? 1 : -1,
blur: 0,
spread: 0,
color: shadow ? '#000000' : '#FFFFFF',
alpha: 0.2,
inset: true
})
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
const inputInsetFakeBorders = [border(true, true), border(false, false)]
const buttonOuterShadow = {
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}
const hoverGlow = {
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '--text',
alpha: 1
}
export default {
name: 'ScrollbarElement',
selector: '::-webkit-scrollbar-button',
states: {
pressed: ':active',
hover: ':hover:not(:disabled)',
disabled: ':disabled'
},
validInnerComponents: [
'Text'
],
defaultRules: [
{
directives: {
background: '--fg',
shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
roundness: 3
}
},
{
state: ['hover'],
directives: {
shadow: [hoverGlow, ...buttonInsetFakeBorders]
}
},
{
state: ['pressed'],
directives: {
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
}
},
{
state: ['hover', 'pressed'],
directives: {
shadow: [hoverGlow, ...inputInsetFakeBorders]
}
},
{
state: ['toggled'],
directives: {
background: '--accent,-24.2',
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
}
},
{
state: ['toggled', 'hover'],
directives: {
background: '--accent,-24.2',
shadow: [hoverGlow, ...inputInsetFakeBorders]
}
},
{
state: ['disabled'],
directives: {
background: '$blend(--inheritedBackground, 0.25, --parent)',
shadow: [...buttonInsetFakeBorders]
}
},
{
component: 'Text',
parent: {
component: 'Button',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}

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

@ -11,7 +11,6 @@ export default {
],
defaultRules: [
{
component: 'Underlay',
directives: {
background: '#000000',
opacity: 0.2

40
src/components/user_card/user_card.style.js Normal file
View File

@ -0,0 +1,40 @@
export default {
name: 'UserCard',
selector: '.user-card',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Button',
'ButtonUnstyled',
'Input',
'RichContent',
'Alert'
],
defaultRules: [
{
directives: {
background: '--bg',
roundness: 3,
shadow: [{
x: 1,
y: 1,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}],
'--profileTint': '$alpha(--background, 0.5)'
}
},
{
parent: {
component: 'UserCard'
},
component: 'RichContent',
directives: {
opacity: 0
}
}
]
}

16
src/services/style_setter/style_setter.js
View File

@ -26,7 +26,21 @@ export const applyTheme = (input) => {
styleSheet.toString()
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
themes3.css(themes3.eager).forEach(rule => {
styleSheet.insertRule(rule, 'index-max')
// Hack to support multiple selectors on same component
if (rule.match(/::-webkit-scrollbar-button/)) {
const parts = rule.split(/[{}]/g)
const newRule = [
parts[0],
', ',
parts[0].replace(/button/, 'thumb'),
' {',
parts[1],
'}'
].join('')
styleSheet.insertRule(newRule, 'index-max')
} else {
styleSheet.insertRule(rule, 'index-max')
}
})
body.classList.remove('hidden')
themes3.lazy.then(lazyRules => {

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

@ -201,9 +201,12 @@ export const init = (extraRuleset, palette) => {
} else {
// TODO add support for --current prefix
switch (variableSlot) {
case 'background':
case 'inheritedBackground':
targetColor = convert(dynamicVars.inheritedBackground).rgb
break
case 'background':
targetColor = convert(dynamicVars.background).rgb
break
default:
targetColor = convert(palette[variableSlot]).rgb
}
@ -222,6 +225,15 @@ export const init = (extraRuleset, palette) => {
const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[a-zA-Z0-9-,.'"\s]*)\)/.exec(color).groups
const args = argsString.split(/,/g).map(a => a.trim())
switch (funcName) {
case 'alpha': {
if (args.length !== 2) {
throw new Error(`$alpha requires 2 arguments, ${args.length} were provided`)
}
const colorArg = convert(findColor(args[0], dynamicVars)).rgb
const amount = Number(args[1])
targetColor = { ...colorArg, a: amount }
break
}
case 'blend': {
if (args.length !== 3) {
throw new Error(`$blend requires 3 arguments, ${args.length} were provided`)
@ -374,7 +386,9 @@ export const init = (extraRuleset, palette) => {
combination.component = component.name
const soloSelector = ruleToSelector(combination, true)
const soloCssSelector = ruleToSelector(combination)
const selector = [parentSelector, soloSelector].filter(x => x).join(' ')
const cssSelector = [parentSelector, soloCssSelector].filter(x => x).join(' ')
const lowerLevelSelector = parentSelector
const lowerLevelBackground = computed[lowerLevelSelector]?.background
@ -399,6 +413,7 @@ export const init = (extraRuleset, palette) => {
computed[selector] = computed[selector] || {}
computed[selector].computedRule = computedRule
computed[selector].dynamicVars = dynamicVars
if (virtualComponents.has(component.name)) {
const virtualName = [
@ -471,7 +486,7 @@ export const init = (extraRuleset, palette) => {
}
addRule({
selector,
selector: cssSelector,
virtual: true,
component: component.name,
parent,
@ -533,9 +548,11 @@ export const init = (extraRuleset, palette) => {
computed[selector].background = { ...lowerLevelComputedBackground, a: 0 }
}
computed[selector].dynamicVars.background = computed[selector].background
if (addRuleNeeded) {
addRule({
selector,
selector: cssSelector,
component: component.name,
...combination,
parent,
@ -597,6 +614,7 @@ export const init = (extraRuleset, palette) => {
let directives
if (rule.component !== 'Root') {
directives = Object.entries(rule.directives).map(([k, v]) => {
const selector = ruleToSelector(rule, true)
switch (k) {
case 'roundness': {
return ' ' + [
@ -617,7 +635,7 @@ export const init = (extraRuleset, palette) => {
' --background: ' + v
].join(';\n')
}
const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity)
const color = cssColorString(computed[selector].background, rule.directives.opacity)
return [
'background-color: ' + color,
' --background: ' + color
@ -627,7 +645,12 @@ export const init = (extraRuleset, palette) => {
if (rule.directives.textNoCssColor === 'yes') { return '' }
return 'color: ' + v
}
default: return ''
default:
if (k.startsWith('--')) {
console.log('LOL', k, rgba2css(findColor(v, computed[selector].dynamicVars)))
return k + ': ' + rgba2css(findColor(v, computed[selector].dynamicVars))
}
return ''
}
}).filter(x => x).map(x => ' ' + x).join(';\n')
} else {