From fb20b1733037a4b96490a66a2a76a93c046dab18 Mon Sep 17 00:00:00 2001
From: Simon Eisenmann <simon@struktur.de>
Date: Mon, 17 Mar 2014 12:35:30 +0100
Subject: [PATCH] Added chat messages badge to count unseen messages when chat
 is not open.

---
 html/main.html                                 | 3 ++-
 src/styles/components/_bar.scss                | 3 +++
 static/js/controllers/mediastreamcontroller.js | 9 +++++++++
 static/js/directives/chat.js                   | 3 ++-
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/html/main.html b/html/main.html
index 196232ff..6438c264 100644
--- a/html/main.html
+++ b/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>
diff --git a/src/styles/components/_bar.scss b/src/styles/components/_bar.scss
index cb485120..ae6d2895 100644
--- a/src/styles/components/_bar.scss
+++ b/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;
diff --git a/static/js/controllers/mediastreamcontroller.js b/static/js/controllers/mediastreamcontroller.js
index 486762af..d1a5a31b 100644
--- a/static/js/controllers/mediastreamcontroller.js
+++ b/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."));
diff --git a/static/js/directives/chat.js b/static/js/directives/chat.js
index 6e4d54a9..d9b06cff 100644
--- a/static/js/directives/chat.js
+++ b/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