From 24964b94bf8435f3201974de6ff57284cff511f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Sevilla=20Mart=C3=ADn?=
 <6401250+datitisev@users.noreply.github.com>
Date: Mon, 9 Sep 2019 17:36:06 -0400
Subject: [PATCH] Mark notification as read without visiting discussion (#1874)

---
 js/src/forum/components/Notification.js | 12 ++++++++++++
 less/forum/NotificationList.less        | 25 +++++++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/js/src/forum/components/Notification.js b/js/src/forum/components/Notification.js
index 7ebc3fc28..52ecea3ba 100644
--- a/js/src/forum/components/Notification.js
+++ b/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>
diff --git a/less/forum/NotificationList.less b/less/forum/NotificationList.less
index e79c611f8..317923fc8 100644
--- a/less/forum/NotificationList.less
+++ b/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;