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

pull/397/head
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 {
float: right;
text-align: right;
margin-right: 10px;
z-index: 1;
position: relative;
width: 100px;
}
.mx_MessageTimestamp {
@ -111,10 +111,9 @@ limitations under the License.
}
.mx_EventTile_editButton {
display: block;
visibility: hidden;
margin-left: auto;
margin-right: 0px;
position: absolute;
display: inline-block;
visibility: hidden;
}
.mx_EventTile:hover .mx_EventTile_editButton {

View File

@ -172,15 +172,22 @@ module.exports = React.createClass({
if (remainder > 0) {
remText = <span className="mx_EventTile_readAvatarRemainder"
onClick={this.toggleAllReadAvatars}
style={ {left: left} }>+{ remainder }
style={{ left: left }}>{ remainder }+
</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}>
{remText}
<Velociraptor transition={reorderTransitionOpts}>
{avatars}
{ editButton }
{ remText }
<Velociraptor transition={ reorderTransitionOpts }>
{ avatars }
</Velociraptor>
</span>;
},
@ -217,12 +224,6 @@ module.exports = React.createClass({
menu: this.state.menu,
});
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;
if (msgtype === 'm.image') aux = "sent an image";
@ -247,7 +248,6 @@ module.exports = React.createClass({
return (
<div className={classes}>
<div className="mx_EventTile_msgOption">
{ editButton }
{ timestamp }
{ readAvatars }
</div>