From f6eaf84f856c0dd9c2a870b108f35670bb5afec6 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 11 Sep 2024 19:02:44 +0900
Subject: [PATCH] [Update/bugfix] Config Page: Device Tab. Mic host/device
 section. Put together mic host and device settings in one section. Fix
 dropdown menu contents width and position. and add padding right for
 preventing text to cover svg arrow.

---
 .../components/dropdown_menu/DropdownMenu.jsx |  2 +-
 .../dropdown_menu/DropdownMenu.module.scss    |  4 +-
 .../setting_box/components/useSettingBox.jsx  |  3 -
 .../components/useSettingBox.module.scss      |  1 -
 .../setting_box/device/Device.jsx             | 96 +++++++++++++------
 .../setting_box/device/Device.module.scss     | 24 +++++
 6 files changed, 95 insertions(+), 35 deletions(-)
 create mode 100644 src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss

diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
index 4194fc15..86f811fd 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
@@ -43,7 +43,7 @@ export const DropdownMenu = (props) => {
 
     return (
         <div className={styles.container}>
-            <div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu}>
+            <div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu} style={props.style}>
                 {(props.state === "loading")
                     ? <p className={styles.dropdown_selected_text}>Loading...</p>
                     : <p className={styles.dropdown_selected_text}>{getSelectedText()}</p>
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
index b47b3bac..117f6b2c 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
@@ -24,14 +24,16 @@
 
 .dropdown_selected_text {
     font-size: 1.4rem;
+    padding-right: 2.8rem;
 }
 
 .dropdown_content_wrapper {
     display: none;
     position: absolute;
     top: 100%; // Position it below the toggle button
-    left: 0;
+    right: 0;
     width: 100%;
+    min-width: 20rem;
     z-index: 1;
     &.is_opened {
         display: block;
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
index 03df067f..3d26af83 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
@@ -54,9 +54,6 @@ export const ThresholdContainer = (props) => {
 
 
 export const useSettingBox = () => {
-    console.log("useSettingBox______________");
-
-
     const SliderContainer = (props) => {
         return (
             <div className={styles.container}>
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
index 6740a057..61b35bf9 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
@@ -4,7 +4,6 @@
     justify-content: space-between;
     align-items: center;
     padding: 2rem;
-    display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 2rem;
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
index 0354f438..a0d03cae 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import styles from "./Device.module.scss";
 import {
     DropdownMenuContainer,
     ThresholdContainer,
@@ -8,7 +9,7 @@ export const Device = () => {
     return (
         <>
             <DropdownMenuContainer_MicHost />
-            <DropdownMenuContainer_MicDevice />
+            {/* <DropdownMenuContainer_MicDevice /> */}
             <ThresholdContainer_Mic />
             <DropdownMenuContainer_SpeakerDevice />
             <ThresholdContainer_Speaker />
@@ -18,53 +19,90 @@ export const Device = () => {
 
 import { useMicHostList } from "@logics_configs/useMicHostList";
 import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+
+import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+
+import { LabelComponent } from "../components/label_component/LabelComponent";
+import { DropdownMenu } from "../components/dropdown_menu/DropdownMenu";
+
 const DropdownMenuContainer_MicHost = () => {
     const { t } = useTranslation();
     const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
     const { currentMicHostList, getMicHostList } = useMicHostList();
 
-    const selectFunction = (selected_data) => {
+    const selectFunction_host = (selected_data) => {
         setSelectedMicHost(selected_data.selected_id);
     };
 
-    return (
-        <DropdownMenuContainer
-            dropdown_id="mic_host"
-            label={t("config_page.mic_host.label")}
-            selected_id={currentSelectedMicHost.data}
-            list={currentMicHostList.data}
-            selectFunction={selectFunction}
-            openListFunction={getMicHostList}
-            state={currentSelectedMicHost.state}
-        />
-    );
-};
-
-import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
-import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
-const DropdownMenuContainer_MicDevice = () => {
-    const { t } = useTranslation();
     const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
     const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
 
-    const selectFunction = (selected_data) => {
+    const selectFunction_device = (selected_data) => {
         setSelectedMicDevice(selected_data.selected_id);
     };
 
 
     return (
-        <DropdownMenuContainer
-            dropdown_id="mic_device"
-            label={t("config_page.mic_device.label")}
-            selected_id={currentSelectedMicDevice.data}
-            list={currentMicDeviceList.data}
-            selectFunction={selectFunction}
-            openListFunction={getMicDeviceList}
-            state={currentSelectedMicDevice.state}
-        />
+        <div className={styles.device_container}>
+            <LabelComponent label={t("config_page.mic_host.label")} />
+
+            <div className={styles.device_contents}>
+                <div className={styles.device_dropdown_wrapper}>
+                    <p className={styles.device_dropdown_label}>Host/Driver</p>
+                    <DropdownMenu
+                        dropdown_id="mic_host"
+                        selected_id={currentSelectedMicHost.data}
+                        list={currentMicHostList.data}
+                        selectFunction={selectFunction_host}
+                        openListFunction={getMicHostList}
+                        state={currentSelectedMicHost.state}
+                        style={{ maxWidth: "20rem", minWidth: "10rem" }}
+                    />
+                </div>
+
+                <div className={styles.device_dropdown_wrapper}>
+                    <p className={styles.device_dropdown_label}>Device</p>
+                    <DropdownMenu
+                        dropdown_id="mic_device"
+                        label={t("config_page.mic_device.label")}
+                        selected_id={currentSelectedMicDevice.data}
+                        list={currentMicDeviceList.data}
+                        selectFunction={selectFunction_device}
+                        openListFunction={getMicDeviceList}
+                        state={currentSelectedMicDevice.state}
+                    />
+                </div>
+            </div>
+        </div>
     );
 };
 
+// import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+// import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+// const DropdownMenuContainer_MicDevice = () => {
+//     const { t } = useTranslation();
+//     const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
+//     const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
+
+//     const selectFunction = (selected_data) => {
+//         setSelectedMicDevice(selected_data.selected_id);
+//     };
+
+
+//     return (
+//         <DropdownMenuContainer
+//             dropdown_id="mic_device"
+//             label={t("config_page.mic_device.label")}
+//             selected_id={currentSelectedMicDevice.data}
+//             list={currentMicDeviceList.data}
+//             selectFunction={selectFunction}
+//             openListFunction={getMicDeviceList}
+//             state={currentSelectedMicDevice.state}
+//         />
+//     );
+// };
+
 import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
 import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
 const DropdownMenuContainer_SpeakerDevice = () => {
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
new file mode 100644
index 00000000..ac5e7bb1
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
@@ -0,0 +1,24 @@
+.device_container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.device_contents {
+    display: flex;
+    gap: 2.8rem;
+}
+
+.device_dropdown_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.device_dropdown_label {
+    font-size: 1.4rem;
+}
\ No newline at end of file