notification prep. + karma fix

js/apps/system/aardvark/frontend/css/layout.css

@@ -265,3 +265,64 @@ li a [class^="icon_arangodb"], li a [class*=" icon_arangodb"] {
   font-size: 23px;
   color: #736B68;
 }
+/*copy to scss*/
+.fixedDropdown {
+  margin: 34px 0 0 0 !important;
+  border-radius: 0 !important;
+  width: 210px;
+}
+
+.fixedDropdown:after {
+  visibility: hidden;
+}
+
+.fixedDropdown .dropdown-item {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.fixedDropdown .dropdown-header {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 0 !important;
+}
+
+.fixedDropdown a {
+  padding-left: 5px !important;
+}
+
+.fixedDropdown .notificationItemContent {
+  width: 170px;
+  float: left;
+  margin-left: 5px;
+}
+
+.fixedDropdown button {
+  float:right;
+  margin-right: 5px;
+}
+
+.innerDropdownInnerUL {
+  min-height: 220px;
+  height: 220px !important;
+  width: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  float: left;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.innerDropdownInnerUL li {
+  width: auto !important;
+}
+
+.innerDropdownInnerUL li:last-child {
+  color: red;
+  border-bottom: 0;
+}
+
+.fixedDropdown .notificationItem {
+  color: black;
+}
+
+.notificationItem i {
+  float:left;
+}

js/apps/system/aardvark/frontend/css/navigationView.css

@@ -61,3 +61,6 @@ body, input, textarea, .page-title span, .pingback a.url {
   margin-right: 15px;
 }
 
+.fixedDropdown {
+  margin: 34px 0 0 !important;
+}

js/apps/system/aardvark/frontend/js/routers/router.js

@@ -66,7 +66,6 @@
       });
 
       this.foxxList = new window.FoxxCollection();
-      this.notificationList = new window.NotificationCollection();
 
       this.footerView = new window.FooterView();
       this.naviView = new window.NavigationView();

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

@@ -0,0 +1,10 @@
+
+          <% var i; for (i=0; i < notifications.length; i++) { %>
+            <li class="dropdown-item">
+              <div class="notificationItem">
+                <a class="notificationItemTitle"><%=notifications[i].attributes.title%></a>
+                <div class="notificationItemContent"><%=notifications[i].attributes.content%></div>
+                <i class="fa fa-times-circle-o"></i>
+              </div>
+            </li>
+          <% console.log(i); } %>

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

@@ -1,7 +1,7 @@
 <ul class="navlist" id="userBarUl">
 
   <div class="navlogo">
-    <a id="stat_hd" class="notificationButton" href="#dashboard">
+    <a id="stat_hd" class="notificationButton">
       <img src="img/tmpNotificationCounter.jpg">
     </a>
   </div>
@@ -23,4 +23,19 @@
       </li>
     </ul>
   </li>
+
+  <li class="dropdown">
+    <ul class="user-dropdown-menu fixedDropdown" id="notification_menu">
+      <li class="dropdown-header"><a>Notifications</a></li>
+        <ul class="innerDropdownInnerUL">
+
+        </ul>
+
+      <button id="removeAllNotifications" class="btn btn-danger">Clear</button>
+    </ul>
+  </li>
+
+
+
+
 </ul>

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

@@ -426,6 +426,7 @@
           deleted = true;
         }
         else if (result === false) {
+          arangoHelper.arangoError('Doc error');
         }
       }
       else if (this.type === 'edge') {

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

@@ -9,9 +9,16 @@
       "change #userBarSelect": "navigateBySelect",
       "click .tab": "navigateByTab",
       "mouseenter .dropdown": "showDropdown",
-      "mouseleave .dropdown": "hideDropdown"
+      "mouseleave .dropdown": "hideDropdown",
+      "click .navlogo #stat_hd" : "toggleNotification"
     },
 
+    initialize: function () {
+      this.notificationList = new window.NotificationCollection();
+    },
+
+    notificationItem: templateEngine.createTemplate("notificationItem.ejs"),
+
     template: templateEngine.createTemplate("userBarView.ejs"),
 
     navigateBySelect: function () {
@@ -32,6 +39,10 @@
       e.preventDefault();
     },
 
+    toggleNotification: function (e) {
+      $('#notification_menu').toggle();
+    },
+
     showDropdown: function (e) {
       var tab = e.target || e.srcElement;
       var navigateTo = tab.id;
@@ -54,15 +65,29 @@
       }
     },
 
+    updateNotifications: function() {
+      this.renderNotifications();
+    },
+
+    renderNotifications: function() {
+      $('.innerDropdownInnerUL').html(this.notificationItem.render({
+        notifications : this.notificationList.models
+      }));
+    },
+
     render: function (el) {
-      console.log(el);
       this.$el = el;
       this.$el.html(this.template.render({
         img : "https://s.gravatar.com/avatar/9c53a795affc3c3c03801ffae90e2e11?s=80",
         prename : "Floyd",
-        lastname : "Pepper"
+        lastname : "Pepper",
+        notifications : this.notificationList.models
       }));
+
+      this.renderNotifications();
+
       this.delegateEvents();
+      this.updateNotifications();
       return this.$el;
     }
   });