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

Convert image URLs in React to require calls

Browse source 
This allows Webpack to insert the proper image URL after builds steps like
adding a hash and so on. The path you supply to `require` is relative to the JS
source file, just like any other would be.
This commit is contained in:
J. Ryan Stinnett 2019-01-10 19:37:28 -06:00
parent 989227d435
commit 20e296b20e
75 changed files with 201 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/elements/AddressSelector.js
View file

@ -150,7 +150,7 @@ export default React.createClass({
showAddress={this.props.showAddress}
justified={true}
networkName="vector"
networkUrl="img/search-icon-vector.svg"
networkUrl={require("../../../../res/img/search-icon-vector.svg")}
/>
</div>,
);

4
src/components/views/elements/AddressTile.js
View file

@ -54,7 +54,7 @@ export default React.createClass({
address.avatarMxc, 25, 25, 'crop',
));
} else if (address.addressType === 'email') {
imgUrls.push('img/icon-email-user.svg');
imgUrls.push(require("../../../../res/img/icon-email-user.svg"));
}
// Removing networks for now as they're not really supported
@ -141,7 +141,7 @@ export default React.createClass({
if (this.props.canDismiss) {
dismiss = (
<div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed} >
<TintableSvg src="img/icon-address-delete.svg" width="9" height="9" />
<TintableSvg src={require("../../../../res/img/icon-address-delete.svg")} width="9" height="9" />
</div>
);
}

2
src/components/views/elements/AppPermission.js
View file

@ -47,7 +47,7 @@ export default class AppPermission extends React.Component {
return (
<div className='mx_AppPermissionWarning'>
<div className='mx_AppPermissionWarningImage'>
<img src='img/warning.svg' alt={_t('Warning!')} />
<img src={require("../../../../res/img/warning.svg")} alt={_t('Warning!')} />
</div>
<div className='mx_AppPermissionWarningText'>
<span className='mx_AppPermissionWarningTextLabel'>{ _t('Do you want to load widget from URL:') }</span> <span className='mx_AppPermissionWarningTextURL'>{ this.state.curlBase }</span>

16
src/components/views/elements/AppTile.js
View file

@ -582,19 +582,21 @@ export default class AppTile extends React.Component {
// editing is done in scalar
const showEditButton = Boolean(this._scalarClient && this._canUserModify());
const deleteWidgetLabel = this._deleteWidgetLabel();
let deleteIcon = 'img/cancel_green.svg';
let deleteIcon = require("../../../../res/img/cancel_green.svg");
let deleteClasses = 'mx_AppTileMenuBarWidget';
if (this._canUserModify()) {
deleteIcon = 'img/icon-delete-pink.svg';
deleteIcon = require("../../../../res/img/icon-delete-pink.svg");
deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
}
// Picture snapshot - only show button when apps are maximised.
const showPictureSnapshotButton = this._hasCapability('m.capability.screenshot') && this.props.show;
const showPictureSnapshotIcon = 'img/camera_green.svg';
const popoutWidgetIcon = 'img/button-new-window.svg';
const reloadWidgetIcon = 'img/button-refresh.svg';
const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
const showPictureSnapshotIcon = require("../../../../res/img/camera_green.svg");
const popoutWidgetIcon = require("../../../../res/img/button-new-window.svg");
const reloadWidgetIcon = require("../../../../res/img/button-refresh.svg");
const minimizeIcon = require("../../../../res/img/minimize.svg");
const maximizeIcon = require("../../../../res/img/maximize.svg");
const windowStateIcon = (this.props.show ? minimizeIcon : maximizeIcon);
let appTileClass;
if (this.props.miniMode) {
@ -653,7 +655,7 @@ export default class AppTile extends React.Component {
{ /* Edit widget */ }
{ showEditButton && <TintableSvgButton
src="img/edit_green.svg"
src={require("../../../../res/img/edit_green.svg")}
className={"mx_AppTileMenuBarWidget " +
(this.props.showDelete ? "mx_AppTileMenuBarWidgetPadding" : "")}
title={_t('Edit')}

2
src/components/views/elements/AppWarning.js
View file

@ -5,7 +5,7 @@ const AppWarning = (props) => {
return (
<div className='mx_AppPermissionWarning'>
<div className='mx_AppPermissionWarningImage'>
<img src='img/warning.svg' alt='' />
<img src={require("../../../../res/img/warning.svg")} alt='' />
</div>
<div className='mx_AppPermissionWarningText'>
<span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg }</span>

2
src/components/views/elements/CreateRoomButton.js
View file

@ -25,7 +25,7 @@ const CreateRoomButton = function(props) {
<ActionButton action="view_create_room"
mouseOverAction={props.callout ? "callout_create_room" : null}
label={_t("Create new room")}
iconPath="img/icons-create-room.svg"
iconPath={require("../../../../res/img/icons-create-room.svg")}
size={props.size}
tooltip={props.tooltip}
/>

4
src/components/views/elements/EditableItemList.js
View file

@ -62,13 +62,13 @@ const EditableItem = React.createClass({
{ this.props.onAdd ?
<div className="mx_EditableItem_addButton">
<img className="mx_filterFlipColor"
src="img/plus.svg" width="14" height="14"
src={require("../../../../res/img/plus.svg")} width="14" height="14"
alt={_t("Add")} onClick={this.onAdd} />
</div>
:
<div className="mx_EditableItem_removeButton">
<img className="mx_filterFlipColor"
src="img/cancel-small.svg" width="14" height="14"
src={require("../../../../res/img/cancel-small.svg")} width="14" height="14"
alt={_t("Delete")} onClick={this.onRemove} />
</div>
}

2
src/components/views/elements/HomeButton.js
View file

@ -24,7 +24,7 @@ const HomeButton = function(props) {
return (
<ActionButton action="view_home_page"
label={_t("Home")}
iconPath="img/icons-home.svg"
iconPath={require("../../../../res/img/icons-home.svg")}
size={props.size}
tooltip={props.tooltip}
/>

2
src/components/views/elements/ImageView.js
View file

@ -176,7 +176,7 @@ module.exports = React.createClass({
<img src={this.props.src} style={style} />
<div className="mx_ImageView_labelWrapper">
<div className="mx_ImageView_label">
<AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }><img src="img/cancel-white.svg" width="18" height="18" alt={ _t('Close') } /></AccessibleButton>
<AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }><img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } /></AccessibleButton>
<div className="mx_ImageView_shim">
</div>
<div className="mx_ImageView_name">

2
src/components/views/elements/InlineSpinner.js
View file

@ -26,7 +26,7 @@ module.exports = React.createClass({
return (
<div className="mx_InlineSpinner">
<img src="img/spinner.gif" width={w} height={h} className={imgClass} />
<img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
</div>
);
},

8
src/components/views/elements/ManageIntegsButton.js
View file

@ -80,7 +80,11 @@ export default class ManageIntegsButton extends React.Component {
});
if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
integrationsWarningTriangle = <img src="img/warning.svg" title={_t('Integrations Error')} width="17" />;
integrationsWarningTriangle = <img
src={require("../../../../res/img/warning.svg")}
title={_t('Integrations Error')}
width="17"
/>;
// Popup shown when hovering over integrationsButton_error (via CSS)
integrationsErrorPopup = (
<span className="mx_RoomSettings_integrationsButton_errorPopup">
@ -91,7 +95,7 @@ export default class ManageIntegsButton extends React.Component {
integrationsButton = (
<AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={_t('Manage Integrations')}>
<TintableSvg src="img/feather-icons/grid.svg" width="20" height="20" />
<TintableSvg src={require("../../../../res/img/feather-icons/grid.svg")} width="20" height="20" />
{ integrationsWarningTriangle }
{ integrationsErrorPopup }
</AccessibleButton>

2
src/components/views/elements/MessageSpinner.js
View file

@ -27,7 +27,7 @@ module.exports = React.createClass({
return (
<div className="mx_Spinner">
<div className="mx_Spinner_Msg">{ msg }</div>&nbsp;
<img src="img/spinner.gif" width={w} height={h} className={imgClass} />
<img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
</div>
);
},

2
src/components/views/elements/RoomDirectoryButton.js
View file

@ -25,7 +25,7 @@ const RoomDirectoryButton = function(props) {
<ActionButton action="view_room_directory"
mouseOverAction={props.callout ? "callout_room_directory" : null}
label={_t("Room directory")}
iconPath="img/icons-directory.svg"
iconPath={require("../../../../res/img/icons-directory.svg")}
size={props.size}
tooltip={props.tooltip}
/>

2
src/components/views/elements/SettingsButton.js
View file

@ -24,7 +24,7 @@ const SettingsButton = function(props) {
return (
<ActionButton action="view_user_settings"
label={_t("Settings")}
iconPath="img/icons-settings.svg"
iconPath={require("../../../../res/img/icons-settings.svg")}
size={props.size}
tooltip={props.tooltip}
/>

2
src/components/views/elements/Spinner.js
View file

@ -27,7 +27,7 @@ module.exports = React.createClass({
const imgClass = this.props.imgClassName || "";
return (
<div className="mx_Spinner">
<img src="img/spinner.gif" width={w} height={h} className={imgClass} />
<img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
</div>
);
},

2
src/components/views/elements/StartChatButton.js
View file

@ -25,7 +25,7 @@ const StartChatButton = function(props) {
<ActionButton action="view_create_chat"
mouseOverAction={props.callout ? "callout_start_chat" : null}
label={_t("Start chat")}
iconPath="img/icons-people.svg"
iconPath={require("../../../../res/img/icons-people.svg")}
size={props.size}
tooltip={props.tooltip}
/>