imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Task - replace img icons with svg components (#8963)

Browse source 
* 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
This commit is contained in:
Kerry 2022-07-06 13:29:26 +02:00 • committed by GitHub
parent afa8b01601
commit 7afc8c5869
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 135 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/views/dialogs/InviteDialog.tsx
View file

@ -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>;
}

15
src/components/views/dialogs/UploadConfirmDialog.tsx
View file

@ -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,11 +81,16 @@ 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 = (
@ -92,9 +98,10 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
);
} 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>