split up css, update class names

res/css/_components.scss

@@ -92,7 +92,6 @@
 @import "./views/elements/_InteractiveTooltip.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_MemberEventListSummary.scss";
-@import "./views/elements/_MessageEditor.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
 @import "./views/elements/_ReplyThread.scss";
@@ -135,7 +134,9 @@
 @import "./views/rooms/_AppsDrawer.scss";
 @import "./views/rooms/_Autocomplete.scss";
 @import "./views/rooms/_AuxPanel.scss";
+@import "./views/rooms/_BasicMessageComposer.scss";
 @import "./views/rooms/_E2EIcon.scss";
+@import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";

res/css/views/rooms/_BasicMessageComposer.scss

@@ -0,0 +1,55 @@
+/*
+Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BasicMessageComposer {
+    .mx_BasicMessageComposer_input {
+        padding: 3px 6px;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        outline: none;
+        overflow-x: auto;
+
+        span.mx_UserPill, span.mx_RoomPill {
+            padding-left: 21px;
+            position: relative;
+
+            // avatar psuedo element
+            &::before {
+                position: absolute;
+                left: 2px;
+                top: 2px;
+                content: var(--avatar-letter);
+                width: 16px;
+                height: 16px;
+                background: var(--avatar-background), $avatar-bg-color;
+                color: $avatar-initial-color;
+                background-repeat: no-repeat;
+                background-size: 16px;
+                border-radius: 8px;
+                text-align: center;
+                font-weight: normal;
+                line-height: 16px;
+                font-size: 10.4px;
+            }
+        }
+    }
+
+    .mx_BasicMessageComposer_AutoCompleteWrapper {
+        position: relative;
+        height: 0;
+    }
+}

res/css/views/rooms/_EditMessageComposer.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MessageEditor {
+.mx_EditMessageComposer {
-    border-radius: 4px;
+
     padding: 3px;
     // this is to try not make the text move but still have some
     // padding around and in the editor.
@@ -23,47 +24,19 @@ limitations under the License.
     margin: -7px -10px -5px -10px;
     overflow: visible !important;   // override mx_EventTile_content
 
-    .mx_MessageEditor_editor {
+
+    .mx_BasicMessageComposer_input {
         border-radius: 4px;
         border: solid 1px $primary-hairline-color;
         background-color: $primary-bg-color;
-        padding: 3px 6px;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        outline: none;
         max-height: 200px;
-        overflow-x: auto;
 
         &:focus {
             border-color: $accent-color-50pct;
         }
-
-        span.mx_UserPill, span.mx_RoomPill {
-            padding-left: 21px;
-            position: relative;
-
-            // avatar psuedo element
-            &::before {
-                position: absolute;
-                left: 2px;
-                top: 2px;
-                content: var(--avatar-letter);
-                width: 16px;
-                height: 16px;
-                background: var(--avatar-background), $avatar-bg-color;
-                color: $avatar-initial-color;
-                background-repeat: no-repeat;
-                background-size: 16px;
-                border-radius: 8px;
-                text-align: center;
-                font-weight: normal;
-                line-height: 16px;
-                font-size: 10.4px;
-            }
-        }
     }
 
-    .mx_MessageEditor_buttons {
+    .mx_EditMessageComposer_buttons {
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
@@ -81,14 +54,9 @@ limitations under the License.
             padding: 5px 40px;
         }
     }
-
-    .mx_MessageEditor_AutoCompleteWrapper {
-        position: relative;
-        height: 0;
-    }
 }
 
-.mx_EventTile_last .mx_MessageEditor_buttons {
+.mx_EventTile_last .mx_EditMessageComposer_buttons {
     position: static;
     margin-right: -147px;
 }

src/components/views/rooms/BasicMessageComposer.js

@@ -206,7 +206,7 @@ export default class BasicMessageEditor extends React.Component {
         if (this.state.autoComplete) {
             const query = this.state.query;
             const queryLen = query.length;
-            autoComplete = <div className="mx_MessageEditor_AutoCompleteWrapper">
+            autoComplete = (<div className="mx_BasicMessageComposer_AutoCompleteWrapper">
                 <Autocomplete
                     ref={ref => this._autocompleteRef = ref}
                     query={query}
@@ -215,18 +215,18 @@ export default class BasicMessageEditor extends React.Component {
                     selection={{beginning: true, end: queryLen, start: queryLen}}
                     room={this.props.room}
                 />
-            </div>;
+            </div>);
         }
-        return <div className={this.props.className}>
+        return (<div className="mx_BasicMessageComposer">
             { autoComplete }
             <div
-                    className="mx_MessageEditor_editor"
+                className="mx_BasicMessageComposer_input"
                 contentEditable="true"
                 tabIndex="1"
                 onKeyDown={this._onKeyDown}
                 ref={ref => this._editorRef = ref}
                 aria-label={_t("Edit message")}
             ></div>
-            </div>;
+        </div>);
     }
 }

src/components/views/rooms/EditMessageComposer.js

@@ -249,17 +249,17 @@ export default class EditMessageComposer extends React.Component {
 
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return <div className={classNames("mx_MessageEditor", this.props.className)} onKeyDown={this._onKeyDown}>
+        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()}
             />
-                <div className="mx_MessageEditor_buttons">
+            <div className="mx_EditMessageComposer_buttons">
                 <AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
                 <AccessibleButton kind="primary" onClick={this._sendEdit}>{_t("Save")}</AccessibleButton>
             </div>
-            </div>;
+        </div>);
     }
 }