matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-11 20:22:36 +03:00
Code Activity

Vectorize spinners

Browse Source 
This replaces most of the GIF spinners used throughout the app with an
SVG that respects the user's theme. However, spinner.gif is still
retained for the room timeline avatar uploader component, since it is
more difficult to replace.

Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
Robin Townsend
2021-02-23 19:41:23 -05:00
parent 667c94b387
commit 40b684d7de
6 changed files with 304 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/views/elements/InlineSpinner.js
View File

@@ -24,23 +24,29 @@ export default class InlineSpinner extends React.Component {
const h = this.props.h || 16;
const imgClass = this.props.imgClassName || "";
let imageSource;
let icon;
if (SettingsStore.getValue('feature_new_spinner')) {
imageSource = require("../../../../res/img/spinner.svg");
} else {
imageSource = require("../../../../res/img/spinner.gif");
}
return (
<div className="mx_InlineSpinner">
icon = (
<img
src={imageSource}
src={require("../../../../res/img/logo-spinner.svg")}
width={w}
height={h}
className={imgClass}
aria-label={_t("Loading...")}
/>
</div>
);
} else {
icon = (
<div
className="mx_InlineSpinner_icon"
style={{width: w, height: h}}
aria-label={_t("Loading...")}
></div>
);
}
return (
<div className="mx_InlineSpinner">{ icon }</div>
);
}
}

28
src/components/views/elements/Spinner.js
View File

@@ -21,23 +21,31 @@ import {_t} from "../../../languageHandler";
import SettingsStore from "../../../settings/SettingsStore";
const Spinner = ({w = 32, h = 32, imgClassName, message}) => {
let imageSource;
let icon;
if (SettingsStore.getValue('feature_new_spinner')) {
imageSource = require("../../../../res/img/spinner.svg");
} else {
imageSource = require("../../../../res/img/spinner.gif");
}
return (
<div className="mx_Spinner">
{ message && <React.Fragment><div className="mx_Spinner_Msg">{ message}</div>&nbsp;</React.Fragment> }
icon = (
<img
src={imageSource}
src={require("../../../../res/img/logo-spinner.svg")}
width={w}
height={h}
className={imgClassName}
aria-label={_t("Loading...")}
/>
);
} else {
icon = (
<div
className="mx_Spinner_icon"
style={{width: w, height: h}}
aria-label={_t("Loading...")}
></div>
);
}
return (
<div className="mx_Spinner">
{ message && <React.Fragment><div className="mx_Spinner_Msg">{ message }</div>&nbsp;</React.Fragment> }
{ icon }
</div>
);
};