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

Add a ToggleSwitch and use it for SettingsFlag

Browse source 
Also bring in the compact timeline option.

Without minor CSS changes, the old user settings are completely unusable with this change. As such, minimal effort has been put in to have it be useful. Similarly, the changes drop the use of radio groups and the old theme selector was the only one that used it. See the comments for more details on how/why this was mitigated the way it was.
This commit is contained in:
Travis Ralston 2019-01-23 15:50:41 -07:00
parent 97666d39bc
commit 3f897468a6
10 changed files with 175 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/structures/UserSettings.js
View file

@ -637,11 +637,14 @@ module.exports = React.createClass({
// to rebind the onChange each time we render
const onChange = (e) =>
SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
// HACK: Lack of translations for themes header. We're removing this view in the very near future,
// and the header is really only there to maintain some semblance of the UX the section once was.
return (
<div>
<h3>{ _t("User Interface") }</h3>
<div className="mx_UserSettings_section">
{ SIMPLE_SETTINGS.map( this._renderAccountSetting ) }
<div><b>Themes</b></div>
{ THEMES.map( this._renderThemeOption ) }
<table>
<tbody>
@ -676,18 +679,12 @@ module.exports = React.createClass({
},
_renderThemeOption: function(setting) {
const SettingsFlag = sdk.getComponent("elements.SettingsFlag");
const onChange = (v) => dis.dispatch({action: 'set_theme', value: setting.value});
return (
<div className="mx_UserSettings_toggle" key={setting.id + '_' + setting.value}>
<SettingsFlag name="theme"
label={setting.label}
level={SettingLevel.ACCOUNT}
onChange={onChange}
group="theme"
value={setting.value} />
</div>
);
// HACK: Temporary disablement of theme selection.
// We don't support changing themes on experimental anyways, and radio groups aren't
// a thing anymore for setting flags. We're also dropping this view in the very near
// future, so just replace the theme selection with placeholder text.
const currentTheme = SettingsStore.getValue("theme");
return <div>{_t(setting.label)} {currentTheme === setting.value ? '(current)' : null}</div>;
},
_renderCryptoInfo: function() {