From 9a6624d1c76f92cb59d3336b463919c4faca14f4 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 10 Nov 2015 17:44:59 +0000
Subject: [PATCH] Do read receipt avatars with absolute positioning: this
 should be a lot easier to animate. Also mess around with the MemberAvatar a
 bit so it's easier to style.

---
 src/skins/vector/css/atoms/MemberAvatar.css   |  6 +++---
 src/skins/vector/css/molecules/EventTile.css  | 10 +++++++---
 src/skins/vector/views/atoms/MemberAvatar.js  | 10 ++++++----
 src/skins/vector/views/molecules/EventTile.js | 18 +++++++++++++-----
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/skins/vector/css/atoms/MemberAvatar.css b/src/skins/vector/css/atoms/MemberAvatar.css
index 97dae35f..b8ecdef6 100644
--- a/src/skins/vector/css/atoms/MemberAvatar.css
+++ b/src/skins/vector/css/atoms/MemberAvatar.css
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MemberAvatar {
+.mx_MemberAvatar_image {
     z-index: 20;
     border-radius: 20px;
 }
@@ -25,6 +25,6 @@ limitations under the License.
     text-align: center;
 }
 
-.mx_MemberAvatar_wrapper {
+.mx_MemberAvatar {
     position: relative;
-}
\ No newline at end of file
+}
diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css
index d03b31b1..7d4acada 100644
--- a/src/skins/vector/css/molecules/EventTile.css
+++ b/src/skins/vector/css/molecules/EventTile.css
@@ -130,15 +130,19 @@ limitations under the License.
 }
 
 .mx_EventTile_readAvatars {
+    position: relative;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
 }
 
 .mx_EventTile_readAvatars .mx_MemberAvatar {
-    margin-left: 1px;
-    margin-right: 1px;
-    vertical-align: middle;
+    position: absolute;
+    display: inline-block;
 }
 
 .mx_EventTile_readAvatarRemainder {
     color: #acacac;
     font-size: 12px;
+    position: absolute;
 }
diff --git a/src/skins/vector/views/atoms/MemberAvatar.js b/src/skins/vector/views/atoms/MemberAvatar.js
index c4153b85..e7d6b65d 100644
--- a/src/skins/vector/views/atoms/MemberAvatar.js
+++ b/src/skins/vector/views/atoms/MemberAvatar.js
@@ -49,20 +49,22 @@ module.exports = React.createClass({
                 initial = this.props.member.name[1].toUpperCase();
          
             return (
-                <span className="mx_MemberAvatar_wrapper">
+                <span className="mx_MemberAvatar" style={this.props.style}>
                     <span className="mx_MemberAvatar_initial"
                           style={{ fontSize: (this.props.width * 0.75) + "px",
                                    width: this.props.width + "px",
                                    lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
-                    <img className="mx_MemberAvatar" src={this.state.imageUrl}
+                    <img className="mx_MemberAvatar_image" src={this.state.imageUrl}
                          onError={this.onError} width={this.props.width} height={this.props.height} />
                 </span>
             );            
         }
         return (
-            <img className="mx_MemberAvatar" src={this.state.imageUrl}
+            <img className="mx_MemberAvatar mx_MemberAvatar_image" src={this.state.imageUrl}
                 onError={this.onError}
-                width={this.props.width} height={this.props.height} />
+                width={this.props.width} height={this.props.height}
+                style={this.props.style}
+            />
         );
     }
 });
diff --git a/src/skins/vector/views/molecules/EventTile.js b/src/skins/vector/views/molecules/EventTile.js
index 5fd3ebe2..695240d0 100644
--- a/src/skins/vector/views/molecules/EventTile.js
+++ b/src/skins/vector/views/molecules/EventTile.js
@@ -91,24 +91,32 @@ module.exports = React.createClass({
 
         var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
 
+        var left = 0;
+
         for (var i = 0; i < receipts.length; ++i) {
             var member = room.getMember(receipts[i].userId);
             // add to the start so the most recent is on the end (ie. ends up rightmost)
             avatars.unshift(
-                <MemberAvatar key={member.userId} member={member} width={14} height={14} resizeMethod="crop" />
+                <MemberAvatar key={member.userId} member={member}
+                    width={14} height={14} resizeMethod="crop"
+                    style={ {left: left} }
+                />
             );
+            left -= 15;
             if (i + 1 >= MAX_READ_AVATARS) {
                 break;
             }
         }
         var remainder = receipts.length - MAX_READ_AVATARS;
+        var remText;
         if (remainder > 0) {
-            avatars.unshift(
-                <span className="mx_EventTile_readAvatarRemainder">+{ remainder }</span>
-            );
+            remText = <span className="mx_EventTile_readAvatarRemainder" style={ {left: left} }>+{ remainder }</span>;
         }
 
-        return <span className="mx_EventTile_readAvatars">{ avatars }</span>;
+        return <span className="mx_EventTile_readAvatars">
+            {remText}
+            {avatars}
+        </span>;
     },
 
     render: function() {