From 8ea37eb39a9500e5f6bade1a97d504d4edad4a67 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Tue, 18 Mar 2025 15:26:22 +0900 Subject: [PATCH] [Update] Main Page: TranslatorSelector: Add the label 'default'. --- locales/en.yml | 2 +- locales/ja.yml | 2 +- locales/ko.yml | 2 +- locales/zh-Hans.yml | 2 +- locales/zh-Hant.yml | 2 +- .../TranslatorSelector.jsx | 10 ++++++- .../TranslatorSelector.module.scss | 30 ++++++++++++++----- 7 files changed, 37 insertions(+), 13 deletions(-) diff --git a/locales/en.yml b/locales/en.yml index 175bbadb..7c677718 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -36,7 +36,7 @@ main_page: swap_button_label: "Swap Languages" target_language: "Target Language" translator: "Translator" - # translator_label_default: "Default" + translator_label_default: "Default" translator_selector: is_selected_same_language: "Since the same language is selected for both '{{your_language}}' and '{{target_language}}', only '{{ctranslate2}}' is available." diff --git a/locales/ja.yml b/locales/ja.yml index 8cecd68e..dfda745c 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -36,7 +36,7 @@ main_page: swap_button_label: "言語を入れ替え" target_language: "相手の言語" translator: "翻訳エンジン" - # translator_label_default: "Default" + translator_label_default: "デフォルト" translator_selector: is_selected_same_language: "「{{your_language}}」と「{{target_language}}」に同じ言語が選択がされているため、「{{ctranslate2}}」のみが使用できます。" diff --git a/locales/ko.yml b/locales/ko.yml index 853c179e..139f41a7 100644 --- a/locales/ko.yml +++ b/locales/ko.yml @@ -36,7 +36,7 @@ main_page: swap_button_label: "언어 교체" target_language: "상대방의 언어" translator: "번역 엔진" - # translator_label_default: "기본값" + translator_label_default: "기본값" translator_selector: is_selected_same_language: diff --git a/locales/zh-Hans.yml b/locales/zh-Hans.yml index 4e301a92..0a13c7f8 100644 --- a/locales/zh-Hans.yml +++ b/locales/zh-Hans.yml @@ -36,7 +36,7 @@ main_page: swap_button_label: "互换" target_language: "目标语言" translator: "翻译器" - # translator_label_default: "默认" + translator_label_default: "默认" translator_selector: is_selected_same_language: diff --git a/locales/zh-Hant.yml b/locales/zh-Hant.yml index a204619f..4fd2fce4 100644 --- a/locales/zh-Hant.yml +++ b/locales/zh-Hant.yml @@ -36,7 +36,7 @@ main_page: swap_button_label: "交換語言" target_language: "目標語言" translator: "翻譯器" - # translator_label_default: "預設" + translator_label_default: "預設" translator_selector: is_selected_same_language: 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 54e50f3e..cdbc159e 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 @@ -15,12 +15,13 @@ export const TranslatorSelector = ({selected_id, translation_engines, is_selecte
{columns.map((column, column_index) => (
- {column.map(({ id, label, is_available }) => ( + {column.map(({ id, label, is_available, is_default }) => ( ))} @@ -45,6 +46,7 @@ export const TranslatorSelector = ({selected_id, translation_engines, is_selecte }; const TranslatorBox = (props) => { + const { t } = useTranslation(); const { setSelectedTranslationEngines} = useLanguageSettings(); const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector(); @@ -53,6 +55,10 @@ const TranslatorBox = (props) => { { [styles.is_selected]: props.is_selected }, { [styles.is_available]: props.is_available } ); + const label_default_class_name = clsx( + styles.label_default, + { [styles.is_selected]: props.is_selected }, + ); const selectTranslator = () => { if (props.is_selected === false) { @@ -60,9 +66,11 @@ const TranslatorBox = (props) => { } updateIsOpenedTranslatorSelector(false); }; + return (

{props.label}

+ {props.is_default &&

{t("main_page.translator_label_default")}

}
); }; \ 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.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss index b33d0782..b73fef4c 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 @@ -17,26 +17,26 @@ } .wrapper { - // padding: 1rem; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; - gap: 1rem; + gap: 1.4rem; } .column_wrapper { display: flex; justify-content: center; align-items: center; - gap: 1rem; + gap: 1.2rem; } -$box_size: 6rem; +$box_size: 6.2rem; .box { - width: 9.2rem; + position: relative; + width: 9.4rem; height: $box_size; background-color: var(--dark_875_color); display: flex; @@ -51,10 +51,10 @@ $box_size: 6rem; } &:active { background-color: var(--dark_900_color); - border: 0.1rem solid var(--primary_300_color); + outline: 0.1rem solid var(--primary_300_color); } &.is_selected { - border: 0.2rem solid var(--primary_300_color); + outline: 0.2rem solid var(--primary_300_color); } &:not(.is_available) { pointer-events: none; @@ -69,6 +69,22 @@ $box_size: 6rem; font-size: 1.4rem; } +.label_default { + background-color: var(--dark_875_color); + outline: 0.1rem solid var(--dark_1000_color); + padding: 0.2rem 0.4rem; + border-radius: 0.2rem; + font-size: 1.2rem; + position: absolute; + top: -0.8rem; + right: -0.8rem; + pointer-events: none; + &.is_selected { + outline: 0.1rem solid var(--primary_300_color); + + } +} + .is_selected_same_language_wrapper { position: absolute; bottom: 0;