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

[Update] Config Page: Add Appearance Tab. Add UI Language section.(Functionally, too)

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-13 16:23:23 +09:00
parent 1eceb8e8e8
commit f74ebc1942
8 changed files with 182 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,8 +12,8 @@ export const SettingBox = () => {
return <Device />;
// case "others":
// return <Others />;
// case "appearance":
// return <Appearance />;
case "appearance":
return <Appearance />;
// case "about_vrct":
// return <AboutVrct />;

77
src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -1,24 +1,24 @@
import clsx from "clsx";
import { useTranslation } from "react-i18next";
import FolderOpenSvg from "@images/folder_open.svg?react";
import styles from "./Appearance.module.scss";
import { useSettingBox } from "../components/useSettingBox";
import { useStore_SelectedMicDevice, useStore_MicDeviceList } from "@store";
export const Appearance = () => {
const { t } = useTranslation();
const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice();
const { currentMicDeviceList } = useStore_MicDeviceList();
// const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice();
// const { currentMicDeviceList } = useStore_MicDeviceList();
const {
DropdownMenuContainer,
SliderContainer,
CheckboxContainer,
SwitchboxContainer,
EntryContainer,
ThresholdContainer,
RadioButtonContainer,
DeeplAuthKeyContainer,
MessageFormatContainer,
WordFilterContainer,
ActionButtonContainer,
// SliderContainer,
// CheckboxContainer,
// SwitchboxContainer,
// EntryContainer,
// ThresholdContainer,
// RadioButtonContainer,
// DeeplAuthKeyContainer,
// MessageFormatContainer,
// WordFilterContainer,
// ActionButtonContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -34,8 +34,13 @@ export const Appearance = () => {
return (
<>
<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={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} />
<UiLanguageContainer
/>
{/* <DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} />
<SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
<CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
@@ -61,8 +66,44 @@ export const Appearance = () => {
<WordFilterContainer label={t(`config_page.mic_word_filter.label`)} desc={t(`config_page.mic_word_filter.desc`)}/>
<ActionButtonContainer label={t(`config_page.open_config_filepath.label`)} IconComponent={FolderOpenSvg} OnclickFunction={()=>{}}/>
<ActionButtonContainer label={t(`config_page.open_config_filepath.label`)} IconComponent={FolderOpenSvg} OnclickFunction={()=>{}}/> */}
</>
);
};
};
import { LabelComponent } from "../components/label_component/LabelComponent";
import { useUiLanguage } from "@logics_configs/useUiLanguage";
const UiLanguageContainer = () => {
const { t } = useTranslation();
const { currentUiLanguage, setUiLanguage } = useUiLanguage();
const SELECTABLE_UI_LANGUAGES_DICT = {
en: "English",
ja: "日本語",
ko: "한국어",
"zh-Hant": "繁體中文",
};
return (
<div className={styles.ui_language_container}>
<LabelComponent label={t("config_page.ui_language.label")} />
<div className={styles.ui_language_selector_container}>
{currentUiLanguage.state === "loading" && <span className={styles.loader}></span>}
{Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (
<label key={key} className={clsx(styles.radio_button_wrapper, { [styles.is_selected]: currentUiLanguage.data === key } )}>
<input
type="radio"
name="radio"
value={key}
onChange={() => setUiLanguage(key)}
checked={currentUiLanguage.data === key}
/>
<p className={styles.radio_button_label}>{value}</p>
</label>
))}
</div>
</div>
);
};

61
src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss Normal file
View File

@@ -0,0 +1,61 @@
@import "@scss_mixins";
.ui_language_container {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 2rem;
border-radius: 0.6rem;
}
.ui_language_selector_container {
display: flex;
gap: 1rem;
position: relative;
}
.radio_button_wrapper {
display: flex;
align-items: center;
cursor: pointer;
gap: 0.6rem;
padding: 0.6rem 1rem;
border-radius: 0.4rem;
position: relative;
&:hover {
background-color: var(--dark_850_color);
}
&:active {
background-color: var(--dark_925_color);
}
&.is_selected {
pointer-events: none;
}
}
input[type="radio"] {
appearance: none;
margin: 0;
width: 1.6rem;
height: 1.6rem;
border: 0.2rem 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.4rem;
}
}
.radio_button_label {
font-size: 1.4rem;
font-weight: 400;
}
.loader {
@include loader(2rem, 0.2rem, right, -3rem);
}