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

[Update] Config Window: Add slider component by using Material UI reluctantly.

Browse Source 
I didn't want to use it because it's hard to customize. but I didn't like the slider's thumbs behaver so I did it.
It has Tooltip component so It will be useful somewhere. still difficult to customize it, tho.
This commit is contained in:
Sakamoto Shiina
2024-08-01 10:42:29 +09:00
parent 14e033b2e9
commit 072a85750b
7 changed files with 598 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,10 @@ import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
export const Appearance = () => {
const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
const { currentMicDeviceListStatus } = useMicDeviceListStatus();
const { DropdownMenuContainer } = useSettingBox();
const {
DropdownMenuContainer,
SliderContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
const asyncFunction = () => {
@@ -20,6 +23,8 @@ export const Appearance = () => {
<>
<DropdownMenuContainer dropdown_id="mic_host" label="Mic Host/Driver" desc="description" selected_id="b" list={{a: "A", b: "B", c: "C"}} />
<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"/>
</>
);
};

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

@@ -3,7 +3,10 @@ import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
export const Appearance = () => {
const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
const { currentMicDeviceListStatus } = useMicDeviceListStatus();
const { DropdownMenuContainer } = useSettingBox();
const {
DropdownMenuContainer,
SliderContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
const asyncFunction = () => {
@@ -20,6 +23,8 @@ export const Appearance = () => {
<>
<DropdownMenuContainer dropdown_id="mic_host" label="Mic Host/Driver" desc="description" selected_id="b" list={{a: "A", b: "B", c: "C"}} />
<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"/>
</>
);
};

55
src-ui/windows/config_window/setting_section/setting_box/components/slider/Slider.jsx Normal file
View File

@@ -0,0 +1,55 @@
import React, { useState, useEffect } from "react";
import styles from "./Slider.module.scss";
import MUI_Slider from "@mui/material/Slider";
export const Slider = ({ min, max }) => {
const [baseColor, setBaseColor] = useState("");
const [activeColor, setActiveColor] = useState("");
const [toolTipColor, setToolTipColor] = useState("");
useEffect(() => {
const baseColor = getComputedStyle(document.documentElement).getPropertyValue("--dark_700_color");
const activeColor = getComputedStyle(document.documentElement).getPropertyValue("--primary_600_color");
const toolTipColor = getComputedStyle(document.documentElement).getPropertyValue("--dark_800_color");
setBaseColor(baseColor.trim());
setActiveColor(activeColor.trim());
setToolTipColor(toolTipColor.trim());
}, []);
const showSliderValue = (_e, value) => {
console.log(value);
};
return (
<div className={styles.container}>
<MUI_Slider className={styles.range_slider} defaultValue={50} aria-label="Default" valueLabelDisplay="auto"
step={1}
min={Number(min)}
max={Number(max)}
onChange={showSliderValue}
sx={{
color: baseColor,
"& .MuiSlider-thumb": {
backgroundColor: activeColor,
"&:hover, &.Mui-focusVisible, &.Mui-active": {
boxShadow: "0 0 0 0.8rem" + activeColor + "44",
},
"& .MuiSlider-valueLabel": {
fontSize: "1.4rem",
backgroundColor: toolTipColor,
padding: "0.6rem 1rem",
lineHeight: "1.15",
top: "-1.4rem",
"&::before": {
left: "30%",
width: "1rem",
height: "1rem",
clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
}
}
},
}}
/>
</div>
);
};

11
src-ui/windows/config_window/setting_section/setting_box/components/slider/Slider.module.scss Normal file
View File

@@ -0,0 +1,11 @@
.container {
display: flex;
flex-direction: column;
align-items: end;
justify-content: center;
width: 100%;
}
.range_slider {
max-width: 40rem;
}

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

@@ -1,6 +1,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 { useIsOpenedDropdownMenu } from "@store";
export const useSettingBox = () => {
@@ -19,5 +20,17 @@ export const useSettingBox = () => {
);
};
return { DropdownMenuContainer };
const SliderContainer = (props) => {
return (
<div className={styles.container}>
<LabelComponent label={props.label} desc={props.desc} />
<Slider {...props}/>
</div>
);
};
return {
DropdownMenuContainer,
SliderContainer,
};
};