Merge pull request #2952 from matrix-org/bwindels/message-edit-editor

Initial support for editing messages

res/css/_components.scss

@@ -89,6 +89,7 @@
 @import "./views/elements/_InlineSpinner.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";

res/css/views/elements/_MessageEditor.scss

@@ -0,0 +1,64 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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_MessageEditor {
+    border-radius: 4px;
+    background-color: $header-panel-bg-color;
+    padding: 11px 13px 7px 56px;
+
+    .mx_MessageEditor_editor {
+        border-radius: 4px;
+        border: solid 1px #e9edf1;
+        background-color: #ffffff;
+        padding: 10px;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        outline: none;
+
+        span {
+            display: inline-block;
+            padding: 0 5px;
+            border-radius: 4px;
+            color: white;
+        }
+
+        span.user-pill, span.room-pill {
+            border-radius: 16px;
+            display: inline-block;
+            color: $primary-fg-color;
+            background-color: $other-user-pill-bg-color;
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+    }
+
+    .mx_MessageEditor_buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        padding: 5px 0;
+
+        .mx_AccessibleButton {
+            margin-left: 5px;
+            padding: 5px 40px;
+        }
+    }
+
+    .mx_MessageEditor_AutoCompleteWrapper {
+        position: relative;
+        height: 0;
+    }
+}

res/css/views/messages/_MessageActionBar.scss

@@ -69,6 +69,10 @@ limitations under the License.
     mask-image: url('$(res)/img/reply.svg');
 }
 
+.mx_MessageActionBar_editButton::after {
+    mask-image: url('$(res)/img/edit.svg');
+}
+
 .mx_MessageActionBar_optionsButton::after {
     mask-image: url('$(res)/img/icon_context.svg');
 }

res/img/edit.svg

@@ -0,0 +1 @@
+<svg height="14.865319" viewBox="0 0 15.093 14.865319" width="15.093" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" height="1.158" width="1.118" x="-.059" y="-.079"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="16"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0.473684211 0 0 0 0 1 0 0 0 0.241258741 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><g style="fill:none;fill-rule:evenodd;stroke:#2e2f32;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round;filter:url(#a)" transform="translate(-1048.2035 -582.14881)"><path d="m1055.75 596h6.75m-3.375-12.375a1.591 1.591 0 0 1 2.25 2.25l-9.375 9.375-3 .75.75-3z"/></g></svg>