imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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.

Browse source
This commit is contained in:
David Baker 2015-11-10 17:44:59 +00:00
parent c9823d07fd
commit 9a6624d1c7
4 changed files with 29 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/skins/vector/views/molecules/EventTile.js
View file

@ -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() {