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

ara4n · ara4n · commit 6e3afcde5301 · 2015-11-18T22:19:21.000Z
diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css
@@ -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 {
diff --git a/src/skins/vector/views/molecules/EventTile.js b/src/skins/vector/views/molecules/EventTile.js
@@ -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>
