PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Revert "replace all require(.svg) with esm import" (#7969)

Browse source 
* Revert "replace all require(svgs) with esm import (#7948)"

This reverts commit 61cd463a3b.

* add .default to svg icon inline requires

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add shameful eslint ignore

Signed-off-by: Kerry Archibald <kerrya@element.io>

* format eslintrc

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add missed MFileBody change

Signed-off-by: Kerry Archibald <kerrya@element.io>

* one more broken svg

Signed-off-by: Kerry Archibald <kerrya@element.io>

* and ignore it

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-03-03 18:51:38 +01:00 committed by GitHub
parent 8a7ffb4f90
commit d98a73b003
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 119 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
.eslintrc.js
View file

@ -87,32 +87,71 @@ module.exports = {
"jsx-a11y/role-supports-aria-props": "off",
"jsx-a11y/tabindex-no-positive": "off",
},
overrides: [{
files: [
"src/**/*.{ts,tsx}",
"test/**/*.{ts,tsx}",
],
extends: [
"plugin:matrix-org/typescript",
"plugin:matrix-org/react",
],
rules: {
// Things we do that break the ideal style
"prefer-promise-reject-errors": "off",
"quotes": "off",
"no-extra-boolean-cast": "off",
overrides: [
{
files: [
"src/**/*.{ts,tsx}",
"test/**/*.{ts,tsx}",
],
extends: [
"plugin:matrix-org/typescript",
"plugin:matrix-org/react",
],
rules: {
// Things we do that break the ideal style
"prefer-promise-reject-errors": "off",
"quotes": "off",
"no-extra-boolean-cast": "off",
// Remove Babel things manually due to override limitations
"@babel/no-invalid-this": ["off"],
// Remove Babel things manually due to override limitations
"@babel/no-invalid-this": ["off"],
// We're okay being explicit at the moment
"@typescript-eslint/no-empty-interface": "off",
// We disable this while we're transitioning
"@typescript-eslint/no-explicit-any": "off",
// We'd rather not do this but we do
"@typescript-eslint/ban-ts-comment": "off",
// We're okay being explicit at the moment
"@typescript-eslint/no-empty-interface": "off",
// We disable this while we're transitioning
"@typescript-eslint/no-explicit-any": "off",
// We'd rather not do this but we do
"@typescript-eslint/ban-ts-comment": "off",
},
},
}],
// temporary override for offending icon require files
{
files: [
"src/SdkConfig.ts",
"src/components/structures/FileDropTarget.tsx",
"src/components/structures/RoomStatusBar.tsx",
"src/components/structures/UserMenu.tsx",
"src/components/views/avatars/WidgetAvatar.tsx",
"src/components/views/dialogs/AddExistingToSpaceDialog.tsx",
"src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx",
"src/components/views/dialogs/ForwardDialog.tsx",
"src/components/views/dialogs/InviteDialog.tsx",
"src/components/views/dialogs/ModalWidgetDialog.tsx",
"src/components/views/dialogs/UploadConfirmDialog.tsx",
"src/components/views/dialogs/security/SetupEncryptionDialog.tsx",
"src/components/views/elements/AddressTile.tsx",
"src/components/views/elements/AppWarning.tsx",
"src/components/views/elements/SSOButtons.tsx",
"src/components/views/messages/MAudioBody.tsx",
"src/components/views/messages/MImageBody.tsx",
"src/components/views/messages/MFileBody.tsx",
"src/components/views/messages/MStickerBody.tsx",
"src/components/views/messages/MVideoBody.tsx",
"src/components/views/messages/MVoiceMessageBody.tsx",
"src/components/views/right_panel/EncryptionPanel.tsx",
"src/components/views/rooms/EntityTile.tsx",
"src/components/views/rooms/LinkPreviewGroup.tsx",
"src/components/views/rooms/MemberList.tsx",
"src/components/views/rooms/MessageComposer.tsx",
"src/components/views/rooms/ReplyPreview.tsx",
"src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx",
"src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx"
],
rules: {
"@typescript-eslint/no-var-requires": "off",
},
}
],
settings: {
react: {
version: "detect",

2
src/SdkConfig.ts
View file

@ -50,7 +50,7 @@ export const DEFAULTS: ConfigOptions = {
},
desktopBuilds: {
available: true,
logo: require("../res/img/element-desktop-logo.svg"),
logo: require("../res/img/element-desktop-logo.svg").default,
url: "https://element.io/get-started",
},
};

3
src/components/structures/FileDropTarget.tsx
View file

@ -17,7 +17,6 @@ limitations under the License.
import React, { useEffect, useState } from "react";
import { _t } from "../../languageHandler";
import FileDropSvg from '../../../res/img/upload-big.svg';
interface IProps {
parent: HTMLElement;
@ -110,7 +109,7 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
if (state.dragging) {
return <div className="mx_FileDropTarget">
<img src={FileDropSvg} className="mx_FileDropTarget_image" alt="" />
<img src={require("../../../res/img/upload-big.svg").default} className="mx_FileDropTarget_image" alt="" />
{ _t("Drop file here to upload") }
</div>;
}

22
src/components/structures/GroupView.js
View file

@ -46,12 +46,6 @@ import { createSpaceFromCommunity } from "../../utils/space";
import { Action } from "../../dispatcher/actions";
import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
import { UPDATE_EVENT } from "../../stores/AsyncStore";
import CreateRoomSvg from '../../../res/img/icons-create-room.svg';
import CancelSmallSvg from '../../../res/img/cancel-small.svg';
import CancelSvg from '../../../res/img/cancel.svg';
import ExternalLinkSvg from '../../../res/img/external-link.svg';
import AddRoomSvg from '../../../res/img/icons-room-add.svg';
import CameraSvg from '../../../res/img/camera.svg';
const LONG_DESC_PLACEHOLDER = _td(
`<h1>HTML for your community's page</h1>
@ -141,7 +135,7 @@ class CategoryRoomList extends React.Component {
(<AccessibleButton className="mx_GroupView_featuredThings_addButton"
onClick={this.onAddRoomsToSummaryClicked}
>
<img src={CreateRoomSvg} width="64" height="64" />
<img src={require("../../../res/img/icons-create-room.svg").default} width="64" height="64" />
<div className="mx_GroupView_featuredThings_addButton_label">
{ _t('Add a Room') }
</div>
@ -241,7 +235,7 @@ class FeaturedRoom extends React.Component {
const deleteButton = this.props.editing ?
<img
className="mx_GroupView_featuredThing_deleteButton"
src={CancelSmallSvg}
src={require("../../../res/img/cancel-small.svg").default}
width="14"
height="14"
alt="Delete"
@ -312,7 +306,7 @@ class RoleUserList extends React.Component {
render() {
const addButton = this.props.editing ?
(<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
<img src={CreateRoomSvg} width="64" height="64" />
<img src={require("../../../res/img/icons-create-room.svg").default} width="64" height="64" />
<div className="mx_GroupView_featuredThings_addButton_label">
{ _t('Add a User') }
</div>
@ -392,7 +386,7 @@ class FeaturedUser extends React.Component {
const deleteButton = this.props.editing ?
<img
className="mx_GroupView_featuredThing_deleteButton"
src={CancelSmallSvg}
src={require("../../../res/img/cancel-small.svg").default}
width="14"
height="14"
alt="Delete"
@ -850,7 +844,7 @@ export default class GroupView extends React.Component {
},
) }
<a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
<img src={ExternalLinkSvg} width="11" height="10" alt='' />
<img src={require("../../../res/img/external-link.svg").default} width="11" height="10" alt='' />
</a>
</div>;
}
@ -931,7 +925,7 @@ export default class GroupView extends React.Component {
onClick={this._onAddRoomsClick}
>
<div className="mx_GroupView_rooms_header_addRow_button">
<img src={AddRoomSvg} width="24" height="24" />
<img src={require("../../../res/img/icons-room-add.svg").default} width="24" height="24" />
</div>
<div className="mx_GroupView_rooms_header_addRow_label">
{ _t('Add rooms to this community') }
@ -1263,7 +1257,7 @@ export default class GroupView extends React.Component {
<div className="mx_GroupView_avatarPicker_edit">
<label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
<img
src={CameraSvg}
src={require("../../../res/img/camera.svg").default}
alt={_t("Upload avatar")}
title={_t("Upload avatar")}
width="17"
@ -1337,7 +1331,7 @@ export default class GroupView extends React.Component {
onClick={this._onCancelClick}
>
<img
src={CancelSvg}
src={require("../../../res/img/cancel.svg").default}
className="mx_filterFlipColor"
width="18"
height="18"

5
src/components/structures/MyGroups.js
View file

@ -26,7 +26,6 @@ import AccessibleButton from '../views/elements/AccessibleButton';
import MatrixClientContext from "../../contexts/MatrixClientContext";
import AutoHideScrollbar from "./AutoHideScrollbar";
import { replaceableComponent } from "../../utils/replaceableComponent";
import GroupsSvg from '../../../res/img/icons-groups.svg';
@replaceableComponent("structures.MyGroups")
export default class MyGroups extends React.Component {
@ -107,7 +106,7 @@ export default class MyGroups extends React.Component {
}
return <div className="mx_MyGroups">
<SimpleRoomHeader title={_t("Communities")} icon={GroupsSvg} />
<SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/img/icons-groups.svg").default} />
<div className='mx_MyGroups_header'>
<div className="mx_MyGroups_headerCard">
<AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick} />
@ -123,7 +122,7 @@ export default class MyGroups extends React.Component {
</div>
{ /*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
<AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
<img src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
<img src={require("../../../res/img/icons-create-room.svg").default} width="50" height="50" />
</AccessibleButton>
<div className="mx_MyGroups_headerCard_content">
<div className="mx_MyGroups_headerCard_header">

3
src/components/structures/RoomStatusBar.tsx
View file

@ -30,7 +30,6 @@ import { StaticNotificationState } from "../../stores/notifications/StaticNotifi
import AccessibleButton from "../views/elements/AccessibleButton";
import InlineSpinner from "../views/elements/InlineSpinner";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import WarningTriangleSvg from '../../../res/img/feather-customised/warning-triangle.svg';
const STATUS_BAR_HIDDEN = 0;
const STATUS_BAR_EXPANDED = 1;
@ -286,7 +285,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
<div role="alert">
<div className="mx_RoomStatusBar_connectionLostBar">
<img
src={WarningTriangleSvg}
src={require("../../../res/img/feather-customised/warning-triangle.svg").default}
width="24"
height="24"
title="/!\ "

3
src/components/structures/UserMenu.tsx
View file

@ -62,7 +62,6 @@ import { SettingUpdatedPayload } from "../../dispatcher/payloads/SettingUpdatedP
import UserIdentifierCustomisations from "../../customisations/UserIdentifier";
import PosthogTrackers from "../../PosthogTrackers";
import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload";
import SwitchThemeSvg from '../../../res/img/element-icons/roomlist/dark-light-mode.svg';
const CustomStatusSection = () => {
const cli = useContext(MatrixClientContext);
@ -516,7 +515,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
>
<img
src={SwitchThemeSvg}
src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg").default}
alt={_t("Switch theme")}
width={16}
/>

15
src/components/views/avatars/WidgetAvatar.tsx
View file

@ -20,27 +20,22 @@ import classNames from 'classnames';
import { IApp } from "../../../stores/WidgetStore";
import BaseAvatar, { BaseAvatarType } from "./BaseAvatar";
import { mediaFromMxc } from "../../../customisations/Media";
import DefaultAppSvg from '../../../../res/img/element-icons/room/default_app.svg';
import DefaultVideoSvg from '../../../../res/img/element-icons/room/default_video.svg';
import DefaultCalSvg from '../../../../res/img/element-icons/room/default_cal.svg';
import DefaultDocSvg from '../../../../res/img/element-icons/room/default_doc.svg';
import DefaultClockSvg from '../../../../res/img/element-icons/room/default_clock.svg';
interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
app: IApp;
}
const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 20, ...props }) => {
let iconUrls = [DefaultAppSvg];
let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg").default];
// heuristics for some better icons until Widgets support their own icons
if (app.type.includes("jitsi")) {
iconUrls = [DefaultVideoSvg];
iconUrls = [require("../../../../res/img/element-icons/room/default_video.svg").default];
} else if (app.type.includes("meeting") || app.type.includes("calendar")) {
iconUrls = [DefaultCalSvg];
iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg").default];
} else if (app.type.includes("pad") || app.type.includes("doc") || app.type.includes("calc")) {
iconUrls = [DefaultDocSvg];
iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg").default];
} else if (app.type.includes("clock")) {
iconUrls = [DefaultClockSvg];
iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg").default];
}
return (

3
src/components/views/context_menus/GroupInviteTileContextMenu.js
View file

@ -26,7 +26,6 @@ import Modal from '../../../Modal';
import GroupStore from "../../../stores/GroupStore";
import { MenuItem } from "../../structures/ContextMenu";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import ContextDeleteSvg from '../../../../res/img/icon_context_delete.svg';
@replaceableComponent("views.context_menus.GroupInviteTileContextMenu")
export default class GroupInviteTileContextMenu extends React.Component {
@ -86,7 +85,7 @@ export default class GroupInviteTileContextMenu extends React.Component {
render() {
return <div>
<MenuItem className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject}>
<img className="mx_RoomTileContextMenu_tag_icon" src={ContextDeleteSvg} width="15" height="15" alt="" />
<img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg").default} width="15" height="15" alt="" />
{ _t('Reject') }
</MenuItem>
</div>;

3
src/components/views/dialogs/AddExistingToSpaceDialog.tsx
View file

@ -39,7 +39,6 @@ import ProgressBar from "../elements/ProgressBar";
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
import QueryMatcher from "../../../autocomplete/QueryMatcher";
import LazyRenderList from "../elements/LazyRenderList";
import WarningBadgeSvg from '../../../../res/img/element-icons/warning-badge.svg';
// These values match CSS
const ROW_HEIGHT = 32 + 12;
@ -214,7 +213,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
if (error) {
footer = <>
<img
src={WarningBadgeSvg}
src={require("../../../../res/img/element-icons/warning-badge.svg").default}
height="24"
width="24"
alt=""

3
src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx
View file

@ -44,7 +44,6 @@ import { inviteUsersToRoom } from "../../../RoomInvite";
import ProgressBar from "../elements/ProgressBar";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { CreateEventField, IGroupRoom, IGroupSummary } from "../../../@types/groups";
import WarningBadgeSvg from '../../../../res/img/element-icons/warning-badge.svg';
interface IProps {
matrixClient: MatrixClient;
@ -242,7 +241,7 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
let footer;
if (error) {
footer = <>
<img src={WarningBadgeSvg} height="24" width="24" alt="" />
<img src={require("../../../../res/img/element-icons/warning-badge.svg").default} height="24" width="24" alt="" />
<span className="mx_CreateSpaceFromCommunityDialog_error">
<div className="mx_CreateSpaceFromCommunityDialog_errorHeading">{ _t("Failed to migrate community") }</div>

3
src/components/views/dialogs/ForwardDialog.tsx
View file

@ -48,7 +48,6 @@ import { roomContextDetailsText } from "../../../Rooms";
import { Action } from "../../../dispatcher/actions";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { ButtonEvent } from "../elements/AccessibleButton";
import EllipsisSvg from '../../../../res/img/ellipsis.svg';
const AVATAR_SIZE = 30;
@ -217,7 +216,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
<EntityTile
className="mx_EntityTile_ellipsis"
avatarJsx={
<BaseAvatar url={EllipsisSvg} name="..." width={36} height={36} />
<BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." width={36} height={36} />
}
name={text}
presenceState="online"

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

@ -72,9 +72,6 @@ import { ScreenName } from '../../../PosthogTrackers';
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import EmailPillSvg from '../../../../res/img/icon-email-pill-avatar.svg';
import PillRemoveSvg from '../../../../res/img/icon-pill-remove.svg';
import InfoSvg from '../../../../res/img/element-icons/info.svg';
// we have a number of types defined from the Matrix spec which can't reasonably be altered here.
/* eslint-disable camelcase */
@ -198,7 +195,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
const avatar = (this.props.member as ThreepidMember).isEmail
? <img
className='mx_InviteDialog_userTile_avatar mx_InviteDialog_userTile_threepidAvatar'
src={EmailPillSvg}
src={require("../../../../res/img/icon-email-pill-avatar.svg").default}
width={avatarSize}
height={avatarSize}
/>
@ -220,7 +217,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
onClick={this.onRemove}
>
<img
src={PillRemoveSvg}
src={require("../../../../res/img/icon-pill-remove.svg").default}
alt={_t('Remove')}
width={8}
height={8}
@ -304,7 +301,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
const avatarSize = 36;
const avatar = (this.props.member as ThreepidMember).isEmail
? <img
src={EmailPillSvg}
src={require("../../../../res/img/icon-email-pill-avatar.svg").default}
width={avatarSize}
height={avatarSize}
/>
@ -1475,7 +1472,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
keySharingWarning =
<p className='mx_InviteDialog_helpText'>
<img
src={InfoSvg}
src={require("../../../../res/img/element-icons/info.svg").default}
width={14}
height={14} />
{ " " + _t("Invited people will be able to read old messages.") }

4
src/components/views/dialogs/ModalWidgetDialog.tsx
View file

@ -42,7 +42,7 @@ import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { ELEMENT_CLIENT_ID } from "../../../identifiers";
import SettingsStore from "../../../settings/SettingsStore";
import WarningBadgeSvg from '../../../../res/img/element-icons/warning-badge.svg';
interface IProps {
widgetDefinition: IModalWidgetOpenRequestData;
widgetRoomId?: string;
@ -187,7 +187,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
>
<div className="mx_ModalWidgetDialog_warning">
<img
src={WarningBadgeSvg}
src={require("../../../../res/img/element-icons/warning-badge.svg").default}
height="16"
width="16"
alt=""

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

@ -23,7 +23,6 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
import { getBlobSafeMimeType } from '../../../utils/blobs';
import BaseDialog from "./BaseDialog";
import DialogButtons from "../elements/DialogButtons";
import FilesSvg from '../../../../res/img/feather-customised/files.svg';
interface IProps {
file: File;
@ -95,7 +94,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
preview = <div>
<div>
<img className="mx_UploadConfirmDialog_fileIcon"
src={FilesSvg}
src={require("../../../../res/img/feather-customised/files.svg").default}
/>
{ this.props.file.name } ({ filesize(this.props.file.size) })
</div>

6
src/components/views/dialogs/security/SetupEncryptionDialog.tsx
View file

@ -22,14 +22,12 @@ import { _t } from '../../../../languageHandler';
import { SetupEncryptionStore, Phase } from '../../../../stores/SetupEncryptionStore';
import { replaceableComponent } from "../../../../utils/replaceableComponent";
import { IDialogProps } from "../IDialogProps";
import VerifiedSvg from '../../../../../res/img/e2e/verified.svg';
import WarningSvg from '../../../../../res/img/e2e/warning.svg';
function iconFromPhase(phase: Phase) {
if (phase === Phase.Done) {
return VerifiedSvg;
return require("../../../../../res/img/e2e/verified.svg").default;
} else {
return WarningSvg;
return require("../../../../../res/img/e2e/warning.svg").default;
}
}

3
src/components/views/elements/AddressTile.tsx
View file

@ -24,7 +24,6 @@ import { mediaFromMxc } from "../../../customisations/Media";
import { IUserAddress } from '../../../UserAddress';
import BaseAvatar from '../avatars/BaseAvatar';
import EmailUserIcon from "../../../../res/img/icon-email-user.svg";
import AddressDeleteSvg from '../../../../res/img/icon-address-delete.svg';
interface IProps {
address: IUserAddress;
@ -125,7 +124,7 @@ export default class AddressTile extends React.Component<IProps> {
if (this.props.canDismiss) {
dismiss = (
<div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed}>
<img src={AddressDeleteSvg} width="9" height="9" />
<img src={require("../../../../res/img/icon-address-delete.svg").default} width="9" height="9" />
</div>
);
}

4
src/components/views/elements/AppWarning.tsx
View file

@ -1,7 +1,5 @@
import React from 'react';
import WarningSvg from '../../../../res/img/warning.svg';
interface IProps {
errorMsg?: string;
}
@ -10,7 +8,7 @@ const AppWarning: React.FC<IProps> = (props) => {
return (
<div className='mx_AppPermissionWarning'>
<div className='mx_AppPermissionWarningImage'>
<img src={WarningSvg} alt='' />
<img src={require("../../../../res/img/warning.svg").default} alt='' />
</div>
<div className='mx_AppPermissionWarningText'>
<span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg || "Error" }</span>

18
src/components/views/elements/SSOButtons.tsx
View file

@ -25,12 +25,6 @@ import { _t } from "../../../languageHandler";
import { IdentityProviderBrand, IIdentityProvider, ISSOFlow } from "../../../Login";
import AccessibleTooltipButton from "./AccessibleTooltipButton";
import { mediaFromMxc } from "../../../customisations/Media";
import AppleSvg from '../../../../res/img/element-icons/brands/apple.svg';
import FacebookSvg from '../../../../res/img/element-icons/brands/facebook.svg';
import GithubSvg from '../../../../res/img/element-icons/brands/github.svg';
import GitlabSvg from '../../../../res/img/element-icons/brands/gitlab.svg';
import GoogleSvg from '../../../../res/img/element-icons/brands/google.svg';
import TwitterSvg from '../../../../res/img/element-icons/brands/twitter.svg';
interface ISSOButtonProps extends Omit<IProps, "flow"> {
idp: IIdentityProvider;
@ -40,17 +34,17 @@ interface ISSOButtonProps extends Omit<IProps, "flow"> {
const getIcon = (brand: IdentityProviderBrand | string) => {
switch (brand) {
case IdentityProviderBrand.Apple:
return AppleSvg;
return require(`../../../../res/img/element-icons/brands/apple.svg`).default;
case IdentityProviderBrand.Facebook:
return FacebookSvg;
return require(`../../../../res/img/element-icons/brands/facebook.svg`).default;
case IdentityProviderBrand.Github:
return GithubSvg;
return require(`../../../../res/img/element-icons/brands/github.svg`).default;
case IdentityProviderBrand.Gitlab:
return GitlabSvg;
return require(`../../../../res/img/element-icons/brands/gitlab.svg`).default;
case IdentityProviderBrand.Google:
return GoogleSvg;
return require(`../../../../res/img/element-icons/brands/google.svg`).default;
case IdentityProviderBrand.Twitter:
return TwitterSvg;
return require(`../../../../res/img/element-icons/brands/twitter.svg`).default;
default:
return null;
}

3
src/components/views/groups/GroupMemberList.js
View file

@ -27,7 +27,6 @@ import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePha
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
import EllipsisSvg from '../../../../res/img/ellipsis.svg';
const INITIAL_LOAD_NUM_MEMBERS = 30;
@ -90,7 +89,7 @@ export default class GroupMemberList extends React.Component {
<EntityTile
className="mx_EntityTile_ellipsis"
avatarJsx={
<BaseAvatar url={EllipsisSvg} name="..." width={36} height={36} />
<BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." width={36} height={36} />
}
name={text}
presenceState="online"

3
src/components/views/groups/GroupRoomInfo.js
View file

@ -28,7 +28,6 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { mediaFromMxc } from "../../../customisations/Media";
import CancelSvg from '../../../../res/img/cancel.svg';
@replaceableComponent("views.groups.GroupRoomInfo")
export default class GroupRoomInfo extends React.Component {
@ -217,7 +216,7 @@ export default class GroupRoomInfo extends React.Component {
<div className="mx_MemberInfo" role="tabpanel">
<AutoHideScrollbar>
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
<img src={CancelSvg} width="18" height="18" className="mx_filterFlipColor" />
<img src={require("../../../../res/img/cancel.svg").default} width="18" height="18" className="mx_filterFlipColor" />
</AccessibleButton>
{ avatarElement }

3
src/components/views/groups/GroupRoomList.js
View file

@ -23,7 +23,6 @@ import { showGroupAddRoomDialog } from '../../../GroupAddressPicker';
import AccessibleButton from '../elements/AccessibleButton';
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import EllipsisSvg from '../../../../res/img/ellipsis.svg';
const INITIAL_LOAD_NUM_ROOMS = 30;
@ -81,7 +80,7 @@ export default class GroupRoomList extends React.Component {
<EntityTile
className="mx_EntityTile_ellipsis"
avatarJsx={
<BaseAvatar url={EllipsisSvg} name="..." width={36} height={36} />
<BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." width={36} height={36} />
}
name={text}
presenceState="online"

3
src/components/views/messages/MAudioBody.tsx
View file

@ -29,7 +29,6 @@ import { PlaybackManager } from "../../../audio/PlaybackManager";
import { isVoiceMessage } from "../../../utils/EventUtils";
import { PlaybackQueue } from "../../../audio/PlaybackQueue";
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import WarningSvg from '../../../../res/img/warning.svg';
interface IState {
error?: Error;
@ -97,7 +96,7 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
if (this.state.error) {
return (
<span className="mx_MAudioBody">
<img src={WarningSvg} width="16" height="16" />
<img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
{ _t("Error processing audio message") }
</span>
);

3
src/components/views/messages/MFileBody.tsx
View file

@ -30,14 +30,13 @@ import { IBodyProps } from "./IBodyProps";
import { FileDownloader } from "../../../utils/FileDownloader";
import TextWithTooltip from "../elements/TextWithTooltip";
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import DownloadSvg from '../../../../res/img/download.svg';
export let DOWNLOAD_ICON_URL; // cached copy of the download.svg asset for the sandboxed iframe later on
async function cacheDownloadIcon() {
if (DOWNLOAD_ICON_URL) return; // cached already
// eslint-disable-next-line @typescript-eslint/no-var-requires
const svg = await fetch(DownloadSvg).then(r => r.text());
const svg = await fetch(require('../../../../res/img/download.svg').default).then(r => r.text());
DOWNLOAD_ICON_URL = "data:image/svg+xml;base64," + window.btoa(svg);
}

3
src/components/views/messages/MImageBody.tsx
View file

@ -37,7 +37,6 @@ import { IBodyProps } from "./IBodyProps";
import { ImageSize, suggestedSize as suggestedImageSize } from "../../../settings/enums/ImageSize";
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import WarningSvg from '../../../../res/img/warning.svg';
interface IState {
decryptedUrl?: string;
@ -544,7 +543,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
if (this.state.error !== null) {
return (
<div className="mx_MImageBody">
<img src={WarningSvg} width="16" height="16" />
<img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
{ _t("Error decrypting image") }
</div>
);

3
src/components/views/messages/MStickerBody.tsx
View file

@ -20,7 +20,6 @@ import MImageBody from './MImageBody';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { BLURHASH_FIELD } from "../../../ContentMessages";
import Tooltip from "../elements/Tooltip";
import ShowStickersSvg from '../../../../res/img/icons-show-stickers.svg';
@replaceableComponent("views.messages.MStickerBody")
export default class MStickerBody extends MImageBody {
@ -46,7 +45,7 @@ export default class MStickerBody extends MImageBody {
// img onLoad hasn't fired yet.
protected getPlaceholder(width: number, height: number): JSX.Element {
if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
return <img src={ShowStickersSvg} width="75" height="75" />;
return <img src={require("../../../../res/img/icons-show-stickers.svg").default} width="75" height="75" />;
}
// Tooltip to show on mouse over

3
src/components/views/messages/MVideoBody.tsx
View file

@ -29,7 +29,6 @@ import { IBodyProps } from "./IBodyProps";
import MFileBody from "./MFileBody";
import { ImageSize, suggestedSize as suggestedVideoSize } from "../../../settings/enums/ImageSize";
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import WarningSvg from '../../../../res/img/warning.svg';
interface IState {
decryptedUrl?: string;
@ -258,7 +257,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
if (this.state.error !== null) {
return (
<span className="mx_MVideoBody">
<img src={WarningSvg} width="16" height="16" />
<img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
{ _t("Error decrypting video") }
</span>
);

3
src/components/views/messages/MVoiceMessageBody.tsx
View file

@ -22,7 +22,6 @@ import { _t } from "../../../languageHandler";
import RecordingPlayback from "../audio_messages/RecordingPlayback";
import MAudioBody from "./MAudioBody";
import MFileBody from "./MFileBody";
import WarningSvg from '../../../../res/img/warning.svg';
@replaceableComponent("views.messages.MVoiceMessageBody")
export default class MVoiceMessageBody extends MAudioBody {
@ -31,7 +30,7 @@ export default class MVoiceMessageBody extends MAudioBody {
if (this.state.error) {
return (
<span className="mx_MVoiceMessageBody">
<img src={WarningSvg} width="16" height="16" />
<img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
{ _t("Error processing voice message") }
</span>
);

3
src/components/views/right_panel/EncryptionPanel.tsx
View file

@ -34,7 +34,6 @@ import * as sdk from "../../../index";
import { _t } from "../../../languageHandler";
import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import WarningSvg from '../../../../res/img/e2e/warning.svg';
// cancellation codes which constitute a key mismatch
const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
@ -88,7 +87,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
// FIXME: Using an import will result in test failures
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
headerImage: WarningSvg,
headerImage: require("../../../../res/img/e2e/warning.svg").default,
title: _t("Your messages are not secure"),
description: <div>
{ _t("One of the following may be compromised:") }

3
src/components/views/rooms/EntityTile.tsx
View file

@ -25,7 +25,6 @@ import E2EIcon, { E2EState } from './E2EIcon';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import BaseAvatar from '../avatars/BaseAvatar';
import PresenceLabel from "./PresenceLabel";
import PlusSvg from '../../../../res/img/plus.svg';
export enum PowerStatus {
Admin = "admin",
@ -160,7 +159,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
if (this.props.showInviteButton) {
inviteButton = (
<div className="mx_EntityTile_invite">
<img src={PlusSvg} width="16" height="16" />
<img src={require("../../../../res/img/plus.svg").default} width="16" height="16" />
</div>
);
}

3
src/components/views/rooms/LinkPreviewGroup.tsx
View file

@ -25,7 +25,6 @@ import AccessibleButton from "../elements/AccessibleButton";
import { _t } from "../../../languageHandler";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
import CancelSvg from '../../../../res/img/cancel.svg';
const INITIAL_NUM_PREVIEWS = 2;
@ -73,7 +72,7 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick, onH
className="mx_filterFlipColor"
alt=""
role="presentation"
src={CancelSvg}
src={require("../../../../res/img/cancel.svg").default}
width="18"
height="18"
/>

3
src/components/views/rooms/MemberList.tsx
View file

@ -50,7 +50,6 @@ import SpaceStore from "../../../stores/spaces/SpaceStore";
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
import { UIComponent } from "../../../settings/UIFeature";
import PosthogTrackers from "../../../PosthogTrackers";
import EllipsisSvg from '../../../../res/img/ellipsis.svg';
const INITIAL_LOAD_NUM_MEMBERS = 30;
const INITIAL_LOAD_NUM_INVITED = 5;
@ -317,7 +316,7 @@ export default class MemberList extends React.Component<IProps, IState> {
<EntityTile
className="mx_EntityTile_ellipsis"
avatarJsx={
<BaseAvatar url={EllipsisSvg} name="..." width={36} height={36} />
<BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." width={36} height={36} />
}
name={text}
presenceState="online"

3
src/components/views/rooms/MessageComposer.tsx
View file

@ -52,7 +52,6 @@ import { SettingUpdatedPayload } from "../../../dispatcher/payloads/SettingUpdat
import MessageComposerButtons from './MessageComposerButtons';
import { ButtonEvent } from '../elements/AccessibleButton';
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import RoomReplaceSvg from '../../../../res/img/room_replaced.svg';
let instanceCount = 0;
@ -409,7 +408,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
controls.push(<div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
<div className="mx_MessageComposer_replaced_valign">
<img className="mx_MessageComposer_roomReplaced_icon"
src={RoomReplaceSvg}
src={require("../../../../res/img/room_replaced.svg").default}
/>
<span className="mx_MessageComposer_roomReplaced_header">
{ _t("This room has been replaced and is no longer active.") }

3
src/components/views/rooms/ReplyPreview.tsx
View file

@ -23,7 +23,6 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import ReplyTile from './ReplyTile';
import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
import CancelSvg from '../../../../res/img/cancel.svg';
function cancelQuoting(context: TimelineRenderingType) {
dis.dispatch({
@ -53,7 +52,7 @@ export default class ReplyPreview extends React.Component<IProps> {
<div className="mx_ReplyPreview_header mx_ReplyPreview_cancel">
<img
className="mx_filterFlipColor"
src={CancelSvg}
src={require("../../../../res/img/cancel.svg").default}
width="18"
height="18"
onClick={() => cancelQuoting(this.context.timelineRenderingType)}

3
src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
View file

@ -40,7 +40,6 @@ import ErrorDialog from "../../../dialogs/ErrorDialog";
import SettingsFieldset from '../../SettingsFieldset';
import ExternalLink from '../../../elements/ExternalLink';
import PosthogTrackers from "../../../../../PosthogTrackers";
import WarningSvg from '../../../../../../res/img/warning.svg';
interface IProps {
roomId: string;
@ -264,7 +263,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
if (room.getJoinRule() === JoinRule.Public && !this.state.hasAliases) {
aliasWarning = (
<div className='mx_SecurityRoomSettingsTab_warning'>
<img src={WarningSvg} width={15} height={15} />
<img src={require("../../../../../../res/img/warning.svg").default} width={15} height={15} />
<span>
{ _t("To link to this room, please add an address.") }
</span>

3
src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
View file

@ -51,7 +51,6 @@ import ChangePassword from "../../ChangePassword";
import InlineTermsAgreement from "../../../terms/InlineTermsAgreement";
import SetIdServer from "../../SetIdServer";
import SetIntegrationManager from "../../SetIntegrationManager";
import WarningTriangleSvg from '../../../../../../res/img/feather-customised/warning-triangle.svg';
interface IProps {
closeSettingsFn: () => void;
@ -454,7 +453,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
const discoWarning = this.state.requiredPolicyInfo.hasTerms
? <img
className='mx_GeneralUserSettingsTab_warningIcon'
src={WarningTriangleSvg}
src={require("../../../../../../res/img/feather-customised/warning-triangle.svg").default}
width="18"
height="18"
alt={_t("Warning")}