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

[Update] Config Window: Add Radio button component.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-08-03 11:17:42 +09:00
parent 4679804500
commit 1d2df69507
5 changed files with 92 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ export const Appearance = () => {
SwitchboxContainer,
EntryContainer,
ThresholdContainer,
RadioButtonContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -32,7 +33,9 @@ export const Appearance = () => {
<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"/>
<RadioButtonContainer label="Transparent" desc="description" switchbox_id="radiobutton_id_1"/>
<EntryContainer label="Transparent" desc="description" switchbox_id="entry_id_1"/>
<ThresholdContainer label="Transparent" desc="description" id="mic_threshold" min="0" max="3000"/>
</>

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

@@ -10,6 +10,7 @@ export const Appearance = () => {
SwitchboxContainer,
EntryContainer,
ThresholdContainer,
RadioButtonContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -32,7 +33,9 @@ export const Appearance = () => {
<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"/>
<RadioButtonContainer label="Transparent" desc="description" switchbox_id="radiobutton_id_1"/>
<EntryContainer label="Transparent" desc="description" switchbox_id="entry_id_1"/>
<ThresholdContainer label="Transparent" desc="description" id="mic_threshold" min="0" max="3000"/>
</>

30
src-ui/windows/config_window/setting_section/setting_box/components/radio_button/RadioButton.jsx Normal file
View File

@@ -0,0 +1,30 @@
import clsx from "clsx";
import { useState } from "react";
import styles from "./RadioButton.module.scss";
export const RadioButton = (props) => {
const options = [
{ radio_button_id: "1", label: "AAAAAAAA" },
{ radio_button_id: "2", label: "BBBBBB" }
];
const changeValue = (e) => {
console.log(e.target.value);
};
return (
<div className={styles.container}>
{options.map((option) => (
<label key={option.radio_button_id} className={styles.radio_button_wrapper}>
<input
type="radio"
name="radio"
value={option.radio_button_id}
onChange={changeValue}
/>
<p className={styles.radio_button_label}>{option.label}</p>
</label>
))}
</div>
);
};

41
src-ui/windows/config_window/setting_section/setting_box/components/radio_button/RadioButton.module.scss Normal file
View File

@@ -0,0 +1,41 @@
.container {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.4rem;
}
.radio_button_wrapper {
display: flex;
align-items: center;
cursor: pointer;
gap: 1rem;
padding: 0.6rem 0.8rem;
border-radius: 0.4rem;
&:hover {
background-color: var(--dark_800_color);
}
&:active {
background-color: var(--dark_850_color);
}
}
input[type="radio"] {
appearance: none;
margin: 0;
width: 2.4rem;
height: 2.4rem;
border: 0.3rem solid var(--dark_600_color);
border-radius: 50%;
transition: border-color .1s ease, border-width .1s ease;
cursor: inherit;
&:checked {
border-color: var(--primary_400_color);
border-width: 0.6rem;
}
}
.radio_button_label {
font-size: 1.4rem;
font-weight: 300;
}

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

@@ -1,4 +1,6 @@
import styles from "./useSettingBox.module.scss";
import { useIsOpenedDropdownMenu } from "@store";
import { LabelComponent } from "./label_component/LabelComponent";
import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
import { Slider } from "./slider/Slider";
@@ -6,7 +8,7 @@ import { Checkbox } from "./checkbox/Checkbox";
import { Switchbox } from "./switchbox/Switchbox";
import { Entry } from "./entry/Entry";
import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
import { useIsOpenedDropdownMenu } from "@store";
import { RadioButton } from "./radio_button/RadioButton";
export const useSettingBox = () => {
const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -60,6 +62,15 @@ export const useSettingBox = () => {
);
};
const RadioButtonContainer = (props) => {
return (
<div className={styles.container}>
<LabelComponent label={props.label} desc={props.desc} />
<RadioButton {...props}/>
</div>
);
};
const ThresholdContainer = (props) => {
return (
<div className={styles.threshold_container}>
@@ -81,5 +92,6 @@ export const useSettingBox = () => {
SwitchboxContainer,
EntryContainer,
ThresholdContainer,
RadioButtonContainer,
};
};