7 files changed, 93 insertions, 19 deletions

diff --git a/app/Resources/static/themes/material/index.js b/app/Resources/static/themes/material/index.js
index e16749f6..ba4552b8 100755
--- a/app/Resources/static/themes/material/index.js
+++ b/app/Resources/static/themes/material/index.js
@@ -77,12 +77,12 @@ $(document).ready(() => {
     $('.progress .determinate').css('width', `${scrollPercent}%`);
   });
 
-  $('.notification').on('click', () => {
-    $.ajax({
-      url: Routing.generate('notification-archive-all'),
-      method: 'GET',
-    }).done(() => {
+  $('.notification .notification-action').on('click', (e) => {
+    const id = parseInt($(e.target).attr('data-id'), 10);
+    fetch(Routing.generate('notification-archive', { notification: id }), { credentials: 'same-origin' }).then(() => {
+      $(e.target).parents('.notification').removeClass('light-blue lighten-5');
       $('#notifications').sideNav('hide');
     });
+    return true;
   });
 });
diff --git a/src/Wallabag/CoreBundle/Controller/NotificationsController.php b/src/Wallabag/CoreBundle/Controller/NotificationsController.php
index 24870b37..0717ff47 100644
--- a/src/Wallabag/CoreBundle/Controller/NotificationsController.php
+++ b/src/Wallabag/CoreBundle/Controller/NotificationsController.php
@@ -6,6 +6,7 @@ use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Wallabag\CoreBundle\Entity\Notification;
 
 class NotificationsController extends Controller
 {
@@ -35,4 +36,22 @@ class NotificationsController extends Controller
 
         return $this->redirectToRoute('notifications-all');
     }
+
+    /**
+     * @Route("/notifications/read/{notification}", name="notification-archive")
+     *
+     * @param Notification $notification
+     * @return Response
+     */
+    public function markNotificationsAsReadAction(Notification $notification)
+    {
+        $em = $this->getDoctrine()->getManager();
+
+        $notification->setRead(true);
+
+        $em->persist($notification);
+        $em->flush();
+
+        return $this->redirectToRoute('notifications-all');
+    }
 }
diff --git a/src/Wallabag/CoreBundle/Notifications/InfoAction.php b/src/Wallabag/CoreBundle/Notifications/InfoAction.php
new file mode 100644
index 00000000..56567903
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Notifications/InfoAction.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Wallabag\CoreBundle\Notifications;
+
+class InfoAction extends Action {
+
+    public function __construct($link)
+    {
+        $this->link = $link;
+        $this->label = 'Info';
+        $this->type = Action::TYPE_INFO;
+    }
+}
diff --git a/src/Wallabag/CoreBundle/Notifications/NoAction.php b/src/Wallabag/CoreBundle/Notifications/NoAction.php
new file mode 100644
index 00000000..73c92796
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Notifications/NoAction.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Wallabag\CoreBundle\Notifications;
+
+class NoAction extends Action {
+
+    public function __construct($link)
+    {
+        $this->link = $link;
+        $this->label = 'No';
+        $this->type = Action::TYPE_NO;
+    }
+}
diff --git a/src/Wallabag/CoreBundle/Notifications/OkAction.php b/src/Wallabag/CoreBundle/Notifications/OkAction.php
new file mode 100644
index 00000000..2b4dde03
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Notifications/OkAction.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Wallabag\CoreBundle\Notifications;
+
+class OkAction extends Action {
+
+    public function __construct($link)
+    {
+        $this->link = $link;
+        $this->label = 'OK';
+        $this->type = Action::TYPE_OK;
+    }
+}
diff --git a/src/Wallabag/CoreBundle/Notifications/YesAction.php b/src/Wallabag/CoreBundle/Notifications/YesAction.php
new file mode 100644
index 00000000..340733ff
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Notifications/YesAction.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Wallabag\CoreBundle\Notifications;
+
+class YesAction extends Action {
+
+    public function __construct($link)
+    {
+        $this->link = $link;
+        $this->label = 'Yes';
+        $this->type = Action::TYPE_YES;
+    }
+}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Notification/notifications.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Notification/notifications.html.twig
index bc72c704..7c0f8c44 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Notification/notifications.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Notification/notifications.html.twig
@@ -7,7 +7,7 @@
         <div class="col l6 offset-l3">
             <ul class="collection">
             {% for notification in notifications | slice(0, 10) %}
-                <li class="collection-item avatar{% if not notification.read %} light-blue lighten-5{% else %} grey-text{% endif %}">
+                <li class="notification collection-item avatar{% if not notification.read %} light-blue lighten-5{% else %} grey-text{% endif %}">
                     <i class="material-icons circle">{% spaceless %}
                             {% if notification.type == constant('TYPE_ADMIN', notification) %}
                                 build
@@ -18,20 +18,23 @@
                             {% endif %}
                         {% endspaceless %}</i>
                     <span class="title">{{ notification.title }}</span>
-                    <p><em>{{ notification.timestamp | date }}</p>
+                    <p><em>{{ notification.timestamp | date }}</em></p>
                     <div class="secondary-content">
-                        {% for action in notification.actions %}
-                            <a class="btn waves-effect waves-light {% spaceless %}
-                               {% if action.type == constant('TYPE_OK', action) %}
-                               {% elseif action.type == constant('TYPE_YES', action) %}
-                                    cyan
-                               {% elseif action.type == constant('TYPE_NO', action) %}
-                                    red
-                               {% elseif action.type == constant('TYPE_INFO', action) %}
-                                    blue-grey
-                               {% endif %}
-                                {% endspaceless %}" href="{{ action.link }}">{{ action.label }}</a>
-                        {% endfor %}
+                        {% if not notification.read %}
+                            {% for action in notification.actions %}
+                                <a class="notification-action btn waves-effect waves-light {% spaceless %}
+                                   {% if action.type == constant('TYPE_OK', action) %}
+                                   {% elseif action.type == constant('TYPE_YES', action) %}
+                                        cyan
+                                   {% elseif action.type == constant('TYPE_NO', action) %}
+                                        red
+                                   {% elseif action.type == constant('TYPE_INFO', action) %}
+                                        blue-grey
+                                   {% endif %}
+                                    {% endspaceless %}" data-id="{{ notification.id }}" href="{{ action.link }}">{{ action.label }}</a>
+                            {% endfor %}
+                        <button class="notification-action waves-effect waves-teal btn-flat" data-id="{{ notification.id }}"><i data-id="{{ notification.id }}" class="material-icons">check</i></button>
+                        {% endif %}
                     </div>
                 </li>
             {% endfor %}