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

[Refactor] Introduce MultiDropdownMenuContainer template for layout consistency.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-11-12 14:48:13 +09:00
parent 4a852374ab
commit d529ed8962
7 changed files with 72 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,8 +13,8 @@ export const DropdownMenu = (props) => {
export const MultiDropdownMenu = (props) => {
return (
<div className={styles.container}>
{props.settings.map((dropdown_props, index) => (
<DropdownMenu {...dropdown_props} />
{props.dropdown_settings.map((dropdown_props, index) => (
<DropdownMenu key={dropdown_props.dropdown_id} {...dropdown_props} />
))}
</div>
);

17
src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
View File

@@ -5,6 +5,7 @@ import { useStore_IsOpenedDropdownMenu, useStore_IsBreakPoint } from "@store";
import {
LabelComponent,
DropdownMenu,
MultiDropdownMenu,
Slider,
SwitchBox,
Entry,
@@ -42,6 +43,22 @@ export const DropdownMenuContainer = (props) => {
);
};
export const MultiDropdownMenuContainer = (props) => {
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const { currentIsBreakPoint } = useStore_IsBreakPoint();
const container_class = clsx(styles.container, {
[styles.is_break_point]: currentIsBreakPoint.data,
});
return (
<div className={container_class} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent label={props.label} desc={props.desc} />
<MultiDropdownMenu dropdown_settings={props.dropdown_settings} />
</div>
);
};
const TemplatesContainerWrapper = ({
children,
add_break_point = true,

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

@@ -90,7 +90,7 @@ const Mic_Container = () => {
/>
</div>
<MultiDropdownMenu
settings={[
dropdown_settings={[
{
dropdown_id: "mic_host",
secondary_label: t("config_page.device.label_host"),

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

@@ -11,6 +11,7 @@ import {
import {
WordFilterContainer,
DownloadModelsContainer,
MultiDropdownMenuContainer,
RadioButtonContainer,
DropdownMenuContainer,
SliderContainer,
@@ -282,8 +283,6 @@ const TranscriptionComputeDevice_Box = () => {
currentSelectedTranscriptionComputeType,
setSelectedTranscriptionComputeType,
} = useTranscription();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const { currentIsBreakPoint } = useStore_IsBreakPoint();
const list_for_ui = transformDeviceArray(currentSelectableTranscriptionComputeDeviceList.data);
@@ -365,22 +364,13 @@ const TranscriptionComputeDevice_Box = () => {
setSelectedTranscriptionComputeType(selected_data.selected_id);
};
const device_container_class = clsx(styles.device_container, {
[styles.is_break_point]: currentIsBreakPoint.data,
});
const is_disabled_selector = currentSelectedTranscriptionComputeDevice.state === "pending" || currentSelectedTranscriptionComputeType.state === "pending";
return (
<div className={styles.mic_container}>
<div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent
<MultiDropdownMenuContainer
label={t("config_page.transcription.transcription_compute_device.label")}
desc={t("config_page.common.compute_device.desc")}
/>
<div className={styles.device_contents}>
<MultiDropdownMenu
settings={[
dropdown_settings={[
{
secondary_label: t("config_page.common.compute_device.label_device"),
dropdown_id: "transcription_compute_device",
@@ -402,9 +392,6 @@ const TranscriptionComputeDevice_Box = () => {
}
]}
/>
</div>
</div>
</div>
);
};

33
src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
View File

@@ -86,36 +86,3 @@
padding-left: 2rem;
gap: 2rem;
}
.device_auto_select_wrapper {
display: flex;
flex-direction: column;
gap: 1.2rem;
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;
}

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

@@ -11,6 +11,7 @@ import {
import {
DownloadModelsContainer,
DeeplAuthKeyContainer,
MultiDropdownMenuContainer,
useOnMouseLeaveDropdownMenu,
} from "../_templates/Templates";
@@ -180,15 +181,10 @@ const TranslationComputeDevice_Box = () => {
const is_disabled_selector = currentSelectedTranslationComputeDevice.state === "pending" || currentSelectedTranslationComputeType.state === "pending";
return (
<div className={styles.mic_container}>
<div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent
<MultiDropdownMenuContainer
label={t("config_page.translation.translation_compute_device.label")}
desc={t("config_page.common.compute_device.desc")}
/>
<div className={styles.device_contents}>
<MultiDropdownMenu
settings={[
dropdown_settings={[
{
dropdown_id: "translation_compute_device",
secondary_label: t("config_page.common.compute_device.label_device"),
@@ -210,9 +206,6 @@ const TranslationComputeDevice_Box = () => {
}
]}
/>
</div>
</div>
</div>
);
};

48
src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.module.scss
View File

@@ -56,51 +56,3 @@
.threshold_section {
width: 100%;
}
.device_label {
font-size: 1.8rem;
}
.device_contents {
display: flex;
width: 100%;
justify-content: end;
padding-left: 2rem;
gap: 2rem;
}
.device_auto_select_wrapper {
display: flex;
flex-direction: column;
gap: 1.2rem;
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;
}