Merge pull request #3304 from matrix-org/t3chguy/un-hardcode-themes-in-settings

Consolidate Themes into ThemeController. Remove hardcoded themes in view

src/components/views/settings/tabs/user/GeneralUserSettingsTab.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2019 New Vector Ltd
 Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -26,6 +27,7 @@ import LanguageDropdown from "../../../elements/LanguageDropdown";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import DeactivateAccountDialog from "../../../dialogs/DeactivateAccountDialog";
 import PropTypes from "prop-types";
+import {THEMES} from "../../../../../themes";
 const PlatformPeg = require("../../../../../PlatformPeg");
 const MatrixClientPeg = require("../../../../../MatrixClientPeg");
 const sdk = require('../../../../..');
@@ -160,8 +162,9 @@ export default class GeneralUserSettingsTab extends React.Component {
                 <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
                 <Field id="theme" label={_t("Theme")} element="select"
                        value={this.state.theme} onChange={this._onThemeChange}>
-                    <option value="light">{_t("Light theme")}</option>
+                    {Object.entries(THEMES).map(([theme, text]) => {
-                    <option value="dark">{_t("Dark theme")}</option>
+                        return <option key={theme} value={theme}>{_t(text)}</option>;
+                    })}
                 </Field>
                 <SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
             </div>

src/i18n/strings/en_EN.json

@@ -251,6 +251,8 @@
     "%(widgetName)s widget modified by %(senderName)s": "%(widgetName)s widget modified by %(senderName)s",
     "%(widgetName)s widget added by %(senderName)s": "%(widgetName)s widget added by %(senderName)s",
     "%(widgetName)s widget removed by %(senderName)s": "%(widgetName)s widget removed by %(senderName)s",
+    "Light theme": "Light theme",
+    "Dark theme": "Dark theme",
     "%(displayName)s is typing …": "%(displayName)s is typing …",
     "%(names)s and %(count)s others are typing …|other": "%(names)s and %(count)s others are typing …",
     "%(names)s and %(count)s others are typing …|one": "%(names)s and one other is typing …",
@@ -548,8 +550,6 @@
     "Set a new account password...": "Set a new account password...",
     "Language and region": "Language and region",
     "Theme": "Theme",
-    "Light theme": "Light theme",
-    "Dark theme": "Dark theme",
     "Account management": "Account management",
     "Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!",
     "Deactivate Account": "Deactivate Account",

src/settings/controllers/ThemeController.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,17 +16,13 @@ limitations under the License.
 */
 
 import SettingController from "./SettingController";
-
+import {DEFAULT_THEME, THEMES} from "../../themes";
-const SUPPORTED_THEMES = [
-    "light",
-    "dark",
-];
 
 export default class ThemeController extends SettingController {
     getValueOverride(level, roomId, calculatedValue, calculatedAtLevel) {
         // Override in case some no longer supported theme is stored here
-        if (!SUPPORTED_THEMES.includes(calculatedValue)) {
+        if (!THEMES[calculatedValue]) {
-            return "light";
+            return DEFAULT_THEME;
         }
 
         return null; // no override

src/themes.js

@@ -0,0 +1,24 @@
+/*
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+
+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 {_td} from "./languageHandler";
+
+export const DEFAULT_THEME = "light";
+
+export const THEMES = {
+    "light": _td("Light theme"),
+    "dark": _td("Dark theme"),
+};