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

[Update] Config Window: Add Checkbox component.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-08-01 12:45:09 +09:00
parent 072a85750b
commit 329fb36219
5 changed files with 96 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@ export const Appearance = () => {
const {
DropdownMenuContainer,
SliderContainer,
CheckboxContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -25,6 +26,7 @@ export const Appearance = () => {
<DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDeviceStatus.data} list={currentMicDeviceListStatus} selectFunction={selectFunction} state={currentSelectedMicDeviceStatus.state} />
<SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
<CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
</>
);
};

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

@@ -6,6 +6,7 @@ export const Appearance = () => {
const {
DropdownMenuContainer,
SliderContainer,
CheckboxContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -25,6 +26,7 @@ export const Appearance = () => {
<DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDeviceStatus.data} list={currentMicDeviceListStatus} selectFunction={selectFunction} state={currentSelectedMicDeviceStatus.state} />
<SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
<CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
</>
);
};

28
src-ui/windows/config_window/setting_section/setting_box/components/checkbox/Checkbox.jsx Normal file
View File

@@ -0,0 +1,28 @@
import React, { useState } from 'react';
import styles from "./Checkbox.module.scss";
export const Checkbox = (props) => {
const [isChecked, setIsChecked] = useState(false);
const handleCheckboxChange = () => {
setIsChecked(!isChecked);
};
return (
<div className={styles.checkbox_container}>
<label className={styles.checkbox_wrapper} htmlFor={props.checkbox_id}>
<input
type="checkbox"
id={props.checkbox_id}
checked={isChecked}
onChange={handleCheckboxChange}
/>
<span className={styles.cbx}>
<svg viewBox="0 0 12 12">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
</label>
</div>
);
};

53
src-ui/windows/config_window/setting_section/setting_box/components/checkbox/Checkbox.module.scss Normal file
View File

@@ -0,0 +1,53 @@
.checkbox_container {
width: 100%;
height: 100%;
display: flex;
justify-content: end;
align-items: center;
}
.checkbox_wrapper {
display: inline-block;
cursor: pointer;
padding: 2rem;
&:hover {
& .cbx {
border: var(--primary_600_color) solid 0.2rem;
}
}
}
.checkbox_wrapper .cbx {
display: block;
width: 2.8rem;
height: 2.8rem;
border-radius: 0.4rem;
border: var(--dark_700_color) solid 0.2rem;
transition: all 0.15s ease;
padding: 0.4rem;
}
.checkbox_wrapper .cbx svg {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: var(--dark_basic_text_color);
stroke-width: 0.2rem;
stroke-dasharray: 1.7rem;
stroke-dashoffset: 1.7rem;
}
.checkbox_wrapper input[type="checkbox"] {
display: none;
visibility: hidden;
}
.checkbox_wrapper input[type="checkbox"]:checked + .cbx {
background-color: var(--primary_600_color);
border: none;
}
.checkbox_wrapper input[type="checkbox"]:checked + .cbx svg {
stroke-dashoffset: 0;
transition: all 0.15s ease;
}

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

@@ -2,6 +2,7 @@ import styles from "./useSettingBox.module.scss";
import { LabelComponent } from "./label_component/LabelComponent";
import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
import { Slider } from "./slider/Slider";
import { Checkbox } from "./checkbox/Checkbox";
import { useIsOpenedDropdownMenu } from "@store";
export const useSettingBox = () => {
@@ -29,8 +30,18 @@ export const useSettingBox = () => {
);
};
const CheckboxContainer = (props) => {
return (
<div className={styles.container}>
<LabelComponent label={props.label} desc={props.desc} />
<Checkbox {...props}/>
</div>
);
};
return {
DropdownMenuContainer,
SliderContainer,
CheckboxContainer,
};
};