Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into rxl881/invertOutlineColour

src/components/views/elements/LanguageDropdown.js

@@ -18,8 +18,8 @@ limitations under the License.
 import React from 'react';
 
 import sdk from '../../../index';
-import UserSettingsStore from '../../../UserSettingsStore';
 import * as languageHandler from '../../../languageHandler';
+import SettingsStore from "../../../settings/SettingsStore";
 
 function languageMatchesSearchQuery(query, language) {
     if (language.label.toUpperCase().indexOf(query.toUpperCase()) == 0) return true;
@@ -54,9 +54,9 @@ export default class LanguageDropdown extends React.Component {
             // If no value is given, we start with the first
             // country selected, but our parent component
             // doesn't know this, therefore we do this.
-            const _localSettings = UserSettingsStore.getLocalSettings();
-            if (_localSettings.hasOwnProperty('language')) {
-              this.props.onOptionChange(_localSettings.language);
+            const language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
+            if (language) {
+              this.props.onOptionChange(language);
             }else {
               const language = languageHandler.normalizeLanguageKey(languageHandler.getLanguageFromBrowser());
               this.props.onOptionChange(language);
@@ -95,12 +95,12 @@ export default class LanguageDropdown extends React.Component {
 
         // default value here too, otherwise we need to handle null / undefined
         // values between mounting and the initial value propgating
+        let language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
         let value = null;
-        const _localSettings = UserSettingsStore.getLocalSettings();
-        if (_localSettings.hasOwnProperty('language')) {
-          value = this.props.value || _localSettings.language;
+        if (language) {
+          value = this.props.value || language;
         } else {
-          const language = navigator.language || navigator.userLanguage;
+          language = navigator.language || navigator.userLanguage;
           value = this.props.value || language;
         }
 

src/components/views/elements/SettingsFlag.js

@@ -0,0 +1,110 @@
+/*
+Copyright 2017 Travis Ralston
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import SettingsStore from "../../../settings/SettingsStore";
+import { _t } from '../../../languageHandler';
+
+module.exports = React.createClass({
+    displayName: 'SettingsFlag',
+    propTypes: {
+        name: React.PropTypes.string.isRequired,
+        level: React.PropTypes.string.isRequired,
+        roomId: React.PropTypes.string, // for per-room settings
+        label: React.PropTypes.string, // untranslated
+        onChange: React.PropTypes.func,
+        isExplicit: React.PropTypes.bool,
+        manualSave: React.PropTypes.bool,
+
+        // If group is supplied, then this will create a radio button instead.
+        group: React.PropTypes.string,
+        value: React.PropTypes.any, // the value for the radio button
+    },
+
+    getInitialState: function() {
+        return {
+            value: SettingsStore.getValueAt(
+                this.props.level,
+                this.props.name,
+                this.props.roomId,
+                this.props.isExplicit,
+            ),
+        };
+    },
+
+    onChange: function(e) {
+        if (this.props.group && !e.target.checked) return;
+
+        const newState = this.props.group ? this.props.value : e.target.checked;
+        if (!this.props.manualSave) this.save(newState);
+        else this.setState({ value: newState });
+        if (this.props.onChange) this.props.onChange(newState);
+    },
+
+    save: function(val = undefined) {
+        return SettingsStore.setValue(
+            this.props.name,
+            this.props.roomId,
+            this.props.level,
+            val !== undefined ? val : this.state.value,
+        );
+    },
+
+    render: function() {
+        const value = this.props.manualSave ? this.state.value : SettingsStore.getValueAt(
+            this.props.level,
+            this.props.name,
+            this.props.roomId,
+            this.props.isExplicit,
+        );
+
+        const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);
+
+        let label = this.props.label;
+        if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level);
+        else label = _t(label);
+
+        // We generate a relatively complex ID to avoid conflicts
+        const id = this.props.name + "_" + this.props.group + "_" + this.props.value + "_" + this.props.level;
+        let checkbox = (
+            <input id={id}
+                   type="checkbox"
+                   defaultChecked={value}
+                   onChange={this.onChange}
+                   disabled={!canChange}
+            />
+        );
+        if (this.props.group) {
+            checkbox = (
+                <input id={id}
+                       type="radio"
+                       name={this.props.group}
+                       value={this.props.value}
+                       checked={value === this.props.value}
+                       onChange={this.onChange}
+                       disabled={!canChange}
+                />
+            );
+        }
+
+        return (
+            <label>
+                { checkbox }
+                { label }
+            </label>
+        );
+    },
+});