OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Read Receipt offset 

Read receipts were always one read receipt to the left further than they should have been. This fixes that and simplifies the logic.
pull/21833/head
Luke Barnard 2017-03-27 14:34:05 +01:00
parent a8d85ca2ad
commit a4b4c3feb8
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/views/rooms/EventTile.js
View File

@ -283,9 +283,10 @@ module.exports = WithMatrixClient(React.createClass({
}, },
getReadAvatars: function() { getReadAvatars: function() {
var ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker'); const ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker');
var avatars = []; const avatars = [];
var left = 0; const receiptOffset = 15;
let left = 0;
// It's possible that the receipt was sent several days AFTER the event. // It's possible that the receipt was sent several days AFTER the event.
// If it is, we want to display the complete date along with the HH:MM:SS, // If it is, we want to display the complete date along with the HH:MM:SS,
@ -305,6 +306,12 @@ module.exports = WithMatrixClient(React.createClass({
if ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) { if ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) {
hidden = false; hidden = false;
} }
// TODO: we keep the extra read avatars in the dom to make animation simpler
// we could optimise this to reduce the dom size.
// If hidden, set offset equal to the offset of the final visible avatar or
// else set it proportional to index
left = (hidden ? MAX_READ_AVATARS - 1 : i) * -receiptOffset;
var userId = receipt.roomMember.userId; var userId = receipt.roomMember.userId;
var readReceiptInfo; var readReceiptInfo;
@ -316,11 +323,6 @@ module.exports = WithMatrixClient(React.createClass({
this.props.readReceiptMap[userId] = readReceiptInfo; this.props.readReceiptMap[userId] = readReceiptInfo;
} }
} }
// TODO: we keep the extra read avatars in the dom to make animation simpler
// we could optimise this to reduce the dom size.
if (!hidden) {
left -= 15;
}
// add to the start so the most recent is on the end (ie. ends up rightmost) // add to the start so the most recent is on the end (ie. ends up rightmost)
avatars.unshift( avatars.unshift(
@ -341,7 +343,7 @@ module.exports = WithMatrixClient(React.createClass({
if (remainder > 0) { if (remainder > 0) {
remText = <span className="mx_EventTile_readAvatarRemainder" remText = <span className="mx_EventTile_readAvatarRemainder"
onClick={this.toggleAllReadAvatars} onClick={this.toggleAllReadAvatars}
style={{ right: -(left - 15) }}>{ remainder }+ style={{ right: -(left - receiptOffset) }}>{ remainder }+
</span>; </span>;
} }
} }