Improve message editing UI

res/css/views/rooms/_EditMessageComposer.scss

@@ -16,39 +16,37 @@ limitations under the License.
 */
 
 .mx_EditMessageComposer {
-
-    padding: 3px;
-    // this is to try not make the text move but still have some
-    // padding around and in the editor.
-    // Actual values from fiddling around in inspector
-    margin: -7px -10px -5px -10px;
-    overflow: visible !important;   // override mx_EventTile_content
-
-
-    .mx_BasicMessageComposer_input {
-        border-radius: 4px;
-        border: solid 1px $primary-hairline-color;
-        background-color: $primary-bg-color;
-        max-height: 200px;
-        padding: 3px 6px;
-
-        &:focus {
-            border-color: $accent-color-50pct;
+    background-color: $header-panel-bg-color;
+    position: absolute; // The mx_EditMessageComposer is positioned relatively to the corresponding EventTile_line
+    left: 0;
+    right: 0;
+    border-radius: 8px;
+    padding: 4px; // To contain the avatar and sender
+    padding-top: 32px; // padding 32px + mx_BasicMessageComposer_input padding 2px
+    top: -34px;
+    z-index: 100; // Place the mx_EditMessageComposer above the timeline
+
+    .mx_BasicMessageComposer {
+        .mx_BasicMessageComposer_input {
+            border-radius: 4px;
+            border: solid 1px $primary-hairline-color;
+            background-color: $primary-bg-color;
+            max-height: 200px;
+            padding: 2px 6px; // mx_EventTile left-gutter 64px - border 1px - padding 6px - mx_EditMessageComposer 4px
+            margin-left: 53px;
+
+            &:focus {
+                border-color: $accent-color-50pct;
+            }
         }
     }
 
     .mx_EditMessageComposer_buttons {
+        position: relative;
+        padding-top: 6px; // Match padding of mx_EditMessageComposer
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
-        padding: 5px;
-        position: absolute;
-        left: 0;
-        background: $header-panel-bg-color;
-        z-index: 100;
-        right: 0;
-        margin: 0 -110px 0 0;
-        padding-right: 147px;
 
         .mx_AccessibleButton {
             margin-left: 5px;
@@ -57,7 +55,9 @@ limitations under the License.
     }
 }
 
-.mx_EventTile_last .mx_EditMessageComposer_buttons {
-    position: static;
-    margin-right: -147px;
+.mx_EventTile_continuation {
+    .mx_EditMessageComposer {
+        padding: 4px;
+        top: -6px; // padding 4px + mx_BasicMessageComposer_input padding 2px
+    }
 }

res/css/views/rooms/_EventTile.scss

@@ -51,10 +51,30 @@ $hover-select-border: 4px;
     }
 
     &.mx_EventTile_isEditing {
-        background-color: $header-panel-bg-color;
+        &:hover {
+            .mx_EventTile_line {
+                border-left: none !important; // Override .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line
+            }
+        }
+
+        .mx_EventTile_avatar {
+            z-index: 101; // Place this avatar above the editor
+        }
+
+        .mx_SenderProfile {
+            z-index: 101; // Place sender profile above the editor
+        }
+    }
+
+    .mx_EventTile_isEditing.mx_EventTile_last {
+        // This number is from fiddling with this with inspector. It moves the last
+        // event up when editing to avoid the edit message composer being below the
+        // main composer
+        padding-bottom: 28px;
     }
 
     .mx_SenderProfile {
+        position: relative;
         color: $primary-fg-color;
         font-size: $font-14px;
         display: inline-block; /* anti-zalgo, with overflow hidden */

src/components/views/messages/TextualBody.tsx

@@ -495,6 +495,7 @@ export default class TextualBody extends React.Component<IProps, IState> {
     }
 
     render() {
+        let editor;
         if (this.props.editState) {
             return <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
         }
@@ -536,6 +537,7 @@ export default class TextualBody extends React.Component<IProps, IState> {
             />;
         }
 
+        let textualBody;
         switch (content.msgtype) {
             case MsgType.Emote:
                 return (
@@ -559,13 +561,22 @@ export default class TextualBody extends React.Component<IProps, IState> {
                         { widgets }
                     </span>
                 );
+                break;
             default: // including "m.text"
-                return (
+                textualBody = (
                     <span className="mx_MTextBody mx_EventTile_content">
                         { body }
                         { widgets }
                     </span>
                 );
+                break;
         }
+
+        return (
+            <div>
+                { editor }
+                { textualBody }
+            </div>
+        );
     }
 }

src/components/views/rooms/EditMessageComposer.tsx

@@ -458,23 +458,25 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
     };
 
     render() {
-        return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this.onKeyDown}>
-            <BasicMessageComposer
-                ref={this.editorRef}
-                model={this.model}
-                room={this.getRoom()}
-                initialCaret={this.props.editState.getCaret()}
-                label={_t("Edit message")}
-                onChange={this.onChange}
-            />
-            <div className="mx_EditMessageComposer_buttons">
-                <AccessibleButton kind="secondary" onClick={this.cancelEdit}>
-                    { _t("Cancel") }
-                </AccessibleButton>
-                <AccessibleButton kind="primary" onClick={this.sendEdit} disabled={this.state.saveDisabled}>
-                    { _t("Save") }
-                </AccessibleButton>
+        return (
+            <div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this.onKeyDown}>
+                <BasicMessageComposer
+                    ref={this.editorRef}
+                    model={this.model}
+                    room={this.getRoom()}
+                    initialCaret={this.props.editState.getCaret()}
+                    label={_t("Edit message")}
+                    onChange={this.onChange}
+                />
+                <div className="mx_EditMessageComposer_buttons">
+                    <AccessibleButton kind="secondary" onClick={this.cancelEdit}>
+                        { _t("Cancel") }
+                    </AccessibleButton>
+                    <AccessibleButton kind="primary" onClick={this.sendEdit} disabled={this.state.saveDisabled}>
+                        { _t("Save") }
+                    </AccessibleButton>
+                </div>
             </div>
-        </div>);
+        );
     }
 }