SYWEB-57: Highlight rooms where the history has changed.

This highlights rooms when something has happened and you haven't viewed
it yet. It highlights entries in a slightly red background colour.

syweb/webclient/app.css

@@ -812,6 +812,10 @@ textarea, input {
     background-color: #eee;
 }
 
+.recentsRoomUnread {
+    background-color: #fee;
+}
+
 .recentsRoomName {
     font-size: 16px;
     padding-top: 7px;

syweb/webclient/recents/recents-controller.js

@@ -25,10 +25,32 @@ angular.module('RecentsController', ['matrixService', 'matrixFilter'])
     
     // retrieve all rooms and expose them
     $scope.rooms = modelService.getRooms();
+    
+    if (!$rootScope.unreadMessages) {
+        $rootScope.unreadMessages = {
+            // room_id: <number>
+        };
+    }
 
-    // $rootScope of the parent where the recents component is included can override this value
-    // in order to highlight a specific room in the list
-    $rootScope.recentsSelectedRoomID;
+    // $rootScope.recentsSelectedRoomID is used in the html, and is set by room-controller.
+    
+    
+    $scope.selectRoom = function(room) {
+        if ($rootScope.unreadMessages[room.room_id]) {
+            $rootScope.unreadMessages[room.room_id] = 0;
+        }
+        $rootScope.goToPage('room/' + (room.room_alias ? room.room_alias : room.room_id) );
+    };
+    
+    $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) {
+        if (isLive && event.room_id !== $rootScope.recentsSelectedRoomID) {
+            if (!$rootScope.unreadMessages[event.room_id]) {
+                $rootScope.unreadMessages[event.room_id] = 0;
+            }
+            $rootScope.unreadMessages[event.room_id] += 1;
+            console.log("sel="+$rootScope.recentsSelectedRoomID+" unread:"+JSON.stringify($rootScope.unreadMessages, undefined, 2));
+        }
+    });
 
 }]);
 

syweb/webclient/recents/recents.html

@@ -1,9 +1,9 @@
 <div ng-controller="RecentsController">
     <table class="recentsTable">
         <tbody ng-repeat="(index, room) in rooms | orderRecents" 
-               ng-click="goToPage('room/' + (room.room_alias ? room.room_alias : room.room_id) )" 
-               class="recentsRoom" 
-               ng-class="{'recentsRoomSelected': (room.room_id === recentsSelectedRoomID)}">                                           
+               ng-click="selectRoom(room)" 
+               class="recentsRoom"
+               ng-class="{'recentsRoomSelected': (room.room_id === recentsSelectedRoomID), 'recentsRoomUnread': (unreadMessages[room.room_id])}">
             <tr>
                 <td ng-class="room.current_room_state.state('m.room.join_rules').content.join_rule == 'public' ? 'recentsRoomName recentsPublicRoom' : 'recentsRoomName'">
                     {{ room.room_id | mRoomName }}

syweb/webclient/room/room-controller.js

@@ -804,7 +804,7 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput', 'a
         console.log("onInit3");
 
         // Make recents highlight the current room
-        $scope.recentsSelectedRoomID = $scope.room_id;
+        $rootScope.recentsSelectedRoomID = $scope.room_id;
 
         // Init the history for this room
         history.init();