Merge branch 'develop' into justjanne/feat/use-case-selection

matrix-org · Jul 6, 2022 · 9128a99 · 9128a99
2 parents 980426c + 7afc8c5
commit 9128a99
Show file tree

Hide file tree

Showing 21 changed files with 218 additions and 80 deletions.
diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -26,6 +26,7 @@
 @import "./components/views/location/_ShareType.scss";
 @import "./components/views/location/_ZoomButtons.scss";
 @import "./components/views/messages/_MBeaconBody.scss";
+@import "./components/views/messages/shared/_MediaProcessingError.scss";
 @import "./components/views/spaces/_QuickThemeSwitcher.scss";
 @import "./structures/_AutoHideScrollbar.scss";
 @import "./structures/_BackdropPanel.scss";

diff --git a/res/css/components/views/messages/shared/_MediaProcessingError.scss b/res/css/components/views/messages/shared/_MediaProcessingError.scss
@@ -0,0 +1,20 @@
+/*
+Copyright 2022 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_MediaProcessingError_Icon {
+    margin-right: $spacing-4;
+    vertical-align: text-top;
+}
diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss
@@ -96,7 +96,7 @@ limitations under the License.
 
         .mx_MessageTimestamp {
             flex: 1 0 0;
-            text-align: right; // FIXME: .mx_EventTile:not([data-layout=bubble]) .mx_MessageTimestamp
+            text-align: right;
             visibility: visible;
             position: initial;
             font-size: $font-14px;

diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
@@ -51,11 +51,14 @@ limitations under the License.
         text-decoration: underline;
     }
 
+    // Emulate mx_EventTile[data-layout=group]
     .mx_EventTile {
         padding-top: 0 !important; // Override mx_EventTile:not([data-layout=bubble])
 
         .mx_MessageTimestamp {
             position: absolute;
+            left: 0;
+            text-align: center;
         }
 
         .mx_EventTile_line {

diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss
@@ -149,11 +149,14 @@ limitations under the License.
         }
     }
 
-    .mx_GenericEventListSummary:not([data-layout=bubble]) {
-        .mx_EventTile_line,
-        > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
-            padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
-            padding-inline-end: var(--BaseCard_EventTile-spacing-inline);
+    .mx_GenericEventListSummary {
+        &[data-layout=irc],
+        &[data-layout=group] {
+            .mx_EventTile_line,
+            .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
+                padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
+                padding-inline-end: var(--BaseCard_EventTile-spacing-inline);
+            }
         }
     }
 

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -195,16 +195,18 @@ $left-gutter: 64px;
         }
     }
 
+    &[data-layout=irc] {
+        .mx_MessageTimestamp {
+            text-align: right;
+        }
+    }
+
     &[data-layout=group] {
         .mx_EventTile_avatar {
             top: 14px;
             left: $spacing-8;
         }
 
-        .mx_MessageTimestamp {
-            position: absolute; // for modern layout
-        }
-
         .mx_EventTile_line,
         .mx_EventTile_reply {
             padding-top: var(--EventTile_group_line-spacing-block-start);
@@ -221,6 +223,12 @@ $left-gutter: 64px;
             margin-right: 10px;
         }
 
+        .mx_MessageTimestamp {
+            position: absolute;
+            left: 0;
+            text-align: center;
+        }
+
         .mx_ThreadSummary,
         .mx_ThreadSummary_icon {
             margin-left: $left-gutter;
@@ -261,6 +269,10 @@ $left-gutter: 64px;
         &.mx_EventTile_continuation {
             padding-top: 0px !important;
         }
+
+        &.mx_EventTile_info .mx_EventTile_line {
+            padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+        }
     }
 
     &[data-layout=bubble] {
@@ -304,11 +316,6 @@ $left-gutter: 64px;
         }
     }
 
-    .mx_MessageTimestamp {
-        left: 0px;
-        text-align: center;
-    }
-
     /* this is used for the tile for the event which is selected via the URL.
      * TODO: ultimately we probably want some transition on here.
      */
@@ -366,17 +373,42 @@ $left-gutter: 64px;
     }
 }
 
-.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
-    padding-left: $left-gutter;
+.mx_GenericEventListSummary {
+    &[data-layout=irc],
+    &[data-layout=group] {
+        .mx_EventTile_line .mx_RedactedBody {
+            line-height: 1; // remove spacing between lines
+        }
+    }
+
+    &[data-layout=irc] {
+        .mx_EventTile_info .mx_EventTile_line {
+            padding-left: 0; // Override .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line
+        }
+
+        .mx_EventTile_line .mx_RedactedBody {
+            padding-left: 24px; // 25px - 1px
 
-    .mx_RedactedBody {
-        line-height: 1; // remove spacing between lines
+            &::before {
+                left: var(--right-padding);
+            }
+        }
+
+        // Apply only collapsed events block
+        > .mx_EventTile_line {
+            padding-left: calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)); // 15 px of padding
+        }
     }
-}
 
-.mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,
-.mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
-    padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+    &[data-layout=group] {
+        .mx_EventTile_line {
+            padding-left: $left-gutter;
+        }
+
+        .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
+            padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+        }
+    }
 }
 
 .mx_EventTile_content {
@@ -928,11 +960,14 @@ $left-gutter: 64px;
                 }
             }
 
-            &:not([data-layout=bubble]) {
+            &[data-layout=irc],
+            &[data-layout=group] {
                 .mx_MessageTimestamp {
                     top: 2px; // Align with avatar
                 }
+            }
 
+            &:not([data-layout=bubble]) {
                 .mx_EventTile_avatar {
                     left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
                     z-index: 9; // position above the hover styling
@@ -1038,11 +1073,6 @@ $left-gutter: 64px;
                 }
             }
 
-            .mx_MessageTimestamp {
-                top: 2px; // Align with mx_EventTile_content
-                position: absolute; // for IRC layout
-            }
-
             .mx_EventTile_senderDetails {
                 display: flex;
                 align-items: center;
@@ -1062,6 +1092,11 @@ $left-gutter: 64px;
                     }
                 }
             }
+
+            .mx_MessageTimestamp {
+                position: absolute; // for IRC layout
+                top: 2px; // Align with mx_EventTile_content
+            }
         }
     }
 

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$icon-width: 14px;
-$right-padding: 5px;
 $irc-line-height: $font-18px;
 
 .mx_IRCLayout {
     --name-width: 70px;
+    --icon-width: 14px;
+    --right-padding: 5px;
 
     line-height: $irc-line-height !important;
 
@@ -36,7 +36,7 @@ $irc-line-height: $font-18px;
         padding-top: 0;
 
         > * {
-            margin-right: $right-padding;
+            margin-right: var(--right-padding);
         }
 
         .mx_EventTile_msgOption {
@@ -115,10 +115,6 @@ $irc-line-height: $font-18px;
             }
         }
 
-        .mx_MessageTimestamp {
-            text-align: right;
-        }
-
         .mx_EventTile_e2eIcon {
             padding: 0;
 
@@ -157,26 +153,23 @@ $irc-line-height: $font-18px;
 
     .mx_EventTile_emote {
         .mx_EventTile_avatar {
-            margin-left: calc(var(--name-width) + $icon-width + $right-padding);
+            margin-left: calc(var(--name-width) + var(--icon-width) + var(--right-padding));
         }
     }
 
     blockquote {
         margin: 0;
     }
 
-    .mx_GenericEventListSummary > .mx_EventTile_line {
-        padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
-    }
-
     .mx_EventTile.mx_EventTile_info {
         .mx_EventTile_avatar {
-            left: calc(var(--name-width) + 10px + $icon-width);
+            left: calc(var(--name-width) + 10px + var(--icon-width));
             top: 0;
+            margin-right: var(--right-padding);
         }
 
         .mx_EventTile_line {
-            left: calc(var(--name-width) + 10px + $icon-width);
+            left: calc(var(--name-width) + 10px + var(--icon-width));
         }
 
         .mx_TextualEvent {

diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -92,12 +92,6 @@ limitations under the License.
     }
 }
 
-.mx_SettingsTab_linkBtn {
-    cursor: pointer;
-    color: $accent;
-    word-break: break-all;
-}
-
 .mx_SettingsTab_toggleWithDescription {
     margin-top: $spacing-24;
 }
diff --git a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
@@ -27,9 +27,6 @@ limitations under the License.
 }
 
 .mx_SecurityUserSettingsTab {
-    .mx_SettingsTab_heading {
-        margin-bottom: 22px;
-    }
     .mx_SettingsTab_section {
         .mx_AccessibleButton_kind_link {
             font-size: inherit;

diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
@@ -36,6 +36,8 @@ export const BackdropPanel: React.FC<IProps> = ({ backgroundImage, blurMultiplie
     }
     return <div className="mx_BackdropPanel">
         <img
+            role="presentation"
+            alt=""
             style={styles}
             className="mx_BackdropPanel--image"
             src={backgroundImage} />

diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
@@ -21,6 +21,8 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import { logger } from "matrix-js-sdk/src/logger";
 
+import { Icon as InfoIcon } from "../../../../res/img/element-icons/info.svg";
+import { Icon as EmailPillAvatarIcon } from "../../../../res/img/icon-email-pill-avatar.svg";
 import { _t, _td } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { makeRoomPermalink, makeUserPermalink } from "../../../utils/permalinks/Permalinks";
@@ -186,8 +188,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
 
         const avatarSize = 36;
         const avatar = (this.props.member as ThreepidMember).isEmail
-            ? <img
-                src={require("../../../../res/img/icon-email-pill-avatar.svg").default}
+            ? <EmailPillAvatarIcon
                 width={avatarSize}
                 height={avatarSize}
             />
@@ -1152,10 +1153,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 if (visibility === "world_readable" || visibility === "shared") {
                     keySharingWarning =
                         <p className='mx_InviteDialog_helpText'>
-                            <img
-                                src={require("../../../../res/img/element-icons/info.svg").default}
-                                width={14}
-                                height={14} />
+                            <InfoIcon height={14} width={14} />
                             { " " + _t("Invited people will be able to read old messages.") }
                         </p>;
                 }

diff --git a/src/components/views/dialogs/UploadConfirmDialog.tsx b/src/components/views/dialogs/UploadConfirmDialog.tsx
@@ -18,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import filesize from "filesize";
 
+import { Icon as FileIcon } from '../../../../res/img/feather-customised/files.svg';
 import { _t } from '../../../languageHandler';
 import { getBlobSafeMimeType } from '../../../utils/blobs';
 import BaseDialog from "./BaseDialog";
@@ -80,21 +81,27 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
             title = _t('Upload files');
         }
 
+        const fileId = `mx-uploadconfirmdialog-${this.props.file.name}`;
         let preview: JSX.Element;
         let placeholder: JSX.Element;
         if (this.mimeType.startsWith("image/")) {
             preview = (
-                <img className="mx_UploadConfirmDialog_imagePreview" src={this.objectUrl} />
+                <img
+                    className="mx_UploadConfirmDialog_imagePreview"
+                    src={this.objectUrl}
+                    aria-labelledby={fileId}
+                />
             );
         } else if (this.mimeType.startsWith("video/")) {
             preview = (
                 <video className="mx_UploadConfirmDialog_imagePreview" src={this.objectUrl} playsInline controls={false} />
             );
         } else {
             placeholder = (
-                <img
+                <FileIcon
                     className="mx_UploadConfirmDialog_fileIcon"
-                    src={require("../../../../res/img/feather-customised/files.svg").default}
+                    height={18}
+                    width={18}
                 />
             );
         }
@@ -118,7 +125,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
                     <div className="mx_UploadConfirmDialog_previewOuter">
                         <div className="mx_UploadConfirmDialog_previewInner">
                             { preview && <div>{ preview }</div> }
-                            <div>
+                            <div id={fileId}>
                                 { placeholder }
                                 { this.props.file.name } ({ filesize(this.props.file.size) })
                             </div>