mirror of
https://github.com/flarum/framework.git
synced 2024-11-25 09:41:49 +08:00
a9ded36b57
- Get rid of Bootstrap (except we still rely on some JS) - Use BEM class names - Rework variables/theme config - Fix various bugs, including some on mobile The CSS is still not ideal – it needs to be cleaned up some more. But that can be a focus for after beta.
44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
import Component from 'flarum/Component';
|
|
import icon from 'flarum/helpers/icon';
|
|
import extract from 'flarum/utils/extract';
|
|
|
|
/**
|
|
* The `Badge` component represents a user/discussion badge, indicating some
|
|
* status (e.g. a discussion is stickied, a user is an admin).
|
|
*
|
|
* A badge may have the following special props:
|
|
*
|
|
* - `type` The type of badge this is. This will be used to give the badge a
|
|
* class name of `Badge--{type}`.
|
|
* - `icon` The name of an icon to show inside the badge.
|
|
*
|
|
* All other props will be assigned as attributes on the badge element.
|
|
*/
|
|
export default class Badge extends Component {
|
|
view() {
|
|
const attrs = Object.assign({}, this.props);
|
|
const type = extract(attrs, 'type');
|
|
const iconName = extract(attrs, 'icon');
|
|
|
|
attrs.className = 'Badge Badge--' + type + ' ' + (attrs.className || '');
|
|
attrs.title = extract(attrs, 'label');
|
|
|
|
// Give the badge a unique key so that when badges are displayed together,
|
|
// and then one is added/removed, Mithril will correctly redraw the series
|
|
// of badges.
|
|
attrs.key = attrs.className;
|
|
|
|
return (
|
|
<span {...attrs}>
|
|
{iconName ? icon(iconName, {className: 'Badge-icon'}) : ''}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
config(isInitialized) {
|
|
if (isInitialized) return;
|
|
|
|
this.$().tooltip();
|
|
}
|
|
}
|