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

[Update] Main Page: Language Settings. Translation Engines. To selectable.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-22 12:02:50 +09:00
parent 8e8eeeb239
commit 586aaf0091
7 changed files with 116 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
View File

@@ -2,27 +2,45 @@ import { useTranslation } from "react-i18next";
import styles from "./TranslatorSelectorOpenButton.module.scss";
import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
import { useStore_IsOpenedTranslatorSelector } from "@store";
import { useLanguageSettings } from "@logics_main/useLanguageSettings";
export const TranslatorSelectorOpenButton = () => {
const { t } = useTranslation();
const { currentSelectedTranslatorId } = useStore_SelectedTranslatorId();
const { currentTranslatorList } = useStore_TranslatorList();
const currentTranslator = currentTranslatorList.find(
translator_data => translator_data.translator_key === currentSelectedTranslatorId
);
const {
currentSelectedPresetTabNumber,
currentTranslationEngines,
getTranslationEngines,
currentSelectedTranslationEngines,
} = useLanguageSettings();
// console.log(currentTranslationEngines, currentSelectedTranslationEngines);
const selected_translator_name = (currentTranslationEngines.state === "loading")
? "Loading..."
: currentTranslationEngines.data.find(
translator_data => translator_data.translator_id === currentSelectedTranslationEngines[currentSelectedPresetTabNumber.data]
)?.translator_name;
const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
const openTranslatorSelector = () => updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
const openTranslatorSelector = () => {
getTranslationEngines();
updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
};
return (
<div className={styles.container}>
<div className={styles.translator_selector_button} onClick={openTranslatorSelector}>
<p className={styles.label}>{t("main_page.translator")}</p>
<p className={styles.label}>{currentTranslator?.translator_name}</p>
<p className={styles.label}>{t("main_page.translator")}: </p>
<p className={styles.label}>{selected_translator_name}</p>
</div>
{currentIsOpenedTranslatorSelector && <TranslatorSelector />}
{currentIsOpenedTranslatorSelector &&
<TranslatorSelector
selected_translator_id={currentSelectedTranslationEngines}
translation_engines={currentTranslationEngines}
/>
}
</div>
);
};

22
src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
View File

@@ -1,22 +1,24 @@
import styles from "./TranslatorSelector.module.scss";
import { chunkArray } from "@utils/chunkArray";
import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
export const TranslatorSelector = () => {
const { currentTranslatorList } = useStore_TranslatorList();
const columns = chunkArray(currentTranslatorList, 2);
import { useStore_IsOpenedTranslatorSelector } from "@store";
import { useLanguageSettings } from "@logics_main/useLanguageSettings";
export const TranslatorSelector = ({selected_translator_id, translation_engines}) => {
const columns = (translation_engines.data !== undefined) ? chunkArray(translation_engines.data, 2) : [];
return (
<div className={styles.container}>
<div className={styles.wrapper}>
{columns.map((column, column_index) => (
<div className={styles.column_wrapper} key={`column_${column_index}`}>
{column.map(({ translator_key, translator_name, is_available }) => (
{column.map(({ translator_id, translator_name, is_available }) => (
<TranslatorBox
key={translator_key}
translator_id={translator_key}
key={translator_id}
translator_id={translator_id}
translator_name={translator_name}
is_available={is_available}
is_selected={(translator_id === selected_translator_id)}
/>
))}
</div>
@@ -28,17 +30,17 @@ export const TranslatorSelector = () => {
import clsx from "clsx";
const TranslatorBox = (props) => {
const { currentSelectedTranslatorId, updateSelectedTranslatorId} = useStore_SelectedTranslatorId();
const { currentSelectedPresetTabNumber, currentSelectedTranslationEngines, setSelectedTranslationEngines} = useLanguageSettings();
const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
const box_class_name = clsx(
styles.box,
{ [styles["is_selected"]]: (currentSelectedTranslatorId === props.translator_id) ? true : false },
{ [styles["is_selected"]]: (currentSelectedTranslationEngines[currentSelectedPresetTabNumber.data] === props.translator_id) ? true : false },
{ [styles["is_available"]]: (props.is_available === true) ? true : false }
);
const selectTranslator = () => {
updateSelectedTranslatorId(props.translator_id);
setSelectedTranslationEngines(props.translator_id);
updateIsOpenedTranslatorSelector(false);
};
return (