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

Merge pull request #5680 from robintown/better-spinners

Browse source 
Vectorize spinners
This commit is contained in:
Travis Ralston 2021-05-20 13:31:35 -06:00 • committed by GitHub
commit 767c7a1e38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 311 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -26,23 +26,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 mx_Spinner_icon"
style={{width: w, height: h}}
aria-label={_t("Loading...")}
></div>
);
}
return (
<div className="mx_InlineSpinner">{ icon }</div>
);
}
}

7
src/components/views/elements/MiniAvatarUploader.tsx
View file

@ -19,6 +19,7 @@ import {EventType} from 'matrix-js-sdk/src/@types/event';
import classNames from 'classnames';
import AccessibleButton from "./AccessibleButton";
import Spinner from "./Spinner";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {useTimeout} from "../../../hooks/useTimeout";
import Analytics from "../../../Analytics";
@ -88,6 +89,12 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
>
{ children }
<div className="mx_MiniAvatarUploader_indicator">
{ busy ?
<Spinner w={20} h={20} /> :
<div className="mx_MiniAvatarUploader_cameraIcon"></div> }
</div>
<div className={classNames("mx_Tooltip", {
"mx_Tooltip_visible": visible,
"mx_Tooltip_invisible": !visible,

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