finished new notification system

js/apps/system/aardvark/frontend/js/templates/userBarView.ejs

@@ -1,9 +1,7 @@
 <ul class="navlist" id="userBarUl">
 
   <div class="navlogo">
-    <a id="stat_hd" class="notificationButton">
-      <img src="img/tmpNotificationCounter.jpg">
-    </a>
+    <div id="stat_hd" class="notificationButton"><a id="stat_hd_counter">0</a></div>
   </div>
 
   <li class="dropdown">
@@ -27,10 +25,7 @@
   <li class="dropdown">
     <ul class="user-dropdown-menu fixedDropdown" id="notification_menu">
       <li class="dropdown-header"><a>Notifications</a></li>
-        <ul class="innerDropdownInnerUL">
-
-        </ul>
-
+      <ul class="innerDropdownInnerUL"></ul>
       <button id="removeAllNotifications" class="btn btn-danger">Clear</button>
     </ul>
   </li>

js/apps/system/aardvark/frontend/js/views/userBarView.js

@@ -11,12 +11,14 @@
       "mouseenter .dropdown": "showDropdown",
       "mouseleave .dropdown": "hideDropdown",
       "click .navlogo #stat_hd" : "toggleNotification",
-      "click .notificationItem .fa" : "removeNotification"
+      "click .notificationItem .fa" : "removeNotification",
+      "click #removeAllNotifications" : "removeAllNotifications"
     },
 
     initialize: function () {
       this.collection.bind("add", this.renderNotifications.bind(this));
       this.collection.bind("remove", this.renderNotifications.bind(this));
+      this.collection.bind("reset", this.renderNotifications.bind(this));
     },
 
     notificationItem: templateEngine.createTemplate("notificationItem.ejs"),
@@ -67,8 +69,9 @@
       }
     },
 
-    updateNotifications: function() {
-      this.renderNotifications();
+    removeAllNotifications: function () {
+      console.log("reset");
+      this.collection.reset();
     },
 
     removeNotification: function(e) {
@@ -77,6 +80,15 @@
     },
 
     renderNotifications: function() {
+
+      $('#stat_hd_counter').text(this.collection.length);
+      if (this.collection.length === 0) {
+        $('#stat_hd').removeClass('fullNotification');
+      }
+      else {
+        $('#stat_hd').addClass('fullNotification');
+      }
+
       $('.innerDropdownInnerUL').html(this.notificationItem.render({
         notifications : this.collection
       }));
@@ -99,7 +111,7 @@
       this.renderNotifications();
 
       this.delegateEvents();
-      this.updateNotifications();
+      this.renderNotifications();
       return this.$el;
     }
   });

js/apps/system/aardvark/frontend/scss/_notification.scss

@@ -22,9 +22,9 @@
 }
 
 .fixedDropdown .notificationItemContent {
-  width: 170px;
+  width: 160px;
   float: left;
-  margin-left: 5px;
+  margin-left: 15px;
 }
 
 .fixedDropdown button {
@@ -42,13 +42,15 @@
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 }
 
+.innerDropdownInnerUL .dropdown-item:hover {
+  background-color: #E1E1E1 !important;
+}
+
 .innerDropdownInnerUL li {
   width: auto !important;
 }
 
 .innerDropdownInnerUL li:last-child {
-  color: red;
-  border-bottom: 0;
 }
 
 .fixedDropdown .notificationItem {
@@ -56,5 +58,42 @@
 }
 
 .notificationItem i {
-  float:left;
+  color: rgba(0, 0, 0, 0.2);
+  float: left;
+  font-size: 20px;
+  position: relative;
+  right: 8px;
+  top: -9px;
+}
+
+.notificationItem i:hover {
+  color: rgba(0, 0, 0, 1);
+  cursor: pointer;
+}
+
+#stat_hd {
+  width: 19px;
+  height: 19px;
+  margin-top: 7px;
+  background-color: #333232;
+  border-radius: 3px;
+  border: 2px solid #8AA051;
+}
+
+.notificationItemContent {
+  font-weight: 300;
+}
+
+#stat_hd:hover {
+  cursor:pointer;
+}
+
+.fullNotification {
+  border: 2px solid red !important;
+  background-color: red !important;
+}
+
+#stat_hd #stat_hd_counter {
+  color: white;
+  margin-left: 5px;
 }

js/apps/system/aardvark/frontend/scss/generated.css

@@ -253,9 +253,9 @@ li.tile {
   padding-left: 5px !important; }
 
 .fixedDropdown .notificationItemContent {
-  width: 170px;
+  width: 160px;
   float: left;
-  margin-left: 5px; }
+  margin-left: 15px; }
 
 .fixedDropdown button {
   float: right;
@@ -270,15 +270,45 @@ li.tile {
   float: left;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
 
+.innerDropdownInnerUL .dropdown-item:hover {
+  background-color: #E1E1E1 !important; }
+
 .innerDropdownInnerUL li {
   width: auto !important; }
 
-.innerDropdownInnerUL li:last-child {
-  color: red;
-  border-bottom: 0; }
-
 .fixedDropdown .notificationItem {
   color: black; }
 
 .notificationItem i {
-  float: left; }
+  color: rgba(0, 0, 0, 0.2);
+  float: left;
+  font-size: 20px;
+  position: relative;
+  right: 8px;
+  top: -9px; }
+
+.notificationItem i:hover {
+  color: black;
+  cursor: pointer; }
+
+#stat_hd {
+  width: 19px;
+  height: 19px;
+  margin-top: 7px;
+  background-color: #333232;
+  border-radius: 3px;
+  border: 2px solid #8AA051; }
+
+.notificationItemContent {
+  font-weight: 300; }
+
+#stat_hd:hover {
+  cursor: pointer; }
+
+.fullNotification {
+  border: 2px solid red !important;
+  background-color: red !important; }
+
+#stat_hd #stat_hd_counter {
+  color: white;
+  margin-left: 5px; }