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.

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;
+}

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,
+            right: x,
-            top: e.pageY
+            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,10 +109,13 @@ module.exports = React.createClass({
         return (
             <div className={classes} onClick={this.onClick}>
                 { avatar }
-                { timestamp }
                 { sender }
+                <div>
+                    { timestamp }
+                    { editButton }
                     <TileType mxEvent={this.props.mxEvent} />
                 </div>
+            </div>
         );
     },
 });