Proof of concept for custom theme adding

For https://github.com/vector-im/riot-web/issues/12517
This commit is contained in:
Travis Ralston 2020-02-28 11:42:16 -07:00
parent a44d96bb77
commit 8520310e6e
3 changed files with 63 additions and 0 deletions

View file

@ -61,6 +61,8 @@ export default class GeneralUserSettingsTab extends React.Component {
emails: [],
msisdns: [],
...this._calculateThemeState(),
customThemeUrl: "",
customThemeError: "",
};
this.dispatcherRef = dis.register(this._onAction);
@ -274,6 +276,33 @@ export default class GeneralUserSettingsTab extends React.Component {
});
};
_onAddCustomTheme = async () => {
let currentThemes = SettingsStore.getValue("custom_themes");
if (!currentThemes) currentThemes = [];
currentThemes = currentThemes.map(c => c); // cheap clone
try {
const r = await fetch(this.state.customThemeUrl);
const themeInfo = await r.json();
if (!themeInfo || typeof(themeInfo['name']) !== 'string' || typeof(themeInfo['colors']) !== 'object') {
console.log(themeInfo);
this.setState({customThemeError: _t("Invalid theme schema.")});
return;
}
currentThemes.push(themeInfo);
} catch (e) {
console.error(e);
this.setState({customThemeError: _t("Error downloading theme information.")});
}
await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
this.setState({customThemeUrl: "", customThemeError: ""});
};
_onCustomThemeChange = (e) => {
this.setState({customThemeUrl: e.target.value});
};
_renderProfileSection() {
return (
<div className="mx_SettingsTab_section">
@ -368,6 +397,28 @@ export default class GeneralUserSettingsTab extends React.Component {
/>
</div>;
}
let customThemeForm;
if (SettingsStore.isFeatureEnabled("feature_custom_themes")) {
customThemeForm = (
<form onSubmit={this._onAddCustomTheme}>
<Field
label={_t("Custom theme URL")}
type='text'
id='mx_GeneralUserSettingsTab_customThemeInput'
autoComplete="off"
onChange={this._onCustomThemeChange}
value={this.state.customThemeUrl}
/>
<div className='error'>{this.state.customThemeError}</div>
<AccessibleButton
onClick={this._onAddCustomTheme}
type="submit" kind="primary_sm"
>{_t("Add theme")}</AccessibleButton>
</form>
);
}
return (
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_themeSection">
<span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
@ -380,6 +431,7 @@ export default class GeneralUserSettingsTab extends React.Component {
return <option key={theme} value={theme}>{text}</option>;
})}
</Field>
{customThemeForm}
<SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
</div>
);

View file

@ -379,6 +379,7 @@
"Multiple integration managers": "Multiple integration managers",
"Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
"Show a presence dot next to DMs in the room list": "Show a presence dot next to DMs in the room list",
"Support adding custom themes": "Support adding custom themes",
"Enable cross-signing to verify per-user instead of per-session (in development)": "Enable cross-signing to verify per-user instead of per-session (in development)",
"Enable local event indexing and E2EE search (requires restart)": "Enable local event indexing and E2EE search (requires restart)",
"Show info about bridges in room settings": "Show info about bridges in room settings",
@ -702,12 +703,16 @@
"Failed to change password. Is your password correct?": "Failed to change password. Is your password correct?",
"Success": "Success",
"Your password was successfully changed. You will not receive push notifications on other sessions until you log back in to them": "Your password was successfully changed. You will not receive push notifications on other sessions until you log back in to them",
"Invalid theme schema.": "Invalid theme schema.",
"Error downloading theme information.": "Error downloading theme information.",
"Profile": "Profile",
"Email addresses": "Email addresses",
"Phone numbers": "Phone numbers",
"Set a new account password...": "Set a new account password...",
"Account": "Account",
"Language and region": "Language and region",
"Custom theme URL": "Custom theme URL",
"Add theme": "Add theme",
"Theme": "Theme",
"Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.": "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.",
"Account management": "Account management",

View file

@ -134,6 +134,12 @@ export const SETTINGS = {
supportedLevels: LEVELS_FEATURE,
default: false,
},
"feature_custom_themes": {
isFeature: true,
displayName: _td("Support adding custom themes"),
supportedLevels: LEVELS_FEATURE,
default: false,
},
"mjolnirRooms": {
supportedLevels: ['account'],
default: [],