Mark notification as read without visiting discussion (#1874)

js/src/forum/components/Notification.js

@@ -2,6 +2,7 @@ import Component from '../../common/Component';
 import avatar from '../../common/helpers/avatar';
 import icon from '../../common/helpers/icon';
 import humanTime from '../../common/helpers/humanTime';
+import Button from '../../common/components/Button';
 
 /**
  * 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));
         }}>
+        {!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())}
         {icon(this.icon(), {className: 'Notification-icon'})}
         <span className="Notification-content">{this.content()}</span>

less/forum/NotificationList.less

@@ -87,6 +87,10 @@
   &:hover {
     text-decoration: none;
     background: @control-bg;
+    
+    .Notification-action {
+      display: block;
+    }
   }
   .Avatar {
     .Avatar--size(24px);
@@ -98,6 +102,27 @@
     font-weight: bold;
     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 {
   float: left;