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

Revamp notifications stylesheet (grid and flex) (#2822)

Browse Source
This commit is contained in:
David Wheatley
2021-05-02 17:13:04 +01:00
committed by GitHub
parent 6f07235be0
commit 3893d92d4a
4 changed files with 186 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
framework/core/js/src/forum/components/Notification.js
View File

@@ -4,6 +4,7 @@ import icon from '../../common/helpers/icon';
import humanTime from '../../common/helpers/humanTime';
import Button from '../../common/components/Button';
import Link from '../../common/components/Link';
import classList from '../../common/utils/classList';
/**
* The `Notification` component abstract displays a single notification.
@@ -22,27 +23,31 @@ export default class Notification extends Component {
return (
<Link
className={'Notification Notification--' + notification.contentType() + ' ' + (!notification.isRead() ? 'unread' : '')}
className={classList('Notification', `Notification--${notification.contentType()}`, [!notification.isRead() && 'unread'])}
href={href}
external={href.includes('://')}
onclick={this.markAsRead.bind(this)}
>
{!notification.isRead() &&
Button.component({
className: 'Notification-action Button Button--icon Button--link',
icon: 'fas fa-check',
title: app.translator.trans('core.forum.notifications.mark_as_read_tooltip'),
onclick: (e) => {
{avatar(notification.fromUser())}
{icon(this.icon(), { className: 'Notification-icon' })}
<span className="Notification-title">
<span className="Notification-content">{this.content()}</span>
<span className="Notification-title-spring" />
{humanTime(notification.createdAt())}
</span>
{!notification.isRead() && (
<Button
className="Notification-action Button Button--link"
icon="fas fa-check"
title={app.translator.trans('core.forum.notifications.mark_as_read_tooltip')}
onclick={(e) => {
e.preventDefault();
e.stopPropagation();
this.markAsRead();
},
})}
{avatar(notification.fromUser())}
{icon(this.icon(), { className: 'Notification-icon' })}
<span className="Notification-content">{this.content()}</span>
{humanTime(notification.createdAt())}
}}
/>
)}
<div className="Notification-excerpt">{this.excerpt()}</div>
</Link>
);

24
framework/core/js/src/forum/components/NotificationList.js
View File

@@ -17,16 +17,16 @@ export default class NotificationList extends Component {
return (
<div className="NotificationList">
<div className="NotificationList-header">
<div className="App-primaryControl">
{Button.component({
className: 'Button Button--icon Button--link',
icon: 'fas fa-check',
title: app.translator.trans('core.forum.notifications.mark_all_as_read_tooltip'),
onclick: state.markAllAsRead.bind(state),
})}
</div>
<h4 className="App-titleControl App-titleControl--text">{app.translator.trans('core.forum.notifications.title')}</h4>
<div className="App-primaryControl">
<Button
className="Button Button--link"
icon="fas fa-check"
title={app.translator.trans('core.forum.notifications.mark_all_as_read_tooltip')}
onclick={state.markAllAsRead.bind(state)}
/>
</div>
</div>
<div className="NotificationList-content">
@@ -43,7 +43,7 @@ export default class NotificationList extends Component {
// Get the discussion that this notification is related to. If it's not
// directly related to a discussion, it may be related to a post or
// other entity which is related to a discussion.
let discussion = false;
let discussion = null;
if (subject instanceof Discussion) discussion = subject;
else if (subject && subject.discussion) discussion = subject.discussion();
@@ -65,8 +65,8 @@ export default class NotificationList extends Component {
<div className="NotificationGroup">
{group.discussion ? (
<Link className="NotificationGroup-header" href={app.route.discussion(group.discussion)}>
{badges && badges.length ? <ul className="NotificationGroup-badges badges">{listItems(badges)}</ul> : ''}
{group.discussion.title()}
{badges && badges.length && <ul className="NotificationGroup-badges badges">{listItems(badges)}</ul>}
<span>{group.discussion.title()}</span>
</Link>
) : (
<div className="NotificationGroup-header">{app.forum.attribute('title')}</div>

10
framework/core/js/src/forum/components/NotificationsDropdown.js
View File

@@ -1,5 +1,6 @@
import Dropdown from '../../common/components/Dropdown';
import icon from '../../common/helpers/icon';
import classList from '../../common/utils/classList';
import NotificationList from './NotificationList';
export default class NotificationsDropdown extends Dropdown {
@@ -9,6 +10,7 @@ export default class NotificationsDropdown extends Dropdown {
attrs.menuClassName = attrs.menuClassName || 'Dropdown-menu--right';
attrs.label = attrs.label || app.translator.trans('core.forum.notifications.tooltip');
attrs.icon = attrs.icon || 'fas fa-bell';
// For best a11y support, both `title` and `aria-label` should be used
attrs.accessibleToggleLabel = attrs.accessibleToggleLabel || app.translator.trans('core.forum.notifications.toggle_dropdown_accessible_label');
@@ -21,7 +23,7 @@ export default class NotificationsDropdown extends Dropdown {
vdom.attrs.title = this.attrs.label;
vdom.attrs.className += newNotifications ? ' new' : '';
vdom.attrs.className = classList(vdom.attrs.className, [newNotifications && 'new']);
vdom.attrs.onclick = this.onclick.bind(this);
return vdom;
@@ -32,15 +34,15 @@ export default class NotificationsDropdown extends Dropdown {
return [
icon(this.attrs.icon, { className: 'Button-icon' }),
unread ? <span className="NotificationsDropdown-unread">{unread}</span> : '',
unread !== 0 && <span className="NotificationsDropdown-unread">{unread}</span>,
<span className="Button-label">{this.attrs.label}</span>,
];
}
getMenu() {
return (
<div className={'Dropdown-menu ' + this.attrs.menuClassName} onclick={this.menuClick.bind(this)}>
{this.showing ? NotificationList.component({ state: this.attrs.state }) : ''}
<div className={classList('Dropdown-menu', this.attrs.menuClassName)} onclick={this.menuClick.bind(this)}>
{this.showing && NotificationList.component({ state: this.attrs.state })}
</div>
);
}