diff --git a/src/skins/vector/css/molecules/MessageTile.css b/src/skins/vector/css/molecules/MessageTile.css
index c50f4abc..07324819 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 acc74761..76656000 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 =