use different badge color for highlight/notification

css/glowingbear.css

@@ -23,6 +23,10 @@ body {
     color: deepskyblue;
 }
 
+.danger {
+    background-color: rgb(217, 83, 79);
+}
+
 .color-28 {
     color: greenyellow;
 }

index.html

@@ -70,7 +70,7 @@
           <div class="navbar-collapse collapse">
             <ul class="nav navbar-nav ">
               <li class="label" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
-              <a ng-click="setActiveBuffer(content.id)" title="{{ content.full_name }}">{{ content.short_name }} <span class="badge" ng-bind="content.unread"></span></a>
+              <a ng-click="setActiveBuffer(content.id)" title="{{ content.full_name }}">{{ content.short_name }} <span class="badge" ng-class="{'danger': content.highlight }" ng-bind="content.unread"></span></a>
               </li>
             </ul>
           </div>

js/websockets.js

@@ -312,6 +312,7 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
 
             if(!initial && (highlight || _.contains(tags_array, 'notify_private')) ) {
                 $rootScope.createHighlight(prefix, text, message, buffer, additionalContent);
+                $rootScope.buffers[buffer]['highlight'] = true;
             }
         }
     }
@@ -552,6 +553,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', 'connection
     $scope.setActiveBuffer = function(key) {
         $rootScope.activeBuffer['active'] = false;
         $rootScope.buffers[key]['active'] = true;
+        $rootScope.buffers[key]['highlight'] = false;
         $rootScope.buffers[key]['unread'] = '';
         $rootScope.activeBuffer = $rootScope.buffers[key];
         $rootScope.pageTitle = $rootScope.activeBuffer['short_name'] + ' | ' + $rootScope.activeBuffer['title'];