Merge branch 'develop' into matthew/twemoji

res/css/_components.scss

@@ -124,6 +124,7 @@
 @import "./views/messages/_SenderProfile.scss";
 @import "./views/messages/_TextualEvent.scss";
 @import "./views/messages/_UnknownBody.scss";
+@import "./views/messages/_ViewSourceEvent.scss";
 @import "./views/room_settings/_AliasSettings.scss";
 @import "./views/room_settings/_ColorSettings.scss";
 @import "./views/rooms/_AppsDrawer.scss";

res/css/views/elements/_MessageEditor.scss

@@ -16,17 +16,22 @@ limitations under the License.
 
 .mx_MessageEditor {
     border-radius: 4px;
-    background-color: $header-panel-bg-color;
-    padding: 11px 13px 7px 56px;
+    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;
 
     .mx_MessageEditor_editor {
         border-radius: 4px;
-        border: solid 1px #e9edf1;
-        background-color: #ffffff;
-        padding: 10px;
+        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;
 
         span {
             display: inline-block;
@@ -48,8 +53,15 @@ limitations under the License.
     .mx_MessageEditor_buttons {
         display: flex;
         flex-direction: row;
-        justify-content: end;
-        padding: 5px 0;
+        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: 104px;
 
         .mx_AccessibleButton {
             margin-left: 5px;
@@ -62,3 +74,8 @@ limitations under the License.
         height: 0;
     }
 }
+
+.mx_EventTile_last .mx_MessageEditor_buttons {
+    position: static;
+    margin-right: -103px;
+}

res/css/views/messages/_ViewSourceEvent.scss

@@ -0,0 +1,50 @@
+/*
+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_EventTile_content.mx_ViewSourceEvent {
+    display: flex;
+    opacity: 0.6;
+    font-size: 12px;
+
+    pre, code {
+        flex: 1;
+    }
+
+    pre {
+        line-height: 1.2;
+        margin: 3.5px 0;
+    }
+
+    .mx_ViewSourceEvent_toggle {
+        width: 12px;
+        mask-repeat: no-repeat;
+        mask-position: 0 center;
+        mask-size: auto 12px;
+        visibility: hidden;
+        background-color: $accent-color;
+        mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
+    }
+
+    &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
+        mask-position: 0 bottom;
+        margin-bottom: 7px;
+        mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
+    }
+
+    &:hover .mx_ViewSourceEvent_toggle {
+        visibility: visible;
+    }
+}

res/css/views/rooms/_EventTile.scss

@@ -43,6 +43,10 @@ limitations under the License.
     padding-top: 0px ! important;
 }
 
+.mx_EventTile_isEditing {
+    background-color: $header-panel-bg-color;
+}
+
 .mx_EventTile .mx_SenderProfile {
     color: $primary-fg-color;
     font-size: 14px;
@@ -72,6 +76,10 @@ limitations under the License.
     }
 }
 
+.mx_EventTile_isEditing .mx_MessageTimestamp {
+    visibility: hidden !important;
+}
+
 .mx_EventTile .mx_MessageTimestamp {
     display: block;
     visibility: hidden;