diff --git a/src/skins/vector/css/molecules/MessageTile.css b/src/skins/vector/css/molecules/MessageTile.css index c50f4abc7d..0732481941 100644 --- a/src/skins/vector/css/molecules/MessageTile.css +++ b/src/skins/vector/css/molecules/MessageTile.css @@ -90,3 +90,22 @@ limitations under the License. .mx_MessageTile:hover .mx_MessageTimestamp { display: block; } + +.mx_MessageTile_editButton { + float: right; + display: none; + border: 0px; + outline: none; +} + +.mx_MessageTile:hover .mx_MessageTile_editButton { + display: inline-block; +} + +.mx_MessageTile.menu .mx_MessageTile_editButton { + display: inline-block; +} + +.mx_MessageTile.menu .mx_MessageTimestamp { + display: inline-block; +} diff --git a/src/skins/vector/views/molecules/MessageTile.js b/src/skins/vector/views/molecules/MessageTile.js index acc7476144..7665600017 100644 --- a/src/skins/vector/views/molecules/MessageTile.js +++ b/src/skins/vector/views/molecules/MessageTile.js @@ -28,13 +28,21 @@ module.exports = React.createClass({ displayName: 'MessageTile', mixins: [MessageTileController], - onClick: function(e) { + onEditClicked: function(e) { var MessageContextMenu = sdk.getComponent('molecules.MessageContextMenu'); + var buttonRect = e.target.getBoundingClientRect() + var x = window.innerWidth - buttonRect.left; + var y = buttonRect.top + (e.target.height / 2); + var self = this; ContextualMenu.createMenu(MessageContextMenu, { mxEvent: this.props.mxEvent, - right: window.innerWidth - e.pageX, - top: e.pageY + right: x, + top: y, + onFinished: function() { + self.setState({menu: false}); + } }); + this.setState({menu: true}); }, render: function() { @@ -67,8 +75,15 @@ module.exports = React.createClass({ mx_MessageTile_highlight: this.shouldHighlight(), mx_MessageTile_continuation: this.props.continuation, mx_MessageTile_last: this.props.last, + menu: this.state.menu }); var timestamp = + var editButton = ( + + ); var aux = null; if (msgtype === 'm.image') aux = "sent an image"; @@ -94,9 +109,12 @@ module.exports = React.createClass({ return (
{ avatar } - { timestamp } { sender } - +
+ { timestamp } + { editButton } + +
); },