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

[bugfix] Config Page: AdvancedSettings: Add save button to Entry components.

Browse Source 
Add error handlings.
This commit is contained in:
Sakamoto Shiina
2025-03-21 17:38:15 +09:00
parent cbd8a77eb6
commit b8ade54e85
11 changed files with 153 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx
View File

@@ -24,7 +24,7 @@ const _Entry = forwardRef((props, ref) => {
<div className={styles.entry_container}>
<div
className={input_wrapper_class_names}
style={{width: props.width }}
style={{width: props.width || "20rem" }}
>
<input
ref={inputRef}

32
src-ui/app/config_page/setting_section/setting_box/_components/entry_with_save_button/EntryWithSaveButton.jsx Normal file
View File

@@ -0,0 +1,32 @@
import styles from "./EntryWithSaveButton.module.scss";
import { _Entry } from "../_atoms/_entry/_Entry";
import CircularProgress from "@mui/material/CircularProgress";
import { useTranslation } from "react-i18next";
import { clsx } from "clsx";
export const EntryWithSaveButton = (props) => {
const { t } = useTranslation();
const onChangeFunction = (e) => {
props.onChangeFunction?.(e.target.value);
};
const saveFunction = () => {
props.saveFunction();
};
const is_disabled = props.state === "pending";
const save_button_class_names = clsx(styles.save_button, {
[styles.is_disabled]: is_disabled
});
return (
<div className={styles.container}>
<_Entry width={props.width} onChange={onChangeFunction} ui_variable={props.variable} is_disabled={is_disabled}/>
<button className={save_button_class_names} onClick={saveFunction}>
{is_disabled
? <CircularProgress size="1.4rem" sx={{ color: "var(--dark_basic_text_color)" }}/>
: <p className={styles.save_button_label}>{t("config_page.translation.deepl_auth_key.save")}</p>
}
</button>
</div>
);
};

30
src-ui/app/config_page/setting_section/setting_box/_components/entry_with_save_button/EntryWithSaveButton.module.scss Normal file
View File

@@ -0,0 +1,30 @@
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.save_button {
padding: 0.8rem 1.2rem;
background-color: var(--primary_600_color);
border-radius: 0.4rem;
text-align: center;
flex-shrink: 0;
min-width: 5.4rem;
&:hover {
background-color: var(--primary_500_color);
}
&:active {
background-color: var(--primary_700_color);
}
&.is_disabled {
pointer-events: none;
background-color: var(--primary_800_color);
}
}
.save_button_label {
font-size: 1.4rem;
}

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

@@ -3,6 +3,7 @@ export { ComputeDevice } from "./compute_device/ComputeDevice";
export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
export { Entry } from "./entry/Entry";
export { EntryWithSaveButton } from "./entry_with_save_button/EntryWithSaveButton";
export { HotkeysEntry } from "./hotkeys_entry/HotkeysEntry";
export { LabelComponent } from "./label_component/LabelComponent";
export { RadioButton } from "./radio_button/RadioButton";

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

@@ -8,6 +8,7 @@ import {
Slider,
SwitchBox,
Entry,
EntryWithSaveButton,
HotkeysEntry,
RadioButton,
OpenWebpage_DeeplAuthKey,
@@ -75,6 +76,9 @@ export const SwitchBoxContainer = (props) => (
export const EntryContainer = (props) => (
<CommonContainer Component={Entry} {...props} add_break_point={false} />
);
export const EntryWithSaveButtonContainer = (props) => (
<CommonContainer Component={EntryWithSaveButton} {...props} add_break_point={false} />
);
export const HotkeysEntryContainer = (props) => (
<CommonContainer Component={HotkeysEntry} {...props} />

57
src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx
View File

@@ -11,6 +11,7 @@ import {
import {
ActionButtonContainer,
EntryContainer,
EntryWithSaveButtonContainer,
} from "../_templates/Templates";
@@ -30,54 +31,58 @@ export const AdvancedSettings = () => {
const OscIpAddressContainer = () => {
const { t } = useTranslation();
const [ui_variable, setUiVariable] = useState("");
const { currentOscIpAddress, setOscIpAddress } = useOscIpAddress();
const onChangeFunction = (e) => {
const value = e.currentTarget.value;
if (value === "") {
setUiVariable("");
} else {
setUiVariable(value);
setOscIpAddress(value);
}
const [input_value, seInputValue] = useState(currentOscIpAddress.data);
const onChangeFunction = (value) => {
seInputValue(value);
};
const saveFunction = () => {
setOscIpAddress(input_value);
};
useEffect(()=> {
setUiVariable(currentOscIpAddress.data);
seInputValue(currentOscIpAddress.data);
}, [currentOscIpAddress]);
return (
<EntryContainer
<EntryWithSaveButtonContainer
label={t("config_page.advanced_settings.osc_ip_address.label")}
ui_variable={ui_variable}
onChange={onChangeFunction}
variable={input_value}
saveFunction={saveFunction}
onChangeFunction={onChangeFunction}
state={currentOscIpAddress.state}
width="14rem"
/>
);
};
const OscPortContainer = () => {
const { t } = useTranslation();
const [ui_variable, setUiVariable] = useState("");
const { currentOscPort, setOscPort } = useOscPort();
const onChangeFunction = (e) => {
const value = e.currentTarget.value;
if (value === "") {
setUiVariable("");
} else {
setUiVariable(value);
setOscPort(value);
}
const [input_value, seInputValue] = useState(currentOscPort.data);
const onChangeFunction = (value) => {
seInputValue(value);
};
const saveFunction = () => {
setOscPort(input_value);
};
useEffect(()=> {
setUiVariable(currentOscPort.data);
seInputValue(currentOscPort.data);
}, [currentOscPort]);
return (
<EntryContainer
<EntryWithSaveButtonContainer
label={t("config_page.advanced_settings.osc_port.label")}
ui_variable={ui_variable}
onChange={onChangeFunction}
variable={input_value}
saveFunction={saveFunction}
onChangeFunction={onChangeFunction}
state={currentOscPort.state}
width="10rem"
/>
);
};