Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/17686

Conflicts: src/SlashCommands.tsx src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx src/createRoom.ts
2021-07-09 08:13:39 +01:00 · 2021-07-09 08:13:39 +01:00 · f412fb44a7
commit f412fb44a7
parent 894bce7813 013a81148b
111 changed files with 448 additions and 584 deletions
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@ -202,6 +202,7 @@
@import "./views/rooms/_GroupLayout.scss";
@import "./views/rooms/_IRCLayout.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
+@import "./views/rooms/_LinkPreviewGroup.scss";
@import "./views/rooms/_LinkPreviewWidget.scss";
@import "./views/rooms/_MemberInfo.scss";
@import "./views/rooms/_MemberList.scss";
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@ -477,8 +477,7 @@ $hover-select-border: 4px;

    pre, code {
        font-family: $monospace-font-family !important;
-        // deliberate constants as we're behind an invert filter
-        color: #333;
+        background-color: $header-panel-bg-color;
    }

    pre {
@ -488,11 +487,6 @@ $hover-select-border: 4px;
        overflow-x: overlay;
        overflow-y: visible;
    }
-
-    code {
-        // deliberate constants as we're behind an invert filter
-        background-color: #f8f8f8;
-    }
 }

 .mx_EventTile_lineNumbers {
--- a/res/css/views/rooms/_LinkPreviewGroup.scss
+++ b/res/css/views/rooms/_LinkPreviewGroup.scss
@ -0,0 +1,38 @@
+/*
+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_LinkPreviewGroup {
+    .mx_LinkPreviewGroup_hide {
+        cursor: pointer;
+        width: 18px;
+        height: 18px;
+
+        img {
+            flex: 0 0 40px;
+            visibility: hidden;
+        }
+    }
+
+    &:hover .mx_LinkPreviewGroup_hide img,
+    .mx_LinkPreviewGroup_hide.focus-visible:focus img {
+        visibility: visible;
+    }
+
+    > .mx_AccessibleButton {
+        color: $accent-color;
+        text-align: center;
+    }
+}
--- a/res/css/views/rooms/_LinkPreviewWidget.scss
+++ b/res/css/views/rooms/_LinkPreviewWidget.scss
@ -33,12 +33,16 @@ limitations under the License.
 .mx_LinkPreviewWidget_caption {
    margin-left: 15px;
    flex: 1 1 auto;
+    overflow-x: hidden; // cause it to wrap rather than clip
 }

 .mx_LinkPreviewWidget_title {
-    display: inline;
    font-weight: bold;
    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }

 .mx_LinkPreviewWidget_siteName {
@ -49,22 +53,9 @@ limitations under the License.
    margin-top: 8px;
    white-space: normal;
    word-wrap: break-word;
-}
-
-.mx_LinkPreviewWidget_cancel {
-    cursor: pointer;
-    width: 18px;
-    height: 18px;
-
-    img {
-        flex: 0 0 40px;
-        visibility: hidden;
-    }
-}
-
-.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,
-.mx_LinkPreviewWidget_cancel.focus-visible:focus img {
-    visibility: visible;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
 }

 .mx_MatrixChat_useCompactLayout {
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@ -119,8 +119,6 @@ $voipcall-plinth-color: #394049;

 $theme-button-bg-color: #e3e8f0;
 $dialpad-button-bg-color: #6F7882;
-;
-

 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $bg-color;
@ -274,24 +272,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
 }

 // markdown overrides:
-.mx_EventTile_content .markdown-body pre:hover {
-    border-color: #808080 !important; // inverted due to rules below
-    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; // copied from light theme due to inversion below
-    // the code above works only in Firefox, this is for other browsers
-    // see https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
-    &::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.2); // copied from light theme due to inversion below
-    }
-}
 .mx_EventTile_content .markdown-body {
-    pre, code {
-        filter: invert(1);
-    }
-
-    pre code {
-        filter: none;
-    }
-
    table {
        tr {
            background-color: #000000;
@ -301,18 +282,9 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
            background-color: #080808;
        }
    }
-
-    blockquote {
-        color: #919191;
-    }
 }

-// diff highlight colors
-// intentionally swapped to avoid inversion
-.hljs-addition {
-    background: #fdd;
-}
-
-.hljs-deletion {
-    background: #dfd;
+// highlight.js overrides
+.hljs-tag {
+    color: inherit; // Without this they'd be weirdly blue which doesn't match the theme
 }
--- a/res/themes/dark/css/dark.scss
+++ b/res/themes/dark/css/dark.scss
@ -9,3 +9,4 @@
@import "_dark.scss";
@import "../../light/css/_mods.scss";
@import "../../../../res/css/_components.scss";
+@import url("highlight.js/styles/atom-one-dark.css");
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@ -118,7 +118,7 @@ $voipcall-plinth-color: #394049;

 $theme-button-bg-color: #e3e8f0;
 $dialpad-button-bg-color: #6F7882;
-;
+

 $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
@ -249,7 +249,7 @@ $composer-shadow-color: tranparent;
@define-mixin mx_DialogButton_secondary {
    // flip colours for the secondary ones
    font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color !important;
    color: $accent-color;
    background-color: $button-secondary-bg-color;
 }
@ -267,18 +267,7 @@ $composer-shadow-color: tranparent;
 }

 // markdown overrides:
-.mx_EventTile_content .markdown-body pre:hover {
-    border-color: #808080 !important; // inverted due to rules below
-}
 .mx_EventTile_content .markdown-body {
-    pre, code {
-        filter: invert(1);
-    }
-
-    pre code {
-        filter: none;
-    }
-
    table {
        tr {
            background-color: #000000;
@ -290,12 +279,7 @@ $composer-shadow-color: tranparent;
    }
 }

-// diff highlight colors
-// intentionally swapped to avoid inversion
-.hljs-addition {
-    background: #fdd;
-}
-
-.hljs-deletion {
-    background: #dfd;
+// highlight.js overrides:
+.hljs-tag {
+    color: inherit; // Without this they'd be weirdly blue which doesn't match the theme
 }
--- a/res/themes/legacy-dark/css/legacy-dark.scss
+++ b/res/themes/legacy-dark/css/legacy-dark.scss
@ -4,3 +4,4 @@
@import "../../legacy-light/css/_legacy-light.scss";
@import "_legacy-dark.scss";
@import "../../../../res/css/_components.scss";
+@import url("highlight.js/styles/atom-one-dark.css");
--- a/res/themes/legacy-light/css/legacy-light.scss
+++ b/res/themes/legacy-light/css/legacy-light.scss
@ -3,3 +3,4 @@
@import "_fonts.scss";
@import "_legacy-light.scss";
@import "../../../../res/css/_components.scss";
+@import url("highlight.js/styles/atom-one-light.css");
--- a/res/themes/light/css/light.scss
+++ b/res/themes/light/css/light.scss
@ -4,3 +4,4 @@
@import "_light.scss";
@import "_mods.scss";
@import "../../../../res/css/_components.scss";
+@import url("highlight.js/styles/atom-one-light.css");