Limit number of read avatars, lay them out as per the design & order them.

src/skins/vector/css/molecules/EventTile.css

@@ -49,7 +49,6 @@ limitations under the License.
 .mx_EventTile .mx_MessageTimestamp {
     color: #acacac;
     font-size: 12px;
-    float: right;
 }
 
 .mx_EventTile_line {
@@ -91,10 +90,16 @@ limitations under the License.
 
 .mx_EventTile_msgOption {
     float: right;
+    text-align: right;
+    margin-right: 10px;
+    z-index: 1;
+    position: relative;
 }
 
 .mx_MessageTimestamp {
+    display: block;
     visibility: hidden;
+    text-align: right;
 }
 
 .mx_EventTile_last .mx_MessageTimestamp {
@@ -106,10 +111,10 @@ limitations under the License.
 }
 
 .mx_EventTile_editButton {
-    position: absolute;
-    right: 1px;
-    top: 15px;
+    display: block;
     visibility: hidden;
+    margin-left: auto;
+    margin-right: 0px;
 }
 
 .mx_EventTile:hover .mx_EventTile_editButton {
@@ -125,10 +130,15 @@ limitations under the License.
 }
 
 .mx_EventTile_readAvatars {
-    float: right;
 }
 
 .mx_EventTile_readAvatars .mx_MemberAvatar {
     margin-left: 1px;
     margin-right: 1px;
+    vertical-align: middle;
+}
+
+.mx_EventTile_readAvatarRemainder {
+    color: #acacac;
+    font-size: 12px;
 }

src/skins/vector/views/molecules/EventTile.js

@@ -37,6 +37,8 @@ var eventTileTypes = {
     'm.room.topic'  : 'molecules.EventAsTextTile',
 };
 
+var MAX_READ_AVATARS = 5;
+
 module.exports = React.createClass({
     displayName: 'EventTile',
     mixins: [EventTileController],
@@ -80,15 +82,30 @@ module.exports = React.createClass({
 
         if (!room) return [];
 
-        var userIds = room.getUsersReadUpTo(this.props.mxEvent);
+        // get list of read receipts, sorted most recent first
+        var receipts = room.getReceiptsForEvent(this.props.mxEvent).filter(function(r) {
+            return r.type === "m.read";
+        }).sort(function(r1, r2) {
+            return r2.data.ts - r1.data.ts;
+        });
 
         var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
 
-        for (var i = 0; i < userIds.length; ++i) {
-            var member = room.getMember(userIds[i]);
-            avatars.push(
+        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" />
             );
+            if (i + 1 >= MAX_READ_AVATARS) {
+                break;
+            }
+        }
+        var remainder = receipts.length - MAX_READ_AVATARS;
+        if (remainder > 0) {
+            avatars.unshift(
+                <span className="mx_EventTile_readAvatarRemainder">+{ remainder }</span>
+            );
         }
 
         return <span className="mx_EventTile_readAvatars">{ avatars }</span>;
@@ -151,12 +168,14 @@ module.exports = React.createClass({
         }
         return (
             <div className={classes}>
+                <div className="mx_EventTile_msgOption">
+                    { editButton }
+                    { timestamp }
+                    { readAvatars }
+                </div>
                 { avatar }
                 { sender }
                 <div className="mx_EventTile_line">
-                    { timestamp }
-                    { editButton }
-                    { readAvatars }
                     <EventTileType mxEvent={this.props.mxEvent} searchTerm={this.props.searchTerm} />
                 </div>
             </div>