9 files changed, 80 insertions, 2 deletions

diff --git a/app/Resources/static/themes/material/css/index.scss b/app/Resources/static/themes/material/css/index.scss
index 285a6504..8300e430 100644
--- a/app/Resources/static/themes/material/css/index.scss
+++ b/app/Resources/static/themes/material/css/index.scss
@@ -8,6 +8,7 @@
 @import 'layout';
 @import 'nav';
 @import 'sidenav';
+@import 'notifications';
 @import 'various';
 
 /* Tools */
diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss
index 1a25a5be..601aada2 100644
--- a/app/Resources/static/themes/material/css/nav.scss
+++ b/app/Resources/static/themes/material/css/nav.scss
@@ -104,3 +104,7 @@ nav {
 #button_export {
   display: none;
 }
+
+#button_notifications a.nav-panel-menu {
+  max-height: 65px;
+}
diff --git a/app/Resources/static/themes/material/css/notifications.scss b/app/Resources/static/themes/material/css/notifications.scss
new file mode 100644
index 00000000..60114ce4
--- /dev/null
+++ b/app/Resources/static/themes/material/css/notifications.scss
@@ -0,0 +1,38 @@
+@mixin notification {
+  .notifications-area {
+    flex-grow: 1;
+
+    .collection {
+      margin: auto;
+    }
+  }
+
+  .no-notifications {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-40%, -50%);
+  }
+
+  .view-more {
+    display: block;
+    margin: auto 5px 10px;
+    flex: 0 1 2.5em;
+  }
+
+  .btn.notification-action-button {
+    display: block;
+    line-height: 25px;
+    height: auto;
+  }
+}
+
+.notifications-page {
+  @include notification;
+
+  .pagination {
+    float: none;
+    text-align: center;
+    margin-top: 30px;
+  }
+}
diff --git a/app/Resources/static/themes/material/css/sidenav.scss b/app/Resources/static/themes/material/css/sidenav.scss
index 416dc1c7..a86eed17 100644
--- a/app/Resources/static/themes/material/css/sidenav.scss
+++ b/app/Resources/static/themes/material/css/sidenav.scss
@@ -2,6 +2,8 @@
    Side-nav
    ========================================================================== */
 
+@import 'notifications';
+
 .side-nav {
   width: 240px;
 
@@ -36,6 +38,15 @@
   }
 }
 
+#notifications {
+  width: 300px;
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+
+  @include notification;
+}
+
 .bold > a {
   font-weight: bold;
 }
diff --git a/app/Resources/static/themes/material/css/various.scss b/app/Resources/static/themes/material/css/various.scss
index 7daf40ec..300015ab 100644
--- a/app/Resources/static/themes/material/css/various.scss
+++ b/app/Resources/static/themes/material/css/various.scss
@@ -30,3 +30,9 @@ nav .input-field input {
 .tab {
   flex: 1;
 }
+
+#notifications-count {
+  position: relative;
+  top: -50px;
+  left: 15px;
+}
diff --git a/app/Resources/static/themes/material/index.js b/app/Resources/static/themes/material/index.js
index d6afbb8a..435cd02f 100755
--- a/app/Resources/static/themes/material/index.js
+++ b/app/Resources/static/themes/material/index.js
@@ -8,7 +8,7 @@ import 'materialize-css/dist/js/materialize';
 import '../_global/index';
 
 /* Tools */
-import { initExport, initFilters } from './js/tools';
+import { initExport, initFilters, initNotifications } from './js/tools';
 
 /* Import shortcuts */
 import './js/shortcuts/main';
@@ -34,6 +34,7 @@ $(document).ready(() => {
   });
   initFilters();
   initExport();
+  initNotifications();
 
   $('#nav-btn-add-tag').on('click', () => {
     $('.nav-panel-add-tag').toggle(100);
diff --git a/app/Resources/static/themes/material/js/tools.js b/app/Resources/static/themes/material/js/tools.js
index 39398fd8..492640a0 100644
--- a/app/Resources/static/themes/material/js/tools.js
+++ b/app/Resources/static/themes/material/js/tools.js
@@ -21,4 +21,11 @@ function initExport() {
   }
 }
 
-export { initExport, initFilters };
+function initNotifications() {
+  if ($('div').is('#notifications')) {
+    $('#button_notifications').show();
+    $('.js-notifications-action').sideNav({ edge: 'right' });
+  }
+}
+
+export { initExport, initFilters, initNotifications };
diff --git a/app/config/services.yml b/app/config/services.yml
index 7b85d846..3b454760 100644
--- a/app/config/services.yml
+++ b/app/config/services.yml
@@ -13,14 +13,23 @@ services:
         tags:
             - { name: twig.extension }
 
+    twig.extension.date:
+        class: Twig_Extensions_Extension_Date
+        arguments:
+            - "@translator"
+        tags:
+            - { name: twig.extension }
+
     wallabag.twig_extension:
         class: Wallabag\CoreBundle\Twig\WallabagExtension
         public: false
         arguments:
             - "@wallabag_core.entry_repository"
             - "@wallabag_core.tag_repository"
+            - "@wallabag_core.notification_repository"
             - "@security.token_storage"
             - "%wallabag_core.cache_lifetime%"
+            - "%wallabag_core.notifications_nb%"
             - "@translator"
         tags:
             - { name: twig.extension }
diff --git a/app/config/wallabag.yml b/app/config/wallabag.yml
index b45934e4..ab12d68a 100644
--- a/app/config/wallabag.yml
+++ b/app/config/wallabag.yml
@@ -22,6 +22,7 @@ wallabag_core:
     cache_lifetime: 10
     action_mark_as_read: 1
     list_mode: 0
+    notifications_nb: 5
     fetching_error_message_title: 'No title found'
     fetching_error_message: |
         wallabag can't retrieve contents for this article. Please <a href="http://doc.wallabag.org/en/user/errors_during_fetching.html#how-can-i-help-to-fix-that">troubleshoot this issue</a>.