every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Refactor]: Introduce MultiDropdownMenu component for layout consistency.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-11-12 12:32:18 +09:00
parent 01327fa852
commit 4a852374ab
7 changed files with 119 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
View File

@@ -3,8 +3,19 @@ import { _DropdownMenu } from "../_atoms/_dropdown_menu/_DropdownMenu";
export const DropdownMenu = (props) => {
return (
<div className={styles.container}>
<div className={styles.each_dropdown_menu_wrapper}>
{props.secondary_label && <p className={styles.secondary_label}>{props.secondary_label}</p>}
<_DropdownMenu {...props} />
</div>
);
};
export const MultiDropdownMenu = (props) => {
return (
<div className={styles.container}>
{props.settings.map((dropdown_props, index) => (
<DropdownMenu {...dropdown_props} />
))}
</div>
);
};

27
src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
View File

@@ -1,5 +1,26 @@
@import "@scss_mixins";
// .container {
// position: relative;
// }
.container {
display: flex;
flex-direction: row;
gap: 2.8rem;
}
.each_dropdown_menu_wrapper {
display: flex;
flex-direction: column;
gap: 0.6rem;
white-space: nowrap;
max-width: 24rem;
&.is_disabled {
pointer-events: none;
}
}
.secondary_label {
padding-left: 0.2rem;
padding-right: 0.4rem;
font-size: 1.4rem;
color: var(--dark_500_color);
white-space: nowrap;
}

2
src-ui/views/app/config_page/setting_section/setting_box/_components/index.js
View File

@@ -1,7 +1,7 @@
export { ActionButton } from "./action_button/ActionButton";
export { ComputeDevice } from "./compute_device/ComputeDevice";
export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
export { DropdownMenu, MultiDropdownMenu } from "./dropdown_menu/DropdownMenu";
export { Entry } from "./entry/Entry";
export { EntryWithSaveButton } from "./entry_with_save_button/EntryWithSaveButton";
export { HotkeysEntry } from "./hotkeys_entry/HotkeysEntry";

54
src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
View File

@@ -14,6 +14,7 @@ import {
import {
LabelComponent,
DropdownMenu,
MultiDropdownMenu,
ThresholdComponent,
SwitchBox,
} from "../_components";
@@ -88,34 +89,30 @@ const Mic_Container = () => {
toggleFunction={toggleEnableAutoMicSelect}
/>
</div>
<div className={styles.device_dropdown_wrapper}>
<div className={styles.device_dropdown}>
<p className={styles.device_secondary_label}>{t("config_page.device.label_host")}</p>
<DropdownMenu
dropdown_id="mic_host"
selected_id={currentSelectedMicHost.data}
list={currentMicHostList.data}
selectFunction={selectFunction_host}
state={currentSelectedMicHost.state}
style={{ maxWidth: "20rem", minWidth: "10rem" }}
is_disabled={is_disabled_selector}
<MultiDropdownMenu
settings={[
{
dropdown_id: "mic_host",
secondary_label: t("config_page.device.label_host"),
selected_id: currentSelectedMicHost.data,
list: currentMicHostList.data,
selectFunction: selectFunction_host,
state: currentSelectedMicHost.state,
style: { maxWidth: "20rem", minWidth: "10rem" },
is_disabled: is_disabled_selector,
},
{
dropdown_id: "mic_device",
secondary_label: t("config_page.device.label_device"),
selected_id: currentSelectedMicDevice.data,
list: currentMicDeviceList.data,
selectFunction: selectFunction_device,
state: currentSelectedMicDevice.state,
is_disabled: is_disabled_selector,
}
]}
/>
</div>
<div className={styles.device_dropdown}>
<p className={styles.device_secondary_label}>{t("config_page.device.label_device")}</p>
<DropdownMenu
dropdown_id="mic_device"
selected_id={currentSelectedMicDevice.data}
list={currentMicDeviceList.data}
selectFunction={selectFunction_device}
state={currentSelectedMicDevice.state}
is_disabled={is_disabled_selector}
/>
</div>
</div>
</div>
</div>
<div className={styles.threshold_container}>
<div className={styles.threshold_switch_section}>
@@ -189,11 +186,9 @@ const Speaker_Container = () => {
toggleFunction={toggleEnableAutoSpeakerSelect}
/>
</div>
<div className={styles.device_dropdown}>
<p className={styles.device_secondary_label}>{t("config_page.device.label_device")}</p>
<DropdownMenu
dropdown_id="speaker_device"
secondary_label={t("config_page.device.label_device")}
label={t("config_page.device.speaker_device.label")}
selected_id={currentSelectedSpeakerDevice.data}
list={currentSpeakerDeviceList.data}
@@ -203,7 +198,6 @@ const Speaker_Container = () => {
/>
</div>
</div>
</div>
<div className={styles.threshold_container}>
<div className={styles.threshold_switch_section}>
<LabelComponent {...getLabels()}/>

25
src-ui/views/app/config_page/setting_section/setting_box/device/Device.module.scss
View File

@@ -78,28 +78,3 @@
justify-content: center;
align-items: center;
}
.device_dropdown_wrapper {
display: flex;
flex-direction: row;
gap: 2.8rem;
}
.device_dropdown {
display: flex;
flex-direction: column;
gap: 0.6rem;
white-space: nowrap;
max-width: 24rem;
&.is_disabled {
pointer-events: none;
}
}
.device_secondary_label {
padding-left: 0.2rem;
padding-right: 0.4rem;
font-size: 1.4rem;
color: var(--dark_500_color);
white-space: nowrap;
}

49
src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
View File

@@ -20,6 +20,7 @@ import {
import {
DropdownMenu,
MultiDropdownMenu,
LabelComponent,
SectionLabelComponent,
} from "../_components";
@@ -378,34 +379,30 @@ const TranscriptionComputeDevice_Box = () => {
desc={t("config_page.common.compute_device.desc")}
/>
<div className={styles.device_contents}>
<div className={styles.device_dropdown_wrapper}>
<div className={styles.device_dropdown}>
<p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_device")}</p>
<DropdownMenu
dropdown_id="transcription_compute_device"
selected_id={target_index}
list={list_for_ui}
selectFunction={selectFunction_ComputeDevice}
state={currentSelectedTranscriptionComputeDevice.state}
style={{ maxWidth: "20rem", minWidth: "10rem" }}
is_disabled={is_disabled_selector}
<MultiDropdownMenu
settings={[
{
secondary_label: t("config_page.common.compute_device.label_device"),
dropdown_id: "transcription_compute_device",
selected_id: target_index,
list: list_for_ui,
selectFunction: selectFunction_ComputeDevice,
state: currentSelectedTranscriptionComputeDevice.state,
style: { maxWidth: "20rem", minWidth: "10rem" },
is_disabled: is_disabled_selector,
},
{
secondary_label: t("config_page.common.compute_device.label_type"),
dropdown_id: "transcription_compute_type",
selected_id: currentSelectedTranscriptionComputeType.data,
list: new_compute_types_labels,
selectFunction: selectFunction_ComputeType,
state: currentSelectedTranscriptionComputeType.state,
is_disabled: is_disabled_selector,
}
]}
/>
</div>
<div className={styles.device_dropdown}>
<p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_type")}</p>
<DropdownMenu
dropdown_id="transcription_compute_type"
selected_id={currentSelectedTranscriptionComputeType.data}
list={new_compute_types_labels}
selectFunction={selectFunction_ComputeType}
state={currentSelectedTranscriptionComputeType.state}
is_disabled={is_disabled_selector}
/>
</div>
</div>
</div>
</div>
</div>
);

49
src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
View File

@@ -17,6 +17,7 @@ import {
import {
DropdownMenu,
MultiDropdownMenu,
LabelComponent,
} from "../_components";
@@ -186,34 +187,30 @@ const TranslationComputeDevice_Box = () => {
desc={t("config_page.common.compute_device.desc")}
/>
<div className={styles.device_contents}>
<div className={styles.device_dropdown_wrapper}>
<div className={styles.device_dropdown}>
<p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_device")}</p>
<DropdownMenu
dropdown_id="translation_compute_device"
selected_id={target_index}
list={list_for_ui}
selectFunction={selectFunction_ComputeDevice}
state={currentSelectedTranslationComputeDevice.state}
style={{ maxWidth: "20rem", minWidth: "10rem" }}
is_disabled={is_disabled_selector}
<MultiDropdownMenu
settings={[
{
dropdown_id: "translation_compute_device",
secondary_label: t("config_page.common.compute_device.label_device"),
selected_id: target_index,
list: list_for_ui,
selectFunction: selectFunction_ComputeDevice,
state: currentSelectedTranslationComputeDevice.state,
style: { maxWidth: "20rem", minWidth: "10rem" },
is_disabled: is_disabled_selector,
},
{
dropdown_id: "translation_compute_type",
secondary_label: t("config_page.common.compute_device.label_type"),
selected_id: currentSelectedTranslationComputeType.data,
list: new_compute_types_labels,
selectFunction: selectFunction_ComputeType,
state: currentSelectedTranslationComputeType.state,
is_disabled: is_disabled_selector,
}
]}
/>
</div>
<div className={styles.device_dropdown}>
<p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_type")}</p>
<DropdownMenu
dropdown_id="translation_compute_type"
selected_id={currentSelectedTranslationComputeType.data}
list={new_compute_types_labels}
selectFunction={selectFunction_ComputeType}
state={currentSelectedTranslationComputeType.state}
is_disabled={is_disabled_selector}
/>
</div>
</div>
</div>
</div>
</div>
);