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

[Update] Main Page: Add UI, multi language.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-12 16:16:40 +09:00
parent 607c04d7ba
commit a7d094bbcb
12 changed files with 210 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src-ui/app/main_page/main_section/MainSection.jsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from "react-i18next";
import styles from "./MainSection.module.scss";
import { TopBar } from "./top_bar/TopBar";
@@ -6,6 +7,7 @@ import { LanguageSelector } from "./language_selector/LanguageSelector";
import { useStore_IsOpenedLanguageSelector } from "@store";
import { useLanguageSettings } from "@logics_main";
import { useEffect } from "react";
export const MainSection = () => {
@@ -20,33 +22,62 @@ export const MainSection = () => {
const HandleLanguageSelector = () => {
const { t } = useTranslation();
const { currentIsOpenedLanguageSelector, updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const {
currentSelectedPresetTabNumber,
currentSelectedYourLanguages,
setSelectedYourLanguages,
currentSelectedTargetLanguages,
setSelectedTargetLanguages,
} = useLanguageSettings();
useEffect(() => {
updateIsOpenedLanguageSelector({
your_language: false,
target_language: false,
target_key: "1"
});
}, [currentSelectedPresetTabNumber.data, currentSelectedYourLanguages.data, currentSelectedTargetLanguages.data]);
const getTitle = (target_selector_key) => {
if (target_selector_key === "your_language") return t("main_page.language_selector.title_your_language");
if (target_selector_key === "target_language") {
if (currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["2"].enable === false) return t("main_page.language_selector.title_target_language");
return `${t("main_page.language_selector.title_target_language")} (${currentIsOpenedLanguageSelector.data.target_key})`;
}
};
if (currentIsOpenedLanguageSelector.data.your_language === true) {
const onclickFunction_YourLanguage = (payload) => {
updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
setSelectedYourLanguages(payload);
updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: currentIsOpenedLanguageSelector.data.target_key });
setSelectedYourLanguages({
...payload,
target_key: currentIsOpenedLanguageSelector.data.target_key,
});
};
const title = getTitle("your_language");
return (
<LanguageSelector
id="your_language"
title={title}
onClickFunction={onclickFunction_YourLanguage}
/>
);
} else if (currentIsOpenedLanguageSelector.data.target_language === true) {
const onclickFunction_TargetLanguage = (payload) => {
updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
setSelectedTargetLanguages(payload);
updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: currentIsOpenedLanguageSelector.data.target_key });
setSelectedTargetLanguages({
...payload,
target_key: currentIsOpenedLanguageSelector.data.target_key,
});
};
const title = getTitle("target_language");
return (
<LanguageSelector
id="target_language"
title={title}
onClickFunction={onclickFunction_TargetLanguage}
/>
);