Merge branch 'develop' into EventBubbleTile

.eslintrc.js

@@ -86,6 +86,8 @@ module.exports = {
         "jsx-a11y/no-static-element-interactions": "off",
         "jsx-a11y/role-supports-aria-props": "off",
         "jsx-a11y/tabindex-no-positive": "off",
+
+        "matrix-org/require-copyright-header": "error",
     },
     overrides: [
         {

package.json

@@ -173,7 +173,7 @@
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-matrix-org": "^0.4.0",
+    "eslint-plugin-matrix-org": "^0.5.2",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "fs-extra": "^10.0.1",

res/css/_components.scss

@@ -126,7 +126,6 @@
 @import "./views/dialogs/_SpacePreferencesDialog.scss";
 @import "./views/dialogs/_SpaceSettingsDialog.scss";
 @import "./views/dialogs/_SpotlightDialog.scss";
-@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
 @import "./views/dialogs/_TermsDialog.scss";
 @import "./views/dialogs/_UntrustedDeviceDialog.scss";
 @import "./views/dialogs/_UploadConfirmDialog.scss";
@@ -163,6 +162,7 @@
 @import "./views/elements/_InviteReason.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_MiniAvatarUploader.scss";
+@import "./views/elements/_Pill.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
 @import "./views/elements/_QRCode.scss";

res/css/structures/_RoomDirectory.scss

@@ -155,7 +155,7 @@ limitations under the License.
     line-height: $font-20px;
     padding: 0 5px;
     color: $accent-fg-color;
-    background-color: $rte-room-pill-color;
+    background-color: $pill-bg-color;
 }
 
 .mx_RoomDirectory_topic {

res/css/views/elements/_Pill.scss

@@ -0,0 +1,63 @@
+/*
+Copyright 2021 Šimon Brandner <[email protected]>
+
+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_Pill {
+    padding: $font-1px 0.4em $font-1px 0;
+    line-height: $font-17px;
+    border-radius: $font-16px;
+    vertical-align: text-top;
+    display: inline-flex;
+    align-items: center;
+
+    cursor: pointer;
+
+    color: $accent-fg-color !important; // To override .markdown-body
+    background-color: $pill-bg-color !important; // To override .markdown-body
+
+    &.mx_UserPill_me,
+    &.mx_AtRoomPill {
+        background-color: $alert !important; // To override .markdown-body
+    }
+
+    &:hover {
+        background-color: $pill-hover-bg-color !important; // To override .markdown-body
+    }
+
+    &.mx_UserPill_me:hover {
+        background-color: #ff6b75 !important; // To override .markdown-body | same on both themes
+    }
+
+    // We don't want to indicate clickability
+    &.mx_AtRoomPill:hover {
+        background-color: $alert !important; // To override .markdown-body
+        cursor: unset;
+    }
+
+    .mx_BaseAvatar {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        border-radius: 10rem;
+        margin-right: 0.24rem;
+    }
+
+    a& {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        text-decoration: none !important; // To override .markdown-body
+    }
+}

res/css/views/elements/_RichText.scss

@@ -2,86 +2,6 @@
 // naming scheme; it's completely unclear where or how they're being used
 // --Matthew
 
-.mx_UserPill,
-.mx_RoomPill,
-.mx_AtRoomPill {
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-    border-radius: $font-16px;
-    line-height: $font-15px;
-    padding-left: 0;
-}
-
-a.mx_Pill {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 100%;
-}
-
-.mx_Pill {
-    padding: $font-1px;
-    padding-right: 0.4em;
-    vertical-align: text-top;
-    line-height: $font-17px;
-}
-
-/* More specific to override `.markdown-body a` text-decoration */
-.mx_EventTile_content .markdown-body a.mx_Pill {
-    text-decoration: none;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_content .markdown-body a.mx_UserPill,
-.mx_UserPill {
-    color: $primary-content;
-    background-color: $other-user-pill-bg-color;
-}
-
-.mx_UserPill_selected {
-    background-color: $accent !important;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
-.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
-.mx_EventTile_content .mx_AtRoomPill,
-.mx_MessageComposer_input .mx_AtRoomPill {
-    color: $accent-fg-color;
-    background-color: $alert;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_content .markdown-body a.mx_RoomPill,
-.mx_RoomPill {
-    color: $accent-fg-color;
-    background-color: $rte-room-pill-color;
-}
-
-.mx_EventTile_body .mx_UserPill,
-.mx_EventTile_body .mx_RoomPill {
-    cursor: pointer;
-}
-
-.mx_UserPill .mx_BaseAvatar,
-.mx_RoomPill .mx_BaseAvatar,
-.mx_AtRoomPill .mx_BaseAvatar {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    border-radius: 10rem;
-    margin-right: 0.24rem;
-    pointer-events: none;
-}
-
-.mx_Emoji {
-    // Should be 1.8rem for our default 1.4rem message bodies,
-    // and scale with the size of the surrounding text
-    font-size: calc(18 / 14 * 1em);
-    vertical-align: bottom;
-}
-
 .mx_Markdown_BOLD {
     font-weight: bold;
 }
@@ -115,3 +35,10 @@ a.mx_Pill {
 .mx_Markdown_STRIKETHROUGH {
     text-decoration: line-through;
 }
+
+.mx_Emoji {
+    // Should be 1.8rem for our default message bodies, and scale with the
+    // surrounding text
+    font-size: max($font-18px, 1em);
+    vertical-align: bottom;
+}

res/css/views/messages/_MLocationBody.scss

@@ -15,7 +15,10 @@ limitations under the License.
 */
 
 .mx_MLocationBody {
+    max-width: 100%;
+
     .mx_MLocationBody_map {
+        max-width: 100%;
         width: 450px;
         height: 300px;
         z-index: 0; // keeps the entire map under the message action bar
@@ -27,15 +30,11 @@ limitations under the License.
 
 /* In the timeline, we fit the width of the container */
 .mx_EventTile_line .mx_MLocationBody .mx_MLocationBody_map {
-    width: 100%;
     max-width: 450px;
+    width: 100%;
 }
 
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MLocationBody {
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MLocationBody .mx_MLocationBody_map {
     max-width: 100%;
-
-    .mx_MLocationBody_map {
-        max-width: 100%;
-        width: 450px;
-    }
+    width: 450px;
 }

res/css/views/rooms/_BasicMessageComposer.scss

@@ -51,9 +51,15 @@ limitations under the License.
         }
 
         &.mx_BasicMessageComposer_input_shouldShowPillAvatar {
-            span.mx_UserPill, span.mx_RoomPill {
-                position: relative;
+            span.mx_UserPill, span.mx_RoomPill, span.mx_SpacePill {
                 user-select: all;
+                position: relative;
+                cursor: unset; // We don't want indicate clickability
+
+                &:hover {
+                    // We don't want indicate clickability | To override the overriding of .markdown-body
+                    background-color: $pill-bg-color !important;
+                }
 
                 // avatar psuedo element
                 &::before {
@@ -72,14 +78,6 @@ limitations under the License.
                     font-size: $font-10-4px;
                 }
             }
-
-            span.mx_UserPill {
-                cursor: pointer;
-            }
-
-            span.mx_RoomPill {
-                cursor: default;
-            }
         }
 
         &.mx_BasicMessageComposer_input_disabled {

res/css/views/rooms/_EventTile.scss

@@ -704,7 +704,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
 
 .mx_MessagePanel_narrow .mx_ThreadSummary {
     min-width: initial;
-    max-width: initial;
+    max-width: 100%; // prevent overflow
     width: initial;
 }
 

res/css/views/rooms/_ReplyPreview.scss

@@ -25,30 +25,31 @@ limitations under the License.
 
     .mx_ReplyPreview_section {
         border-bottom: 1px solid $primary-hairline-color;
+        display: flex;
+        flex-flow: column;
+        row-gap: $spacing-8;
+        padding: $spacing-8 $spacing-8 0 $spacing-8;
 
         .mx_ReplyPreview_header {
-            margin: 8px;
+            display: flex;
+            justify-content: space-between;
+            column-gap: 8px;
+
             color: $primary-content;
             font-weight: 400;
             opacity: 0.4;
-        }
-
-        .mx_ReplyPreview_tile {
-            margin: 0 8px;
-        }
-
-        .mx_ReplyPreview_title {
-            float: left;
-        }
-
-        .mx_ReplyPreview_cancel {
-            float: right;
-            cursor: pointer;
-            display: flex;
-        }
 
-        .mx_ReplyPreview_clear {
-            clear: both;
+            .mx_ReplyPreview_header_cancel {
+                background-color: $primary-content;
+                mask: url('$(res)/img/cancel.svg');
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: 18px;
+                width: 18px;
+                height: 18px;
+                min-width: 18px;
+                min-height: 18px;
+            }
         }
     }
 }