Rendering web notifications to the UI

librecores · Jul 10, 2019 · 6e9e494 · 6e9e494
1 parent 0f7fc47
commit 6e9e494
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 0 deletions.
diff --git a/site/app/Resources/views/base.html.twig b/site/app/Resources/views/base.html.twig
@@ -54,6 +54,29 @@
 
         <ul class="nav navbar-nav navbar-right">
           {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
+          <li class="dropdown">
+            <a href="#" class="notification-dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+              <i class="fa fa-bell"></i>
+              {{ mgilet_notification_count(app.user) }}
+              <span class="sr-only"></span>
+              <span class="caret"></span>
+              <ul class="notification-menu dropdown-menu notify-drop">
+                <div class="notify-drop-title">
+                  <div class="row">
+                    <div class="col-md-6 col-sm-6 col-xs-6 notifiable-user">Notifications ({{ mgilet_notification_count(app.user) }})</div>
+                    {# TODO: The settings link takes a user to Notification Settings #}
+                    <div class="col-md-6 col-sm-6 col-xs-6 text-right"><a href="#"><i class="fa fa-cog"></i></a></div>
+                  </div>
+                </div>
+                <div class="drop-content">
+                  {{ mgilet_notification_render(app.user, { 'template': './notification/notification_list.html.twig', 'order': 'DESC'}) }}
+                </div>
+                <div class="notify-drop-footer text-center">
+                  <a href="" class="notifiable-user"><i class="fa fa-eye"></i> {{ app.user }}</a>
+                </div>
+              </ul>
+            </a>
+          </li>
           <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
               <i class="fa fa-plus"></i>

diff --git a/site/app/Resources/views/notification/notification_list.html.twig b/site/app/Resources/views/notification/notification_list.html.twig
@@ -0,0 +1,38 @@
+{# Render Notifications #}
+ {% if mgilet_notification_count(app.user) != 0 %}
+     {% for notification in notificationList %}
+         <li>
+             {% if (notification.seen == false) %}
+                 {# Unseen Notification #}
+                 <div class="notification-unseen">
+                     <div class="col-xs-9 col-md-9 col-sm-9 notification-message">
+                         <i class="fa fa-eye-slash"></i>{{ notification.notification.message }}
+                     </div>
+                     <div class="col-xs-3 col-md-3 col-sm-3 notification-action">
+                         <button class="notification-markasseen"><i class="fa fa-eye fa-fw" aria-hidden="false"></i></button>
+                         <button class="notification-remove"><i class="fa fa-trash fa-fw" aria-hidden="false"></i></button>
+                     </div>
+                     <br>
+                     <p class="notification-date">
+                         {{ notification.notification.date|date("m/d/Y") }}
+                     </p>
+                 </div>
+             {% else %}
+                 {# Seen Notification #}
+                 <div class="notification-unseen">
+                     <div class="col-xs-9 col-md-9 col-sm-9 notification-message">
+                         {{ notification.notification.message }}
+                     </div>
+                     <div class="col-xs-3 col-md-3 col-sm-3 notification-action">
+                         <button class="notification-remove"><i class="fa fa-trash" aria-hidden="false"></i></button>
+                     </div>
+                     <p class="notification-date">
+                         {{ notification.notification.date|date("m/d/Y") }}
+                     </p>
+                 </div>
+             {% endif %}
+         </li>
+     {% endfor %}
+ {% else %}
+     <p>No Notifications for you yet!</p>
+ {% endif %}
diff --git a/site/assets/js/app.js b/site/assets/js/app.js
@@ -24,3 +24,21 @@ window.addEventListener("load", function(){
       }
     }
   })});
+
+// To stop Notification dropdown from disappearing when
+// anything inside it is clicked
+$(function() {
+  $('.notification-dropdown').on('click', function(event) {
+    $('.notification-menu').slideToggle();
+    event.stopPropagation();
+  });
+
+  $('.notification-menu').on('click', function(event) {
+    event.stopPropagation();
+  });
+
+  $(window).on('click', function() {
+    $('.notification-menu').slideUp();
+  });
+
+});
diff --git a/site/assets/scss/app.scss b/site/assets/scss/app.scss
@@ -982,3 +982,61 @@ a.classifiation-tag:hover {
     }
   }
 }
+
+// Notification Template
+.notify-drop{
+  min-width: 330px;
+  background-color: #fff;
+  min-height: 280px;
+  max-height: 280px;
+}
+.notify-drop .notify-drop-title {
+  border-bottom: 2px solid #e2e2e2;
+  padding: 5px 15px 10px 15px;
+}
+.notify-drop .notify-drop-title .notifiable-user{
+  font-weight: bold;
+  color: black;
+}
+.notify-drop .drop-content {
+  min-height: 200px;
+  max-height: 200px;
+  overflow-y: scroll;
+}
+.notify-drop .drop-content::-webkit-scrollbar-track {
+  background-color: #F5F5F5;
+}
+.notify-drop .drop-content::-webkit-scrollbar {
+  width: 8px;
+  background-color: #F5F5F5;
+}
+.notify-drop .drop-content::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+}
+.notify-drop .drop-content .notification-seen, .notification-unseen {
+  border-bottom: 1px solid #e2e2e2;
+}
+.notification-unseen{
+  background-color: #E0E0E0;
+}
+.notification-date{
+  font-size: 10px;
+  font-weight: 600;
+  top: -6px;
+  margin: 8px 0 0 0;
+  padding: 0 3px;
+  border: 1px solid #e2e2e2;
+  position: relative;
+  background-image: linear-gradient(#fff,#f2f2f2);
+  display: inline-block;
+  border-radius: 2px;
+  color: #B97745;
+}
+.notification-handlers{
+  margin:0;
+  padding:0;
+}
+.notification-markasseen, .notification-remove{
+  margin: 2px 0 0 2px;
+}
+