From eb38d6a2b1ca2e0e5fa92d0f88f2ef9dbb2e1efe Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 5 Aug 2024 11:56:17 +0900
Subject: [PATCH] [Update] Config Window: Add MessageFormat component.

---
 src-ui/assets/swap_icon.png                   | Bin 0 -> 13436 bytes
 .../setting_box/appearance/Appearance.jsx     |   5 ++
 .../components/_atoms/_Entry.module.scss      |   4 +
 .../message_format/MessageFormat.jsx          |  76 ++++++++++++++++++
 .../message_format/MessageFormat.module.scss  |  65 +++++++++++++++
 .../setting_box/components/useSettingBox.jsx  |  17 ++++
 .../components/useSettingBox.module.scss      |  12 +++
 7 files changed, 179 insertions(+)
 create mode 100644 src-ui/assets/swap_icon.png
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx
 create mode 100644 src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.module.scss

diff --git a/src-ui/assets/swap_icon.png b/src-ui/assets/swap_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8fa1cf53c36f363dba00584efa18318ff8c74c57
GIT binary patch
literal 13436
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
OL5vjv-lfaghyM>Eb8cV&

literal 0
HcmV?d00001

diff --git a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
index da04e718..3e80ea3b 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
@@ -15,6 +15,7 @@ export const Appearance = () => {
         ThresholdContainer,
         RadioButtonContainer,
         DeeplAuthKeyContainer,
+        MessageFormatContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -44,6 +45,10 @@ export const Appearance = () => {
             <ThresholdContainer label="Transparent" desc="description" id="mic_threshold"  min="0" max="3000"/>
 
             <DeeplAuthKeyContainer label={t(`config_window.deepl_auth_key.label`)} desc={t(`config_window.deepl_auth_key.desc`)}/>
+
+            <MessageFormatContainer label={t(`config_window.send_message_format.label`)} desc={t(`config_window.send_message_format.desc`)}/>
+
+            <MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} with_t={true}/>
         </>
     );
 };
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.module.scss
index 9ffa70c2..dc2ac749 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.module.scss
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.module.scss
@@ -1,3 +1,7 @@
+.entry_container {
+    width: 100%;
+}
+
 .entry_wrapper {
     width: 10rem;
     height: 100%;
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx
new file mode 100644
index 00000000..defc9e22
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx
@@ -0,0 +1,76 @@
+import styles from "./MessageFormat.module.scss";
+import { useTranslation } from "react-i18next";
+
+export const MessageFormat = (props) => {
+
+    return (
+        <div className={styles.container}>
+            <ExampleComponent {...props}/>
+            <InputComponent {...props}/>
+            {
+                props.with_t
+                ? <SwapButton/>
+                : null
+            }
+        </div>
+    );
+};
+
+const ExampleComponent = (props) => {
+    const { t } = useTranslation();
+
+    const createExampleMessage = () => {
+        return t("config_window.send_message_format.example_text");
+    };
+
+    return (
+        <div className={styles.example_container}>
+            <p className={styles.example_text}>{createExampleMessage()}</p>
+        </div>
+    );
+};
+
+
+import { _Entry } from "../_atoms/_Entry";
+const InputComponent = (props) => {
+    const { t } = useTranslation();
+
+    const onChangeInput = (e) => {
+        console.log(e.target.value);
+    };
+
+    return (
+        <div className={styles.input_wrapper}>
+            <_Entry width="100%" onChange={onChangeInput} />
+            <p className={styles.preset_text}>[message]</p>
+            <_Entry width="100%" onChange={onChangeInput} />
+            {
+                props.with_t
+                ? (<>
+                    <p className={styles.preset_text}>[translation]</p>
+                    <_Entry width="100%" onChange={onChangeInput} />
+                    </>)
+                : null
+            }
+        </div>
+    );
+};
+
+
+import SwapImg from "@images/swap_icon.png";
+const SwapButton = () => {
+    const swapMessageAndTranslate = () => {
+
+    };
+
+    return (
+        <div className={styles.swap_button_container}>
+            <div className={styles.swap_button_wrapper} onClick={swapMessageAndTranslate}>
+                <p className={styles.swap_text}>[message]</p>
+                <img className={styles.swap_img} src={SwapImg} />
+                <p className={styles.swap_text}>[translate]</p>
+            </div>
+        </div>
+
+    );
+};
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.module.scss
new file mode 100644
index 00000000..823b5a72
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.module.scss
@@ -0,0 +1,65 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    gap: 1.6rem;
+}
+
+.example_container {
+    padding: 1rem;
+    background-color: #3A4554;
+    border-radius: 1.4rem;
+    max-width: 30rem;
+    text-align: center;
+}
+
+.example_text {
+    font-size: 1.4rem;
+}
+
+.input_wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.preset_text {
+    font-size: 1.6rem;
+    width: 100%;
+    text-align: center;
+}
+
+
+.swap_button_container {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+}
+
+.swap_button_wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 0.6rem 1.2rem;
+    border-radius: 0.4rem;
+    background-color: var(--dark_850_color);
+    cursor: pointer;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.swap_text {
+    font-size: 1.4rem;
+}
+
+.swap_img {
+    width: 2rem;
+}
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
index 61e6e56a..6f78efcd 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
@@ -1,5 +1,6 @@
 import styles from "./useSettingBox.module.scss";
 import { useIsOpenedDropdownMenu } from "@store";
+import clsx from "clsx";
 
 import { LabelComponent } from "./label_component/LabelComponent";
 import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
@@ -10,6 +11,7 @@ import { Entry } from "./entry/Entry";
 import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
 import { RadioButton } from "./radio_button/RadioButton";
 import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
+import { MessageFormat } from "./message_format/MessageFormat";
 
 export const useSettingBox = () => {
     const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -98,6 +100,20 @@ export const useSettingBox = () => {
         );
     };
 
+
+    const MessageFormatContainer = (props) => {
+        return (
+            <div className={clsx(styles.container, styles.flex_column)}>
+                <div className={styles.label_only_section}>
+                    <LabelComponent label={props.label} desc={props.desc} />
+                </div>
+                <div className={styles.message_format_section}>
+                    <MessageFormat {...props}/>
+                </div>
+            </div>
+        );
+    };
+
     return {
         DropdownMenuContainer,
         SliderContainer,
@@ -107,5 +123,6 @@ export const useSettingBox = () => {
         ThresholdContainer,
         RadioButtonContainer,
         DeeplAuthKeyContainer,
+        MessageFormatContainer,
     };
 };
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss
index 9ab576b6..657e71d3 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss
@@ -8,6 +8,14 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 2rem;
+    &.flex_column {
+        flex-direction: column;
+    }
+}
+
+.label_only_section {
+    width: 100%;
 }
 
 .threshold_container {
@@ -39,4 +47,8 @@
     justify-content: space-between;
     align-items: center;
     gap: 1.4rem;
+}
+
+.message_format_section {
+    width: 100%;
 }
\ No newline at end of file