dodgy fudge to put the edit button alongside the read receipts. in future I think we should turn it into a chevron next to the timestamp

This commit is contained in:
Matthew Hodgson 2015-11-18 22:19:21 +00:00
parent d66006893a
commit 6e3afcde53
2 changed files with 15 additions and 16 deletions

View File

@ -91,9 +91,9 @@ limitations under the License.
.mx_EventTile_msgOption { .mx_EventTile_msgOption {
float: right; float: right;
text-align: right; text-align: right;
margin-right: 10px;
z-index: 1; z-index: 1;
position: relative; position: relative;
width: 100px;
} }
.mx_MessageTimestamp { .mx_MessageTimestamp {
@ -111,10 +111,9 @@ limitations under the License.
} }
.mx_EventTile_editButton { .mx_EventTile_editButton {
display: block; position: absolute;
display: inline-block;
visibility: hidden; visibility: hidden;
margin-left: auto;
margin-right: 0px;
} }
.mx_EventTile:hover .mx_EventTile_editButton { .mx_EventTile:hover .mx_EventTile_editButton {

View File

@ -172,15 +172,22 @@ module.exports = React.createClass({
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>;
} }
} }
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}>
{remText} { editButton }
<Velociraptor transition={reorderTransitionOpts}> { remText }
{avatars} <Velociraptor transition={ reorderTransitionOpts }>
{ avatars }
</Velociraptor> </Velociraptor>
</span>; </span>;
}, },
@ -217,12 +224,6 @@ module.exports = React.createClass({
menu: this.state.menu, menu: this.state.menu,
}); });
var timestamp = <MessageTimestamp ts={this.props.mxEvent.getTs()} /> var timestamp = <MessageTimestamp ts={this.props.mxEvent.getTs()} />
var editButton = (
<input
type="image" src="img/edit.png" alt="Edit" width="14" height="14"
className="mx_EventTile_editButton" onClick={this.onEditClicked}
/>
);
var aux = null; var aux = null;
if (msgtype === 'm.image') aux = "sent an image"; if (msgtype === 'm.image') aux = "sent an image";
@ -247,7 +248,6 @@ module.exports = React.createClass({
return ( return (
<div className={classes}> <div className={classes}>
<div className="mx_EventTile_msgOption"> <div className="mx_EventTile_msgOption">
{ editButton }
{ timestamp } { timestamp }
{ readAvatars } { readAvatars }
</div> </div>