More on read receipts: listen for events, add keys & class / very minimal css.

This commit is contained in:
David Baker 2015-11-03 13:44:40 +00:00
parent 11c38014e5
commit 2a4a02f36e
3 changed files with 19 additions and 2 deletions

View File

@ -48,6 +48,7 @@ module.exports = {
this.dispatcherRef = dis.register(this.onAction);
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
MatrixClientPeg.get().on("Room.name", this.onRoomName);
MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
this.atBottom = true;
@ -65,6 +66,7 @@ module.exports = {
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
MatrixClientPeg.get().removeListener("Room.receipt", this.onRoomReceipt);
MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping);
MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
}
@ -164,6 +166,12 @@ module.exports = {
}
},
onRoomReceipt: function(receiptEvent, room) {
if (room.roomId == this.props.roomId) {
this.forceUpdate();
}
},
onRoomMemberTyping: function(ev, member) {
this.forceUpdate();
},

View File

@ -123,3 +123,12 @@ limitations under the License.
.mx_EventTile.menu .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile_readAvatars {
float: right;
}
.mx_EventTile_readAvatars .mx_MemberAvatar {
margin-left: 1px;
margin-right: 1px;
}

View File

@ -85,11 +85,11 @@ module.exports = React.createClass({
for (var i = 0; i < userIds.length; ++i) {
var member = room.getMember(userIds[i]);
avatars.push(
<MemberAvatar member={member} width={14} height={14} resizeMethod="crop" />
<MemberAvatar key={member.userId} member={member} width={14} height={14} resizeMethod="crop" />
);
}
return <span>{ avatars }</span>;
return <span className="mx_EventTile_readAvatars">{ avatars }</span>;
},
render: function() {