Notifications

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

7 files changed, 70 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 };