Bring in theme and language options

pull/21833/head
Travis Ralston 2019-01-23 14:43:45 -07:00
parent d55d145223
commit 97666d39bc
3 changed files with 53 additions and 7 deletions

View File

@ -64,7 +64,7 @@ limitations under the License.
.mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label,
.mx_Field select:focus + label {
.mx_Field select + label /* Always show a select's label on top to not collide with the value */ {
transition:
font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s,

View File

@ -14,11 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_GeneralSettingsTab_changePassword {
.mx_GeneralSettingsTab_changePassword,
.mx_GeneralSettingsTab_themeSection {
display: block;
}
.mx_GeneralSettingsTab_changePassword .mx_Field {
.mx_GeneralSettingsTab_changePassword .mx_Field,
.mx_GeneralSettingsTab_themeSection .mx_Field {
display: block;
margin-right: 100px; // Align with the other fields on the page
}
@ -32,6 +34,13 @@ limitations under the License.
margin-top: 0;
}
.mx_GeneralSettingsTab_accountSection > .mx_EmailAddresses {
.mx_GeneralSettingsTab_themeSection .mx_Field select {
display: block;
width: 100%;
}
.mx_GeneralSettingsTab_accountSection > .mx_EmailAddresses,
.mx_GeneralSettingsTab_accountSection > .mx_PhoneNumbers,
.mx_GeneralSettingsTab_languageInput {
margin-right: 100px; // Align with the other fields on the page
}

View File

@ -24,8 +24,15 @@ import { DragDropContext } from 'react-beautiful-dnd';
import ProfileSettings from "../ProfileSettings";
import EmailAddresses from "../EmailAddresses";
import PhoneNumbers from "../PhoneNumbers";
import Field from "../../elements/Field";
import * as languageHandler from "../../../../languageHandler";
import {SettingLevel} from "../../../../settings/SettingsStore";
import SettingsStore from "../../../../settings/SettingsStore";
import LanguageDropdown from "../../elements/LanguageDropdown";
const PlatformPeg = require("../../../../PlatformPeg");
const sdk = require('../../../../index');
const Modal = require("../../../../Modal");
const dis = require("../../../../dispatcher");
export default class GeneralSettingsTab extends React.Component {
static childContextTypes = {
@ -34,6 +41,11 @@ export default class GeneralSettingsTab extends React.Component {
constructor() {
super();
this.state = {
language: languageHandler.getCurrentLanguage(),
theme: SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme"),
};
}
getChildContext() {
@ -42,6 +54,22 @@ export default class GeneralSettingsTab extends React.Component {
};
}
_onLanguageChange = (newLanguage) => {
if (this.state.language === newLanguage) return;
SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLanguage);
this.setState({language: newLanguage});
PlatformPeg.get().reload();
};
_onThemeChange = (e) => {
const newTheme = e.target.value;
if (this.state.theme === newTheme) return;
SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme);
dis.dispatch({action: 'set_theme', value: newTheme});
};
_onPasswordChangeError = (err) => {
// TODO: Figure out a design that doesn't involve replacing the current dialog
let errMsg = err.error || "";
@ -114,19 +142,28 @@ export default class GeneralSettingsTab extends React.Component {
}
_renderLanguageSection() {
// TODO: Convert to new-styled Field
return (
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Language and region")}</span>
<p>LANGUAGE SECTION</p>
<LanguageDropdown className="mx_GeneralSettingsTab_languageInput"
onOptionChange={this._onLanguageChange} value={this.state.language}/>
</div>
);
}
_renderThemeSection() {
// TODO: Re-enable theme selection once the themes actually work
return (
<div className="mx_SettingsTab_section">
<div className="mx_SettingsTab_section mx_GeneralSettingsTab_themeSection">
<span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
<p>THEME SECTION</p>
<Field id="theme" label={_t("Theme")} element="select" disabled={true}
value={this.state.theme} onChange={this._onThemeChange}>
<option value="light">{_t("Light theme")}</option>
<option value="dark">{_t("Dark theme")}</option>
<option value="dharma">{_t("2018 theme")}</option>
<option value="status">{_t("Status.im theme")}</option>
</Field>
</div>
);
}