Fix a couple of issues with RRs
- Shift to the left _before_ adding an avatar so that there are always `MAX_READ_AVATARS` visible, instead of there being `MAX_READ_AVATARS + 1` avatars displayed following the first "collapse". - Use `right` instead of `left` so that double-digit remainders don't get overlapped.
This commit is contained in:
parent
fd3c1ab9e1
commit
5be2c62011
1 changed files with 6 additions and 9 deletions
|
@ -318,8 +318,12 @@ 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;
|
||||||
|
}
|
||||||
|
|
||||||
//console.log("i = " + i + ", MAX_READ_AVATARS = " + MAX_READ_AVATARS + ", allReadAvatars = " + this.state.allReadAvatars + " visibility = " + style.visibility);
|
|
||||||
// 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(
|
||||||
<ReadReceiptMarker key={userId} member={receipt.roomMember}
|
<ReadReceiptMarker key={userId} member={receipt.roomMember}
|
||||||
|
@ -332,12 +336,6 @@ module.exports = WithMatrixClient(React.createClass({
|
||||||
showFullTimestamp={receipt.ts >= dayAfterEventTime}
|
showFullTimestamp={receipt.ts >= dayAfterEventTime}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
var remText;
|
var remText;
|
||||||
if (!this.state.allReadAvatars) {
|
if (!this.state.allReadAvatars) {
|
||||||
|
@ -345,9 +343,8 @@ 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={{ left: left }}>{ remainder }+
|
style={{ right: -(left - 15) }}>{ remainder }+
|
||||||
</span>;
|
</span>;
|
||||||
left -= 15;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue