Added chat messages badge to count unseen messages when chat is not open.

html/main.html

@@ -14,7 +14,8 @@
     <status-message ng-controller="StatusmessageController"></status-message>
     <div class="ng-cloak right">
         <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="master.settings.screensharingMedia && (status=='connected' || status=='conference' || enabledScreenshare)" ng-model="enableScreenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
-        <button title="{{_('Chat')}}" ng-show="roomstatus" class="btn" ng-model="chatEnabled" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i></button>
+        <span class="badge" ng-show="chatMessagesUnseen && !chatEnabled">{{chatMessagesUnseen}}</span>
+        <button title="{{_('Chat')}}" ng-show="roomstatus" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="chatEnabled" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i></button>
         <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
         <button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button>
         <button title="{{_('Settings')}}" class="btn" ng-model="showSettings" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"><i class="fa fa-cog"></i></button>

src/styles/components/_bar.scss

@@ -116,6 +116,9 @@ background-color: #84b819;
 border-color: #84b819;
 color: white;
 }
+#bar .badge {
+background-color: #84b819;
+}
 #bar .userpicture {
 margin:-5px 0.5em 0px 0.5em;
 width:46px;

static/js/controllers/mediastreamcontroller.js

@@ -139,6 +139,7 @@ define(['underscore', 'bigscreen', 'moment', 'webrtc.adapter'], function(_, BigS
         $scope.microphoneMute = false;
         $scope.cameraMute = false;
         $scope.chatEnabled = false;
+        $scope.chatMessagesUnseen = 0;
         $scope.autoAccept = null;
         $scope.showBuddylist = true;
         $scope.master = {
@@ -661,6 +662,14 @@ define(['underscore', 'bigscreen', 'moment', 'webrtc.adapter'], function(_, BigS
 
         });
 
+        $scope.$on("chatincoming", function() {
+            $scope.chatMessagesUnseen++;
+        });
+
+        $scope.$on("chatseen", function() {
+            $scope.chatMessagesUnseen=0;
+        });
+
         _.defer(function() {
             if (!$window.webrtcDetectedVersion) {
                 alertify.dialog.alert(translation._("Your browser does not support WebRTC. No calls possible."));

static/js/directives/chat.js

@@ -139,11 +139,11 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                             scope.killRoom(id);
                         };
                         subscope.seen = function() {
+                            scope.$emit("chatseen");
                             if (subscope.newmessage) {
                                 subscope.newmessage = false;
                                 subscope.$broadcast("seen");
                             }
-
                         };
                         subscope.toggleMax = function() {
                             scope.toggleMax();
@@ -217,6 +217,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                             safeApply(subscope);
                         });
                         subscope.$on("incoming", function(event, message, from, userid) {
+                            scope.$emit("chatincoming");
                             if (subscope.firstmessage || !desktopNotify.windowHasFocus) {
                                 var room = event.targetScope.id;
                                 // Make sure we are not in group chat or the message is from ourselves