diff --git a/css/molecules/RoomTile.css b/css/molecules/RoomTile.css index babeedaf27..a762b1cb87 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 9d75726349..54e59147f0 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 45dd700156..20c8a162e3 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 ( - + ); }); },