mirror of https://github.com/vector-im/riot-web
Bring in theme and language options
parent
d55d145223
commit
97666d39bc
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue