Merge pull request 'Add setting option' (#55) from dev-mrkbear into master

Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/55

source/Component/CommandBar/CommandBar.tsx

@@ -188,11 +188,6 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
                         this.props.status ? this.props.status.newLabel() : undefined;
                     }}
                 />
-
-                <CommandButton
-                    iconName="Camera"
-                    i18NKey="Command.Bar.Camera.Info"
-                />
             </div>
             <div>
                 <CommandButton

source/Component/SettingPopup/SettingPopup.scss

@@ -3,4 +3,6 @@
 div.setting-popup {
 	width: 100%;
 	height: 100%;
+	box-sizing: border-box;
+	padding: 10px;
 }

source/Component/SettingPopup/SettingPopup.tsx

@@ -2,8 +2,11 @@ import { Component, ReactNode } from "react";
 import { Popup } from "@Context/Popups";
 import { Theme } from "@Component/Theme/Theme";
 import { Localization } from "@Component/Localization/Localization";
+import { useSettingWithEvent, IMixinSettingProps, Themes } from "@Context/Setting";
+import { ComboInput } from "@Input/ComboInput/ComboInput";
 import "./SettingPopup.scss";
 
+
 interface ISettingPopupProps {
 
 }
@@ -24,10 +27,42 @@ class SettingPopup extends Popup<ISettingPopupProps> {
 	}
 }
 
-class SettingPopupComponent extends Component<ISettingPopupProps> {
+@useSettingWithEvent("themes", "language")
+class SettingPopupComponent extends Component<ISettingPopupProps & IMixinSettingProps> {
 
 	public render(): ReactNode {
-		return <Theme className="setting-popup"></Theme>
+		return <Theme className="setting-popup">
+
+			<ComboInput
+				keyI18n="Language"
+				allOption={[
+					{ key: "EN_US", i18n: "EN_US" },
+					{ key: "ZH_CN", i18n: "ZH_CN" }
+				]}
+				value={{
+					key: this.props.setting?.language ?? "EN_US",
+					i18n: this.props.setting?.language ?? "EN_US"
+				}}
+				valueChange={(data) => {
+					this.props.setting?.setProps("language", data.key as any);
+				}}
+			/>
+
+			<ComboInput
+				keyI18n="Themes"
+				allOption={[
+					{ key: Themes.dark as any, i18n: "Themes.Dark" },
+					{ key: Themes.light as any, i18n: "Themes.Light" }
+				]}
+				value={{
+					key: this.props.setting?.themes ?? Themes.dark as any,
+					i18n: this.props.setting?.themes === Themes.dark ? "Themes.Dark" : "Themes.Light"
+				}}
+				valueChange={(data) => {
+					this.props.setting?.setProps("themes", parseInt(data.key));
+				}}
+			/>
+		</Theme>
 	}
 }
 

source/Localization/EN-US.ts

@@ -1,6 +1,10 @@
 const EN_US = {
+    "Language": "Language",
     "EN_US": "English (US)",
     "ZH_CN": "Chinese (Simplified)",
+    "Themes": "Themes",
+    "Themes.Dark": "Dark",
+    "Themes.Light": "Light",
     "Header.Bar.Title": "Living Together | Emulator",
     "Header.Bar.Title.Info": "Group Behavior Research Emulator",
     "Header.Bar.File.Name.Info": "{file} ({status})",

source/Localization/ZH-CN.ts

@@ -1,6 +1,10 @@
 const ZH_CN = {
+    "Language": "语言",
     "EN_US": "英语 (美国)",
     "ZH_CN": "中文 (简体)",
+    "Themes": "主题",
+    "Themes.Dark": "黑暗",
+    "Themes.Light": "亮色",
     "Header.Bar.Title": "群生共进 | 仿真器",
     "Header.Bar.Title.Info": "群体行为研究仿真器",
     "Header.Bar.File.Name.Info": "{file} ({status})",