github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-01-19 18:12:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Mark notification as read without visiting discussion (#1874)

Browse Source
This commit is contained in:
David Sevilla Martín 2019-09-09 17:36:06 -04:00 committed by Franz Liedke
parent 2b624c935d
commit 24964b94bf
2 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/src/forum/components/Notification.js
View File

@ -2,6 +2,7 @@ import Component from '../../common/Component';
import avatar from '../../common/helpers/avatar'; import avatar from '../../common/helpers/avatar';
import icon from '../../common/helpers/icon'; import icon from '../../common/helpers/icon';
import humanTime from '../../common/helpers/humanTime'; import humanTime from '../../common/helpers/humanTime';
import Button from '../../common/components/Button';
/** /**
* The `Notification` component abstract displays a single notification. * The `Notification` component abstract displays a single notification.
@ -26,6 +27,17 @@ export default class Notification extends Component {
if (!isInitialized) $(element).click(this.markAsRead.bind(this)); if (!isInitialized) $(element).click(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 => {
e.preventDefault();
e.stopPropagation();
this.markAsRead();
}
})}
{avatar(notification.fromUser())} {avatar(notification.fromUser())}
{icon(this.icon(), {className: 'Notification-icon'})} {icon(this.icon(), {className: 'Notification-icon'})}
<span className="Notification-content">{this.content()}</span> <span className="Notification-content">{this.content()}</span>

25
less/forum/NotificationList.less
View File

@ -87,6 +87,10 @@
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background: @control-bg; background: @control-bg;
.Notification-action {
display: block;
}
} }
.Avatar { .Avatar {
.Avatar--size(24px); .Avatar--size(24px);
@ -98,6 +102,27 @@
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }
.Notification-action {
float: right;
display: none;
margin-top: -7px;
margin-right: -10px;
line-height: inherit;
padding: 5px 0;
& when (@config-colored-header = true) {
.Button--color(@control-color, @control-bg);
&:hover {
color: @link-color;
}
}
.icon {
font-size: 12px;
}
}
} }
.Notification-icon { .Notification-icon {
float: left; float: left;