general faff to make the new edit button position interact properly with dave's 'click to show all read receipts'

This commit is contained in:
Matthew Hodgson 2015-11-18 23:41:38 +00:00
parent bf3e90bb47
commit 69fdd485e6
1 changed files with 12 additions and 9 deletions

View File

@ -145,9 +145,11 @@ module.exports = React.createClass({
var style = { var style = {
left: left+'px', left: left+'px',
top: '0px', top: '0px',
visibility: i < MAX_READ_AVATARS || this.state.allReadAvatars ? 'visible' : 'hidden' visibility: ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) ? 'visible' : 'hidden'
}; };
//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(
<MemberAvatar key={member.userId} member={member} <MemberAvatar key={member.userId} member={member}
@ -161,28 +163,29 @@ module.exports = React.createClass({
); );
// TODO: we keep the extra read avatars in the dom to make animation simpler // TODO: we keep the extra read avatars in the dom to make animation simpler
// we could optimise this to reduce the dom size. // we could optimise this to reduce the dom size.
if (i < MAX_READ_AVATARS - 1 || this.state.allReadAvatars) { if (i < MAX_READ_AVATARS - 1 || this.state.allReadAvatars) { // XXX: where does this -1 come from? is it to make the max'th avatar animate properly?
left -= 15; left -= 15;
} }
} }
var editButton;
if (!this.state.allReadAvatars) { if (!this.state.allReadAvatars) {
var remainder = receipts.length - MAX_READ_AVATARS; var remainder = receipts.length - MAX_READ_AVATARS;
var remText; var remText;
left -= 15; if (i >= MAX_READ_AVATARS - 1) left -= 15;
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={{ left: left }}>{ remainder }+
</span>; </span>;
left -= 15;
} }
editButton = (
<input style={{ left: left }}
type="image" src="img/edit.png" alt="Edit" width="14" height="14"
className="mx_EventTile_editButton" onClick={this.onEditClicked} />
);
} }
var editButton = (
<input style={{ left: left+15 }}
type="image" src="img/edit.png" alt="Edit" width="14" height="14"
className="mx_EventTile_editButton" onClick={this.onEditClicked} />
);
return <span className="mx_EventTile_readAvatars" ref={this.collectReadAvatarNode}> return <span className="mx_EventTile_readAvatars" ref={this.collectReadAvatarNode}>
{ editButton } { editButton }
{ remText } { remText }