mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-07-18 07:11:17 +02:00
Code Issues Releases Wiki Activity

[1.x] Custom Colorising with CSS Custom Properties (#3001)

Browse Source 
* Start of conversion to CSS variables
* Use variable for Badge colors
* Use variable for avatar bg
* Use variable for user card bg
* Use css variables for hero
* Use css variables for buttons
* Use css variables for sidenav links
* Cleaner style attr

Co-authored-by: David Wheatley <hi@davwheat.dev>
This commit is contained in:
Sami Mazouz
2021-08-16 10:17:48 +01:00
committed by GitHub
parent ac4cd4f84d
commit ace08b4869
16 changed files with 50 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
framework/core/js/src/admin/components/EditGroupModal.js
View File

@@ -32,7 +32,7 @@ export default class EditGroupModal extends Modal {
this.color() || this.icon()
? Badge.component({
icon: this.icon(),
style: { backgroundColor: this.color() },
color: this.color(),
})
: '',
' ',

5
framework/core/js/src/common/components/Badge.js
View File

@@ -18,15 +18,18 @@ import classList from '../utils/classList';
*/
export default class Badge extends Component {
view() {
const { type, icon: iconName, label, ...attrs } = this.attrs;
const { type, icon: iconName, label, color, style = {}, ...attrs } = this.attrs;
const className = classList('Badge', [type && `Badge--${type}`], attrs.className);
const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;');
const newStyle = { ...style, '--badge-bg': color };
const badgeAttrs = {
...attrs,
className,
style: newStyle,
};
const badgeNode = <div {...badgeAttrs}>{iconChild}</div>;

2
framework/core/js/src/common/components/GroupBadge.js
View File

@@ -6,7 +6,7 @@ export default class GroupBadge extends Badge {
if (attrs.group) {
attrs.icon = attrs.group.icon();
attrs.style = { backgroundColor: attrs.group.color() };
attrs.color = attrs.group.color();
attrs.label = typeof attrs.label === 'undefined' ? attrs.group.nameSingular() : attrs.label;
attrs.type = 'group--' + attrs.group.id();

2
framework/core/js/src/common/helpers/avatar.tsx
View File

@@ -31,7 +31,7 @@ export default function avatar(user: User, attrs: Object = {}): Mithril.Vnode {
}
content = username.charAt(0).toUpperCase();
attrs.style = { background: user.color() };
attrs.style = { '--avatar-bg': user.color() };
}
return <span {...attrs}>{content}</span>;

2
framework/core/js/src/forum/components/UserCard.js
View File

@@ -30,7 +30,7 @@ export default class UserCard extends Component {
const badges = user.badges().toArray();
return (
<div className={'UserCard ' + (this.attrs.className || '')} style={color ? { backgroundColor: color } : ''}>
<div className={'UserCard ' + (this.attrs.className || '')} style={color && { '--usercard-bg': color }}>
<div className="darkenBackground">
<div className="container">
{controls.length