mirror of https://github.com/vector-im/riot-web
Proof of concept for custom theme adding
For https://github.com/vector-im/riot-web/issues/12517pull/21833/head
parent
a44d96bb77
commit
8520310e6e
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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: [],
|
||||
|
|
Loading…
Reference in New Issue