diff --git a/locales/en.yml b/locales/en.yml index 8726c0b3..85d51180 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -19,6 +19,10 @@ main_page: translator: Translator translator_ctranslate2: Internal (Default) + translator_selector: + is_selected_same_language: |- + Since the same language is selected for both '{{your_language}}' and '{{target_language}}', only '{{translator_ctranslate2}}' is available. + message_log: all: All sent: Sent diff --git a/locales/ja.yml b/locales/ja.yml index 9e9da6ef..c8fe0069 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -19,6 +19,10 @@ main_page: translator: 翻訳エンジン translator_ctranslate2: オフライン翻訳 (Default) + translator_selector: + is_selected_same_language: |- + 「{{your_language}}」と「{{target_language}}」に同じ言語が選択がされているため、「{{translator_ctranslate2}}」のみが使用できます。 + message_log: all: 全て sent: 送信 diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx index 3c830f13..e6b68cd4 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx @@ -4,10 +4,13 @@ import styles from "./TranslatorSelectorOpenButton.module.scss"; import { TranslatorSelector } from "./translator_selector/TranslatorSelector"; import { useStore_IsOpenedTranslatorSelector } from "@store"; import { useLanguageSettings } from "@logics_main"; +import WarningSvg from "@images/warning.svg?react"; export const TranslatorSelectorOpenButton = () => { const { t } = useTranslation(); const { + currentSelectedYourLanguages, + currentSelectedTargetLanguages, currentSelectedPresetTabNumber, currentTranslationEngines, currentSelectedTranslationEngines, @@ -21,6 +24,35 @@ export const TranslatorSelectorOpenButton = () => { const selected_engine_id = currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data]; + const checkIsSelectedSameLanguage = () => { + const your_language_data = currentSelectedYourLanguages.data[currentSelectedPresetTabNumber.data]; + const target_language_data = currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]; + + const yourLanguage = your_language_data["1"]; + const yourLanguageName = yourLanguage.language; + const yourCountry = yourLanguage.country; + + let is_selected_same_language = false; + + for (const key in target_language_data) { + const targetLanguage = target_language_data[key]; + + if (targetLanguage.enable) { + const targetLanguageName = targetLanguage.language; + const targetCountry = targetLanguage.country; + + if (yourLanguageName === targetLanguageName && yourCountry === targetCountry) { + is_selected_same_language = true; + break; + } + } + } + + return is_selected_same_language; + }; + + const is_selected_same_language = checkIsSelectedSameLanguage(); + const getSelectedLabel = () => { const selected_engine = translation_engines.find( @@ -44,11 +76,16 @@ export const TranslatorSelectorOpenButton = () => {

{t("main_page.translator")}:

{selected_label}

+ {is_selected_same_language + ? + : null + }
{currentIsOpenedTranslatorSelector.data && } diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss index fcc32d96..463a9c29 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss @@ -4,6 +4,7 @@ } .translator_selector_button { + position: relative; width: auto; display: flex; justify-content: center; @@ -25,4 +26,11 @@ font-size: 1.2rem; color: var(--dark_basic_text_color); white-space: nowrap; +} + +.warning_svg { + margin-left: 0.2rem; + padding-bottom: 0.2rem; + width: 1.8rem; + color: #cb944f; } \ No newline at end of file diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx index fe39877e..45a45fad 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx @@ -1,29 +1,44 @@ import clsx from "clsx"; import styles from "./TranslatorSelector.module.scss"; -import { chunkArray } from "@utils"; +import { useTranslation } from "react-i18next"; +import { chunkArray } from "@utils"; import { useStore_IsOpenedTranslatorSelector } from "@store"; import { useLanguageSettings } from "@logics_main"; -export const TranslatorSelector = ({selected_id, translation_engines}) => { +export const TranslatorSelector = ({selected_id, translation_engines, is_selected_same_language}) => { const { t } = useTranslation(); const columns = chunkArray(translation_engines, 2); return (
-
- {columns.map((column, column_index) => ( -
- {column.map(({ id, label, is_available }) => ( - - ))} +
+
+ {columns.map((column, column_index) => ( +
+ {column.map(({ id, label, is_available }) => ( + + ))} +
+ ))} +
+ {is_selected_same_language ? +
+

+ {t("main_page.translator_selector.is_selected_same_language", { + your_language: t("main_page.your_language"), + target_language: t("main_page.target_language"), + translator_ctranslate2: t("main_page.translator_ctranslate2"), + })} +

- ))} + : null + }
); diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss index 09262137..84aea69e 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss @@ -3,7 +3,6 @@ bottom: 100%; width: 100%; height: 26rem; - padding: 1rem; background-color: (#000000dd); // background-color: (var(--dark_875_color) + 80); backdrop-filter: blur(0.1rem); @@ -12,7 +11,16 @@ align-items: center; } +.relative_container { + position: relative; + width: 100%; + height: 100%; +} + .wrapper { + // padding: 1rem; + width: 100%; + height: 100%; display: flex; flex-direction: column; justify-content: center; @@ -60,4 +68,24 @@ $box_size: 6.8rem; .translator_name { font-size: 1.4rem; +} + +.is_selected_same_language_wrapper { + position: absolute; + bottom: 0; + width: 100%; + height: 100%; + background-color: (#22222233); + display: flex; + justify-content: center; + align-items: start; + pointer-events: none; + padding: 4rem 1rem; +} + +.is_selected_same_language_text { + font-size: 1.4rem; + text-align: center; + text-wrap: balance; + color: var(--dark_basic_text_color); } \ No newline at end of file diff --git a/src-ui/assets/warning.svg b/src-ui/assets/warning.svg new file mode 100644 index 00000000..72221ecf --- /dev/null +++ b/src-ui/assets/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file