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.
This commit is contained in:
Kegan Dougal 2014-11-12 14:31:30 +00:00
parent 78ff63a9c7
commit e632fcd933
4 changed files with 33 additions and 7 deletions

View file

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

View file

@ -25,10 +25,32 @@ angular.module('RecentsController', ['matrixService', 'matrixFilter'])
// retrieve all rooms and expose them // retrieve all rooms and expose them
$scope.rooms = modelService.getRooms(); $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 // $rootScope.recentsSelectedRoomID is used in the html, and is set by room-controller.
// in order to highlight a specific room in the list
$rootScope.recentsSelectedRoomID;
$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));
}
});
}]); }]);

View file

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

View file

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