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 @@ $left-gutter: 64px;
 }
 
 .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_EventTile .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.js

@@ -486,9 +486,12 @@ export default class TextualBody extends React.Component {
     }
 
     render() {
+        let editor;
         if (this.props.editState) {
             const EditMessageComposer = sdk.getComponent('rooms.EditMessageComposer');
-            return <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
+            editor = (
+                <EditMessageComposer editState={this.props.editState} />
+            );
         }
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();
@@ -530,9 +533,10 @@ export default class TextualBody extends React.Component {
             });
         }
 
+        let textualBody;
         switch (content.msgtype) {
             case "m.emote":
-                return (
+                textualBody = (
                     <span className="mx_MEmoteBody mx_EventTile_content">
                         *&nbsp;
                         <span
@@ -546,20 +550,30 @@ export default class TextualBody extends React.Component {
                         { widgets }
                     </span>
                 );
+                break;
             case "m.notice":
-                return (
+                textualBody = (
                     <span className="mx_MNoticeBody mx_EventTile_content">
                         { body }
                         { 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.js

@@ -26,7 +26,6 @@ import {findEditableEvent} from '../../../utils/EventUtils';
 import {parseEvent} from '../../../editor/deserialize';
 import {CommandPartCreator} from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
-import classNames from 'classnames';
 import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import BasicMessageComposer from "./BasicMessageComposer";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -391,21 +390,23 @@ export default class EditMessageComposer extends React.Component {
 
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}>
-            <BasicMessageComposer
-                ref={this._setEditorRef}
-                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="mx_EditMessageComposer" onKeyDown={this._onKeyDown}>
+                <BasicMessageComposer
+                    ref={this._setEditorRef}
+                    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>);
+        );
     }
 }