diff --git a/css/molecules/RoomTile.css b/css/molecules/RoomTile.css
index babeedaf..a762b1cb 100644
--- a/css/molecules/RoomTile.css
+++ b/css/molecules/RoomTile.css
@@ -13,10 +13,6 @@
border: 2px inset #eee;
}
-.mx_RoomTile:hover {
- background-color: #aad;
-}
-
.mx_RoomTile_name {
font-size: 80%;
font-weight: bold;
@@ -26,3 +22,11 @@
overflow: hidden;
text-overflow: ellipsis;
}
+
+.mx_RoomTile.unread {
+ background-color: #66e;
+}
+
+.mx_RoomTile:hover {
+ background-color: #ff8;
+}
diff --git a/src/molecules/RoomTile.js b/src/molecules/RoomTile.js
index 9d757263..54e59147 100644
--- a/src/molecules/RoomTile.js
+++ b/src/molecules/RoomTile.js
@@ -14,7 +14,8 @@ module.exports = React.createClass({
render: function() {
var classes = classNames({
'mx_RoomTile': true,
- 'selected': this.props.selected
+ 'selected': this.props.selected,
+ 'unread': this.props.unread
});
return (
diff --git a/src/organisms/RoomList.js b/src/organisms/RoomList.js
index 45dd7001..20c8a162 100644
--- a/src/organisms/RoomList.js
+++ b/src/organisms/RoomList.js
@@ -5,11 +5,40 @@ var ComponentBroker = require('../ComponentBroker');
var RoomTile = ComponentBroker.get("molecules/RoomTile");
+
module.exports = React.createClass({
componentWillMount: function() {
var cli = MatrixClientPeg.get();
+ cli.on("Room.timeline", this.onRoomTimeline);
- this.setState({roomList: cli.getRooms()});
+ this.setState({
+ roomList: cli.getRooms(),
+ activityMap: {}
+ });
+ },
+
+ componentWillUnmount: function() {
+ if (MatrixClientPeg.get()) {
+ MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+ }
+ },
+
+ componentWillReceiveProps: function() {
+ this.state.activityMap[this.props.selectedRoom] = undefined;
+ this.setState({
+ activityMap: this.state.activityMap
+ });
+ },
+
+ onRoomTimeline: function(ev, room, toStartOfTimeline) {
+ if (room.roomId == this.props.selectedRoom) return;
+
+ // obviously this won't deep copy but we this shouldn't be necessary
+ var amap = this.state.activityMap;
+ amap[room.roomId] = 1;
+ this.setState({
+ roomMap: amap
+ });
},
makeRoomTiles: function() {
@@ -17,7 +46,12 @@ module.exports = React.createClass({
return this.state.roomList.map(function(room) {
var selected = room.roomId == that.props.selectedRoom;
return (
-
+
);
});
},