From 70ff9fa0ad3df3fb8a49decbf9d7743810ed18c4 Mon Sep 17 00:00:00 2001
From: MrKBear <mrkbear@qq.com>
Date: Fri, 20 May 2022 14:41:52 +0800
Subject: [PATCH] Add setting option

---
 source/Component/CommandBar/CommandBar.tsx    |  5 ---
 .../Component/SettingPopup/SettingPopup.scss  |  2 +
 .../Component/SettingPopup/SettingPopup.tsx   | 39 ++++++++++++++++++-
 source/Localization/EN-US.ts                  |  4 ++
 source/Localization/ZH-CN.ts                  |  4 ++
 5 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/source/Component/CommandBar/CommandBar.tsx b/source/Component/CommandBar/CommandBar.tsx
index cf2b39d..e32dac3 100644
--- a/source/Component/CommandBar/CommandBar.tsx
+++ b/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
diff --git a/source/Component/SettingPopup/SettingPopup.scss b/source/Component/SettingPopup/SettingPopup.scss
index f5165a4..ce3949b 100644
--- a/source/Component/SettingPopup/SettingPopup.scss
+++ b/source/Component/SettingPopup/SettingPopup.scss
@@ -3,4 +3,6 @@
 div.setting-popup {
 	width: 100%;
 	height: 100%;
+	box-sizing: border-box;
+	padding: 10px;
 }
\ No newline at end of file
diff --git a/source/Component/SettingPopup/SettingPopup.tsx b/source/Component/SettingPopup/SettingPopup.tsx
index 0730082..b8c607b 100644
--- a/source/Component/SettingPopup/SettingPopup.tsx
+++ b/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>
 	}
 }
 
diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts
index edd5f87..4fcbd3f 100644
--- a/source/Localization/EN-US.ts
+++ b/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})",
diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts
index cf32a73..fe00be8 100644
--- a/source/Localization/ZH-CN.ts
+++ b/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})",