From 5be2c62011a7ddd8f08d7aa09aac95662a8485c8 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 27 Feb 2017 11:16:13 +0000
Subject: [PATCH] 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.
---
 src/components/views/rooms/EventTile.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index c6a766509a..c9508428ba 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -318,8 +318,12 @@ module.exports = WithMatrixClient(React.createClass({
                     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)
             avatars.unshift(
                 <ReadReceiptMarker key={userId} member={receipt.roomMember}
@@ -332,12 +336,6 @@ module.exports = WithMatrixClient(React.createClass({
                     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;
         if (!this.state.allReadAvatars) {
@@ -345,9 +343,8 @@ module.exports = WithMatrixClient(React.createClass({
             if (remainder > 0) {
                 remText = <span className="mx_EventTile_readAvatarRemainder"
                     onClick={this.toggleAllReadAvatars}
-                    style={{ left: left }}>{ remainder }+
+                    style={{ right: -(left - 15) }}>{ remainder }+
                 </span>;
-                left -= 15;
             }
         }