From 7afc8c5869b303b6393c192b6a6c0396e7372391 Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 6 Jul 2022 13:29:26 +0200 Subject: [PATCH] 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 --- res/css/_components.scss | 1 + .../shared/_MediaProcessingError.scss | 20 +++++++++++ src/components/structures/BackdropPanel.tsx | 2 ++ src/components/views/dialogs/InviteDialog.tsx | 10 +++--- .../views/dialogs/UploadConfirmDialog.tsx | 15 +++++--- src/components/views/messages/MAudioBody.tsx | 6 ++-- src/components/views/messages/MImageBody.tsx | 6 ++-- src/components/views/messages/MVideoBody.tsx | 6 ++-- .../views/messages/MVoiceMessageBody.tsx | 6 ++-- .../messages/shared/MediaProcessingError.tsx | 33 ++++++++++++++++++ .../tabs/room/SecurityRoomSettingsTab.tsx | 3 +- .../shared/MediaProcessingError-test.tsx | 34 +++++++++++++++++++ .../MediaProcessingError-test.tsx.snap | 16 +++++++++ 13 files changed, 135 insertions(+), 23 deletions(-) create mode 100644 res/css/components/views/messages/shared/_MediaProcessingError.scss create mode 100644 src/components/views/messages/shared/MediaProcessingError.tsx create mode 100644 test/components/views/messages/shared/MediaProcessingError-test.tsx create mode 100644 test/components/views/messages/shared/__snapshots__/MediaProcessingError-test.tsx.snap diff --git a/res/css/_components.scss b/res/css/_components.scss index 74f5feedf3..d13b0f5a58 100644 --- 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 new file mode 100644 index 0000000000..97b82ad0f1 --- /dev/null +++ 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/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx index 08f6c33738..4247188d67 100644 --- a/src/components/structures/BackdropPanel.tsx +++ b/src/components/structures/BackdropPanel.tsx @@ -36,6 +36,8 @@ export const BackdropPanel: React.FC = ({ backgroundImage, blurMultiplie } return
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 478a0f8d50..28caf66ec0 100644 --- 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 { const avatarSize = 36; const avatar = (this.props.member as ThreepidMember).isEmail - ? @@ -1152,10 +1153,7 @@ export default class InviteDialog extends React.PureComponent - + { " " + _t("Invited people will be able to read old messages.") }

; } diff --git a/src/components/views/dialogs/UploadConfirmDialog.tsx b/src/components/views/dialogs/UploadConfirmDialog.tsx index c705da1ac3..bd68171240 100644 --- 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,11 +81,16 @@ export default class UploadConfirmDialog extends React.Component { 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 = ( - + ); } else if (this.mimeType.startsWith("video/")) { preview = ( @@ -92,9 +98,10 @@ export default class UploadConfirmDialog extends React.Component { ); } else { placeholder = ( - ); } @@ -118,7 +125,7 @@ export default class UploadConfirmDialog extends React.Component {
{ preview &&
{ preview }
} -
+
{ placeholder } { this.props.file.name } ({ filesize(this.props.file.size) })
diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx index 9d20c667e8..5841c03bb3 100644 --- a/src/components/views/messages/MAudioBody.tsx +++ b/src/components/views/messages/MAudioBody.tsx @@ -28,6 +28,7 @@ import { PlaybackManager } from "../../../audio/PlaybackManager"; import { isVoiceMessage } from "../../../utils/EventUtils"; import { PlaybackQueue } from "../../../audio/PlaybackQueue"; import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext"; +import MediaProcessingError from "./shared/MediaProcessingError"; interface IState { error?: Error; @@ -93,10 +94,9 @@ export default class MAudioBody extends React.PureComponent public render() { if (this.state.error) { return ( - - + { _t("Error processing audio message") } - + ); } diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 371b88db41..87d7e419e3 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -38,6 +38,7 @@ import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContex import { blobIsAnimated, mayBeAnimated } from '../../../utils/Image'; import { presentableTextForFile } from "../../../utils/FileUtils"; import { createReconnectedListener } from '../../../utils/connection'; +import MediaProcessingError from './shared/MediaProcessingError'; enum Placeholder { NoImage, @@ -552,10 +553,9 @@ export default class MImageBody extends React.Component { if (this.state.error) { return ( -
- + { _t("Error decrypting image") } -
+ ); } diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index c46f64a301..fefedc6775 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/src/components/views/messages/MVideoBody.tsx @@ -28,6 +28,7 @@ import { IBodyProps } from "./IBodyProps"; import MFileBody from "./MFileBody"; import { ImageSize, suggestedSize as suggestedVideoSize } from "../../../settings/enums/ImageSize"; import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext"; +import MediaProcessingError from './shared/MediaProcessingError'; interface IState { decryptedUrl?: string; @@ -244,10 +245,9 @@ export default class MVideoBody extends React.PureComponent if (this.state.error !== null) { return ( - - + { _t("Error decrypting video") } - + ); } diff --git a/src/components/views/messages/MVoiceMessageBody.tsx b/src/components/views/messages/MVoiceMessageBody.tsx index 65521225ba..7bcefffdb9 100644 --- a/src/components/views/messages/MVoiceMessageBody.tsx +++ b/src/components/views/messages/MVoiceMessageBody.tsx @@ -21,16 +21,16 @@ import { _t } from "../../../languageHandler"; import RecordingPlayback from "../audio_messages/RecordingPlayback"; import MAudioBody from "./MAudioBody"; import MFileBody from "./MFileBody"; +import MediaProcessingError from "./shared/MediaProcessingError"; export default class MVoiceMessageBody extends MAudioBody { // A voice message is an audio file but rendered in a special way. public render() { if (this.state.error) { return ( - - + { _t("Error processing voice message") } - + ); } diff --git a/src/components/views/messages/shared/MediaProcessingError.tsx b/src/components/views/messages/shared/MediaProcessingError.tsx new file mode 100644 index 0000000000..4584a6b55a --- /dev/null +++ b/src/components/views/messages/shared/MediaProcessingError.tsx @@ -0,0 +1,33 @@ +/* +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. +*/ + +import React from 'react'; + +import { Icon as WarningIcon } from '../../../../../res/img/warning.svg'; + +interface Props { + className?: string; + children: React.ReactNode; +} + +const MediaProcessingError: React.FC = ({ className, children }) => ( + + + { children } + +); + +export default MediaProcessingError; diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index 14a937c5f6..361b82b0e2 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -21,6 +21,7 @@ import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state"; import { EventType } from 'matrix-js-sdk/src/@types/event'; import { logger } from "matrix-js-sdk/src/logger"; +import { Icon as WarningIcon } from "../../../../../../res/img/warning.svg"; import { _t } from "../../../../../languageHandler"; import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; import Modal from "../../../../../Modal"; @@ -231,7 +232,7 @@ export default class SecurityRoomSettingsTab extends React.Component - + { _t("To link to this room, please add an address.") } diff --git a/test/components/views/messages/shared/MediaProcessingError-test.tsx b/test/components/views/messages/shared/MediaProcessingError-test.tsx new file mode 100644 index 0000000000..114e56f511 --- /dev/null +++ b/test/components/views/messages/shared/MediaProcessingError-test.tsx @@ -0,0 +1,34 @@ +/* +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. +*/ + +import React from 'react'; +import { render } from '@testing-library/react'; + +import MediaProcessingError from '../../../../../src/components/views/messages/shared/MediaProcessingError'; + +describe('', () => { + const defaultProps = { + className: 'test-classname', + children: 'Something went wrong', + }; + const getComponent = (props = {}) => + render(); + + it('renders', () => { + const { container } = getComponent(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/test/components/views/messages/shared/__snapshots__/MediaProcessingError-test.tsx.snap b/test/components/views/messages/shared/__snapshots__/MediaProcessingError-test.tsx.snap new file mode 100644 index 0000000000..6b50edce75 --- /dev/null +++ b/test/components/views/messages/shared/__snapshots__/MediaProcessingError-test.tsx.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders 1`] = ` +
+ +
+ Something went wrong + +
+`;