From bdbfc2b6e039f2633d7558874a112a144de11d72 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 19 Oct 2015 19:28:35 +0100
Subject: [PATCH] Add the little edit widgets and make those the things that
 bring up the message context menus. Still need to add them to all event tiles
 and make the context menus point the right way.

---
 .../vector/css/molecules/MessageTile.css      | 19 +++++++++++++
 .../vector/views/molecules/MessageTile.js     | 28 +++++++++++++++----
 2 files changed, 42 insertions(+), 5 deletions(-)

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 = <MessageTimestamp ts={this.props.mxEvent.getTs()} />
+        var editButton = (
+            <input
+                type="image" src="img/edit.png" alt="Edit"
+                className="mx_MessageTile_editButton" onClick={this.onEditClicked}
+            />
+        );
 
         var aux = null;
         if (msgtype === 'm.image') aux = "sent an image";
@@ -94,9 +109,12 @@ module.exports = React.createClass({
         return (
             <div className={classes} onClick={this.onClick}>
                 { avatar }
-                { timestamp }
                 { sender }
-                <TileType mxEvent={this.props.mxEvent} />
+                <div>
+                    { timestamp }
+                    { editButton }
+                    <TileType mxEvent={this.props.mxEvent} />
+                </div>
             </div>
         );
     },