From 8520310e6e3e97a554c737952d9649d0be53e2b4 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 28 Feb 2020 11:42:16 -0700 Subject: [PATCH] Proof of concept for custom theme adding For https://github.com/vector-im/riot-web/issues/12517 --- .../tabs/user/GeneralUserSettingsTab.js | 52 +++++++++++++++++++ src/i18n/strings/en_EN.json | 5 ++ src/settings/Settings.js | 6 +++ 3 files changed, 63 insertions(+) diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js index 304bb6449f..7af9aae146 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js @@ -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 (
@@ -368,6 +397,28 @@ export default class GeneralUserSettingsTab extends React.Component { />
; } + + let customThemeForm; + if (SettingsStore.isFeatureEnabled("feature_custom_themes")) { + customThemeForm = ( +
+ +
{this.state.customThemeError}
+ {_t("Add theme")} + + ); + } + return (
{_t("Theme")} @@ -380,6 +431,7 @@ export default class GeneralUserSettingsTab extends React.Component { return ; })} + {customThemeForm}
); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index ba48f7cd37..6984e21f06 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -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", diff --git a/src/settings/Settings.js b/src/settings/Settings.js index b77fb392e9..ba6df47a04 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -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: [],