Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 7afc8c5

Browse files
author
Kerry
authored
Task - replace img icons with svg components (#8963)
* add role=presentation to backdrop panle image * replace img icons with svg components in InviteDialog * replace img icon with svg component * img icons to svg icons in MImageBody * remove log * img icon to svg in SecurityRoomSettingsTab * use shared error message for media message tiles * remove nbsp * dont snapshot test entire rtl render response * use aria-describedby for uploadconfirm preview * use aria-labelledby instead
1 parent afa8b01 commit 7afc8c5

File tree

13 files changed

+135
-23
lines changed

13 files changed

+135
-23
lines changed

res/css/_components.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
@import "./components/views/location/_ShareType.scss";
2727
@import "./components/views/location/_ZoomButtons.scss";
2828
@import "./components/views/messages/_MBeaconBody.scss";
29+
@import "./components/views/messages/shared/_MediaProcessingError.scss";
2930
@import "./components/views/spaces/_QuickThemeSwitcher.scss";
3031
@import "./structures/_AutoHideScrollbar.scss";
3132
@import "./structures/_BackdropPanel.scss";
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_MediaProcessingError_Icon {
18+
margin-right: $spacing-4;
19+
vertical-align: text-top;
20+
}

src/components/structures/BackdropPanel.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ export const BackdropPanel: React.FC<IProps> = ({ backgroundImage, blurMultiplie
3636
}
3737
return <div className="mx_BackdropPanel">
3838
<img
39+
role="presentation"
40+
alt=""
3941
style={styles}
4042
className="mx_BackdropPanel--image"
4143
src={backgroundImage} />

src/components/views/dialogs/InviteDialog.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import { Room } from "matrix-js-sdk/src/models/room";
2121
import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
2222
import { logger } from "matrix-js-sdk/src/logger";
2323

24+
import { Icon as InfoIcon } from "../../../../res/img/element-icons/info.svg";
25+
import { Icon as EmailPillAvatarIcon } from "../../../../res/img/icon-email-pill-avatar.svg";
2426
import { _t, _td } from "../../../languageHandler";
2527
import { MatrixClientPeg } from "../../../MatrixClientPeg";
2628
import { makeRoomPermalink, makeUserPermalink } from "../../../utils/permalinks/Permalinks";
@@ -186,8 +188,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
186188

187189
const avatarSize = 36;
188190
const avatar = (this.props.member as ThreepidMember).isEmail
189-
? <img
190-
src={require("../../../../res/img/icon-email-pill-avatar.svg").default}
191+
? <EmailPillAvatarIcon
191192
width={avatarSize}
192193
height={avatarSize}
193194
/>
@@ -1152,10 +1153,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
11521153
if (visibility === "world_readable" || visibility === "shared") {
11531154
keySharingWarning =
11541155
<p className='mx_InviteDialog_helpText'>
1155-
<img
1156-
src={require("../../../../res/img/element-icons/info.svg").default}
1157-
width={14}
1158-
height={14} />
1156+
<InfoIcon height={14} width={14} />
11591157
{ " " + _t("Invited people will be able to read old messages.") }
11601158
</p>;
11611159
}

src/components/views/dialogs/UploadConfirmDialog.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ limitations under the License.
1818
import React from 'react';
1919
import filesize from "filesize";
2020

21+
import { Icon as FileIcon } from '../../../../res/img/feather-customised/files.svg';
2122
import { _t } from '../../../languageHandler';
2223
import { getBlobSafeMimeType } from '../../../utils/blobs';
2324
import BaseDialog from "./BaseDialog";
@@ -80,21 +81,27 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
8081
title = _t('Upload files');
8182
}
8283

84+
const fileId = `mx-uploadconfirmdialog-${this.props.file.name}`;
8385
let preview: JSX.Element;
8486
let placeholder: JSX.Element;
8587
if (this.mimeType.startsWith("image/")) {
8688
preview = (
87-
<img className="mx_UploadConfirmDialog_imagePreview" src={this.objectUrl} />
89+
<img
90+
className="mx_UploadConfirmDialog_imagePreview"
91+
src={this.objectUrl}
92+
aria-labelledby={fileId}
93+
/>
8894
);
8995
} else if (this.mimeType.startsWith("video/")) {
9096
preview = (
9197
<video className="mx_UploadConfirmDialog_imagePreview" src={this.objectUrl} playsInline controls={false} />
9298
);
9399
} else {
94100
placeholder = (
95-
<img
101+
<FileIcon
96102
className="mx_UploadConfirmDialog_fileIcon"
97-
src={require("../../../../res/img/feather-customised/files.svg").default}
103+
height={18}
104+
width={18}
98105
/>
99106
);
100107
}
@@ -118,7 +125,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
118125
<div className="mx_UploadConfirmDialog_previewOuter">
119126
<div className="mx_UploadConfirmDialog_previewInner">
120127
{ preview && <div>{ preview }</div> }
121-
<div>
128+
<div id={fileId}>
122129
{ placeholder }
123130
{ this.props.file.name } ({ filesize(this.props.file.size) })
124131
</div>

src/components/views/messages/MAudioBody.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { PlaybackManager } from "../../../audio/PlaybackManager";
2828
import { isVoiceMessage } from "../../../utils/EventUtils";
2929
import { PlaybackQueue } from "../../../audio/PlaybackQueue";
3030
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
31+
import MediaProcessingError from "./shared/MediaProcessingError";
3132

3233
interface IState {
3334
error?: Error;
@@ -93,10 +94,9 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
9394
public render() {
9495
if (this.state.error) {
9596
return (
96-
<span className="mx_MAudioBody">
97-
<img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
97+
<MediaProcessingError className="mx_MAudioBody">
9898
{ _t("Error processing audio message") }
99-
</span>
99+
</MediaProcessingError>
100100
);
101101
}
102102

src/components/views/messages/MImageBody.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContex
3838
import { blobIsAnimated, mayBeAnimated } from '../../../utils/Image';
3939
import { presentableTextForFile } from "../../../utils/FileUtils";
4040
import { createReconnectedListener } from '../../../utils/connection';
41+
import MediaProcessingError from './shared/MediaProcessingError';
4142

4243
enum Placeholder {
4344
NoImage,
@@ -552,10 +553,9 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
552553

553554
if (this.state.error) {
554555
return (
555-
<div className="mx_MImageBody">
556-
<img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
556+
<MediaProcessingError className="mx_MImageBody">
557557
{ _t("Error decrypting image") }
558-
</div>
558+
</MediaProcessingError>
559559
);
560560
}
561561

src/components/views/messages/MVideoBody.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { IBodyProps } from "./IBodyProps";
2828
import MFileBody from "./MFileBody";
2929
import { ImageSize, suggestedSize as suggestedVideoSize } from "../../../settings/enums/ImageSize";
3030
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
31+
import MediaProcessingError from './shared/MediaProcessingError';
3132

3233
interface IState {
3334
decryptedUrl?: string;
@@ -244,10 +245,9 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
244245

245246
if (this.state.error !== null) {
246247
return (
247-
<span className="mx_MVideoBody">
248-
<img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
248+
<MediaProcessingError className="mx_MVideoBody">
249249
{ _t("Error decrypting video") }
250-
</span>
250+
</MediaProcessingError>
251251
);
252252
}
253253

src/components/views/messages/MVoiceMessageBody.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@ import { _t } from "../../../languageHandler";
2121
import RecordingPlayback from "../audio_messages/RecordingPlayback";
2222
import MAudioBody from "./MAudioBody";
2323
import MFileBody from "./MFileBody";
24+
import MediaProcessingError from "./shared/MediaProcessingError";
2425

2526
export default class MVoiceMessageBody extends MAudioBody {
2627
// A voice message is an audio file but rendered in a special way.
2728
public render() {
2829
if (this.state.error) {
2930
return (
30-
<span className="mx_MVoiceMessageBody">
31-
<img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
31+
<MediaProcessingError className="mx_MVoiceMessageBody">
3232
{ _t("Error processing voice message") }
33-
</span>
33+
</MediaProcessingError>
3434
);
3535
}
3636

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
19+
import { Icon as WarningIcon } from '../../../../../res/img/warning.svg';
20+
21+
interface Props {
22+
className?: string;
23+
children: React.ReactNode;
24+
}
25+
26+
const MediaProcessingError: React.FC<Props> = ({ className, children }) => (
27+
<span className={className}>
28+
<WarningIcon className='mx_MediaProcessingError_Icon' width="16" height="16" />
29+
{ children }
30+
</span>
31+
);
32+
33+
export default MediaProcessingError;

0 commit comments

Comments
 (0)