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

[Update] Config Window: Add Entry component.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-08-02 10:33:29 +09:00
parent 112ace95d7
commit ef94d755c6
5 changed files with 54 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
View File

@@ -8,6 +8,7 @@ export const Appearance = () => {
SliderContainer,
CheckboxContainer,
SwitchboxContainer,
EntryContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -29,6 +30,8 @@ export const Appearance = () => {
<SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
<CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
<SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
<EntryContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
</>
);
};

3
src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -8,6 +8,7 @@ export const Appearance = () => {
SliderContainer,
CheckboxContainer,
SwitchboxContainer,
EntryContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -29,6 +30,8 @@ export const Appearance = () => {
<SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
<CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
<SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
<EntryContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
</>
);
};

22
src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.jsx Normal file
View File

@@ -0,0 +1,22 @@
import { useState } from "react";
import styles from "./Entry.module.scss";
export const Entry = (props) => {
const [input_value, setInputValue] = useState();
const onChangeFunction = (e) => {
setInputValue(e.currentTarget.value);
};
return (
<div className={styles.entry_container}>
<div className={styles.entry_wrapper}>
<input
className={styles.entry_input_area}
onChange={onChangeFunction}
/>
</div>
</div>
);
};

15
src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.module.scss Normal file
View File

@@ -0,0 +1,15 @@
.entry_wrapper {
width: 10rem;
height: 100%;
padding: 0.6rem;
background-color: var(--dark_875_color);
border: 0.1rem solid var(--dark_750_color);
border-radius: 0.4rem;
}
.entry_input_area {
width: 100%;
height: 100%;
font-size: 1.4rem;
resize: none;
}

11
src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
View File

@@ -4,6 +4,7 @@ import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
import { Slider } from "./slider/Slider";
import { Checkbox } from "./checkbox/Checkbox";
import { Switchbox } from "./switchbox/Switchbox";
import { Entry } from "./entry/Entry";
import { useIsOpenedDropdownMenu } from "@store";
export const useSettingBox = () => {
@@ -49,10 +50,20 @@ export const useSettingBox = () => {
);
};
const EntryContainer = (props) => {
return (
<div className={styles.container}>
<LabelComponent label={props.label} desc={props.desc} />
<Entry {...props}/>
</div>
);
};
return {
DropdownMenuContainer,
SliderContainer,
CheckboxContainer,
SwitchboxContainer,
EntryContainer,
};
};