dashboard: add notification count to favicon

circle/bower.json

@@ -18,6 +18,7 @@
     "jquery-knob": "~1.2.9",
     "jquery-simple-slider": "https://github.com/BME-IK/jquery-simple-slider.git",
     "bootbox": "~4.3.0",
-    "intro.js": "0.9.0"
+    "intro.js": "0.9.0",
+    "favico.js": "~0.3.5"
   }
 }

circle/circle/settings/base.py

@@ -197,6 +197,7 @@ PIPELINE_JS = {
         "intro.js/intro.js",
         "jquery-knob/dist/jquery.knob.min.js",
         "jquery-simple-slider/js/simple-slider.js",
+        "favico.js/favico.js",
         "dashboard/dashboard.js",
         "dashboard/activity.js",
         "dashboard/group-details.js",

circle/dashboard/static/dashboard/dashboard.js

 $(function () {
+  var favicon= new Favico({
+        animation:'none'
+  });
+
+  var notifications = $("#notification_count").data("notifications");
+  favicon.badge(notifications);
+
   $(".not-tab-pane").removeClass("not-tab-pane").addClass("tab-pane");
 
   $('.vm-create').click(function(e) {
@@ -311,6 +318,8 @@ $(function () {
   $("#notification-button a").click(function() {
     $('#notification-messages').load("/dashboard/notifications/");
     $('#notification-button a span[class*="badge-pulse"]').remove();
+
+    favicon.reset();
   });
   
   /* on the client confirmation button fire the clientInstalledAction */
@@ -349,7 +358,6 @@ $(function () {
     li.addClass('panel-primary').find('input').prop("checked", true);
     return true;
   });
-
 });
 
 function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {

circle/dashboard/templates/dashboard/base.html

@@ -21,10 +21,13 @@
   <ul class="nav navbar-nav pull-right">
     <li class="dropdown" id="notification-button">
       <a href="{% url "dashboard.views.notifications" %}"
-        class="dropdown-toggle" data-toggle="dropdown">
+        class="dropdown-toggle" data-toggle="dropdown"
+        id="notification_count" data-notifications="{{ NEW_NOTIFICATIONS_COUNT }}">
         {% trans "Notifications" %}
         {% if NEW_NOTIFICATIONS_COUNT > 0 %}
-          <span class="badge badge-pulse">{{ NEW_NOTIFICATIONS_COUNT }}</span>
+          <span class="badge badge-pulse">
+            {{ NEW_NOTIFICATIONS_COUNT }}
+          </span>
         {% endif %}
       </a>
       <ul class="dropdown-menu" id="notification-messages">