Merge branch 'develop' into gsouquet/compact-composer-18533

res/css/_common.scss

@@ -381,11 +381,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     font-size: $font-14px;
     color: $primary-content;
     word-wrap: break-word;
-
-    a {
-        color: $accent-color;
-        cursor: pointer;
-    }
 }
 
 .mx_Dialog_buttons {

res/css/_components.scss

@@ -132,6 +132,7 @@
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_ErrorBoundary.scss";
 @import "./views/elements/_EventListSummary.scss";
+@import "./views/elements/_EventTilePreview.scss";
 @import "./views/elements/_FacePile.scss";
 @import "./views/elements/_Field.scss";
 @import "./views/elements/_ImageView.scss";

res/css/structures/_ScrollPanel.scss

@@ -15,8 +15,6 @@ limitations under the License.
 */
 
 .mx_ScrollPanel {
-    contain: strict;
-
     .mx_RoomView_MessageList {
         position: relative;
         display: flex;

res/css/views/elements/_EventTilePreview.scss

@@ -0,0 +1,22 @@
+/*
+Copyright 2021 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_EventTilePreview_loader {
+    &.mx_IRCLayout,
+    &.mx_GroupLayout {
+        padding: 9px 0;
+    }
+}

res/css/views/messages/_MessageActionBar.scss

@@ -92,6 +92,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
 }
 
+.mx_MessageActionBar_threadButton::after {
+    mask-image: url('$(res)/img/element-icons/message/thread.svg');
+}
+
 .mx_MessageActionBar_editButton::after {
     mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
 }

res/css/views/right_panel/_RoomSummaryCard.scss

@@ -232,6 +232,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/files.svg');
 }
 
+.mx_RoomSummaryCard_icon_threads::before {
+    mask-image: url('$(res)/img/element-icons/message/thread.svg');
+}
+
 .mx_RoomSummaryCard_icon_share::before {
     mask-image: url('$(res)/img/element-icons/room/share.svg');
 }

res/css/views/rooms/_Autocomplete.scss

@@ -10,6 +10,7 @@
     max-height: 35vh;
     overflow: clip;
     display: flex;
+    flex-direction: column;
     box-shadow: 0px -16px 32px $composer-shadow-color;
 }
 
@@ -20,7 +21,7 @@
 
 /* a "block" completion takes up a whole line */
 .mx_Autocomplete_Completion_block {
-    height: 34px;
+    min-height: 34px;
     display: flex;
     padding: 0 12px;
     user-select: none;

res/css/views/rooms/_EventTile.scss

@@ -480,7 +480,7 @@ $hover-select-border: 4px;
     }
 
     pre code > * {
-        display: inline-block;
+        display: inline;
     }
 
     pre {
@@ -514,7 +514,7 @@ $hover-select-border: 4px;
 
 .mx_EventTile:hover .mx_EventTile_body pre,
 .mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
-    border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
+    border: 1px solid $tertiary-content;
 }
 
 .mx_EventTile_pre_container {
@@ -643,6 +643,7 @@ $hover-select-border: 4px;
 
     // Remove some of the default tile padding so that the error is centered
     margin-right: 0;
+
     .mx_EventTile_line {
         padding-left: 0;
         margin-right: 0;
@@ -674,3 +675,62 @@ $hover-select-border: 4px;
         margin-right: 0;
     }
 }
+
+.mx_ThreadInfo:hover {
+    cursor: pointer;
+}
+
+.mx_ThreadView {
+    display: flex;
+    flex-direction: column;
+
+    .mx_ScrollPanel {
+        margin-top: 20px;
+
+        .mx_RoomView_MessageList {
+            padding: 0;
+        }
+    }
+
+    .mx_EventTile_senderDetails {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 6px;
+
+        a {
+            flex: 1;
+            min-width: none;
+            max-width: 100%;
+            display: flex;
+            align-items: center;
+
+            .mx_SenderProfile {
+                flex: 1;
+            }
+        }
+    }
+
+    .mx_ThreadView_List {
+        flex: 1;
+        overflow: scroll;
+    }
+
+    .mx_EventTile_roomName {
+        display: none;
+    }
+
+    .mx_EventTile_line {
+        padding-left: 0 !important;
+        order: 10 !important;
+    }
+
+    .mx_EventTile {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        margin-top: 0;
+        padding-bottom: 5px;
+        margin-bottom: 5px;
+    }
+}

res/css/views/rooms/_MessageComposer.scss

@@ -349,3 +349,19 @@ limitations under the License.
         height: 50px;
     }
 }
+
+/**
+ * Unstable compact mode
+ */
+
+.mx_MessageComposer.mx_MessageComposer--compact {
+    margin-right: 0;
+
+    .mx_MessageComposer_wrapper {
+        padding: 0;
+    }
+
+    .mx_MessageComposer_button:last-child {
+        margin-right: 0;
+    }
+}