Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Put behind a labs flag

Browse Source
This commit is contained in:
Andrew Morgan 2020-06-26 00:00:30 +01:00
parent 6ea5dc7b7c
commit 87f961df3f
5 changed files with 40 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
res/css/views/elements/_Spinner.scss
View File

@ -23,7 +23,7 @@ limitations under the License.
flex: 1; flex: 1;
} }
.mx_Spinner img { .mx_Spinner_spin img {
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }

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

@ -17,6 +17,7 @@ limitations under the License.
import React from "react"; import React from "react";
import createReactClass from 'create-react-class'; import createReactClass from 'create-react-class';
import {_t} from "../../../languageHandler"; import {_t} from "../../../languageHandler";
import SettingsStore from "../../../settings/SettingsStore";
export default createReactClass({ export default createReactClass({
displayName: 'InlineSpinner', displayName: 'InlineSpinner',
@ -27,10 +28,20 @@ export default createReactClass({
const imgClass = this.props.imgClassName || ""; const imgClass = this.props.imgClassName || "";
const alt = this.props.alt || _t("Loading..."); const alt = this.props.alt || _t("Loading...");
let divClass;
let imageSource;
if (SettingsStore.isFeatureEnabled('feature_new_spinner')) {
divClass = "mx_InlineSpinner mx_Spinner_spin";
imageSource = require("../../../../res/img/spinner.svg");
} else {
divClass = "mx_InlineSpinner";
imageSource = require("../../../../res/img/spinner.gif");
}
return ( return (
<div className="mx_InlineSpinner"> <div className={divClass}>
<img <img
src={require("../../../../res/img/spinner.svg")} src={imageSource}
width={w} width={w}
height={h} height={h}
className={imgClass} className={imgClass}

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

@ -18,18 +18,29 @@ limitations under the License.
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import {_t} from "../../../languageHandler"; import {_t} from "../../../languageHandler";
import SettingsStore from "../../../settings/SettingsStore";
const Spinner = ({w = 32, h = 32, imgClassName, alt, message}) => { const Spinner = ({w = 32, h = 32, imgClassName, alt, message}) => {
let divClass;
let imageSource;
if (SettingsStore.isFeatureEnabled('feature_new_spinner')) {
divClass = "mx_Spinner mx_Spinner_spin";
imageSource = require("../../../../res/img/spinner.svg");
} else {
divClass = "mx_Spinner";
imageSource = require("../../../../res/img/spinner.gif");
}
return ( return (
<div className="mx_Spinner"> <div className={divClass}>
{ message && <React.Fragment><div className="mx_Spinner_Msg">{ message}</div>&nbsp;</React.Fragment> } { message && <React.Fragment><div className="mx_Spinner_Msg">{ message}</div>&nbsp;</React.Fragment> }
<img <img
src={require("../../../../res/img/spinner.svg")} src={imageSource}
width={w} width={w}
height={h} height={h}
className={imgClassName} className={imgClassName}
alt={alt || _t("Loading...")} alt={alt || _t("Loading...")}
/> />
</div> </div>
); );
}; };

1
src/i18n/strings/en_EN.json
View File

@ -427,6 +427,7 @@
"Sorry, your homeserver is too old to participate in this room.": "Sorry, your homeserver is too old to participate in this room.", "Sorry, your homeserver is too old to participate in this room.": "Sorry, your homeserver is too old to participate in this room.",
"Please contact your homeserver administrator.": "Please contact your homeserver administrator.", "Please contact your homeserver administrator.": "Please contact your homeserver administrator.",
"Failed to join room": "Failed to join room", "Failed to join room": "Failed to join room",
"New spinner design": "New spinner design",
"Font scaling": "Font scaling", "Font scaling": "Font scaling",
"Message Pinning": "Message Pinning", "Message Pinning": "Message Pinning",
"Custom user status messages": "Custom user status messages", "Custom user status messages": "Custom user status messages",

6
src/settings/Settings.js
View File

@ -97,6 +97,12 @@ export const SETTINGS = {
// // not use this for new settings. // // not use this for new settings.
// invertedSettingName: "my-negative-setting", // invertedSettingName: "my-negative-setting",
// }, // },
"feature_new_spinner": {
isFeature: true,
displayName: _td("New spinner design"),
supportedLevels: LEVELS_FEATURE,
default: false,
},
"feature_font_scaling": { "feature_font_scaling": {
isFeature: true, isFeature: true,
displayName: _td("Font scaling"), displayName: _td("Font scaling"),