From cb39d352d085c8bf268e802092d771c2f5517731 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 27 Jan 2025 17:58:39 +0530 Subject: [PATCH 1/3] chore: themes language support and refactor --- packages/constants/src/index.ts | 1 + .../constants/src}/themes.ts | 22 +++++++++++------- .../i18n/src/locales/en/translations.json | 23 +++++++++++++++++++ web/app/profile/appearance/page.tsx | 3 ++- .../command-palette/actions/theme-actions.tsx | 8 ++++--- .../components/core/theme/theme-switch.tsx | 3 ++- 6 files changed, 47 insertions(+), 13 deletions(-) rename {web/core/constants => packages/constants/src}/themes.ts (79%) diff --git a/packages/constants/src/index.ts b/packages/constants/src/index.ts index 2bc68dbef71..b24944f5bec 100644 --- a/packages/constants/src/index.ts +++ b/packages/constants/src/index.ts @@ -14,5 +14,6 @@ export * from "./swr"; export * from "./user"; export * from "./workspace"; export * from "./stickies"; +export * from "./themes"; export * from "./profile"; export * from "./workspace-drafts"; diff --git a/web/core/constants/themes.ts b/packages/constants/src/themes.ts similarity index 79% rename from web/core/constants/themes.ts rename to packages/constants/src/themes.ts index dd758481181..84e8c0d0b70 100644 --- a/web/core/constants/themes.ts +++ b/packages/constants/src/themes.ts @@ -1,9 +1,15 @@ -export const THEMES = ["light", "dark", "light-contrast", "dark-contrast", "custom"]; +export const THEMES = [ + "light", + "dark", + "light-contrast", + "dark-contrast", + "custom", +]; export interface I_THEME_OPTION { key: string; value: string; - label: string; + i18n_label: string; type: string; icon: { border: string; @@ -16,7 +22,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [ { key: "system_preference", value: "system", - label: "System preference", + i18n_label: "System preference", type: "light", icon: { border: "#DEE2E6", @@ -27,7 +33,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [ { key: "light", value: "light", - label: "Light", + i18n_label: "Light", type: "light", icon: { border: "#DEE2E6", @@ -38,7 +44,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [ { key: "dark", value: "dark", - label: "Dark", + i18n_label: "Dark", type: "dark", icon: { border: "#2E3234", @@ -49,7 +55,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [ { key: "light_contrast", value: "light-contrast", - label: "Light high contrast", + i18n_label: "Light high contrast", type: "light", icon: { border: "#000000", @@ -60,7 +66,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [ { key: "dark_contrast", value: "dark-contrast", - label: "Dark high contrast", + i18n_label: "Dark high contrast", type: "dark", icon: { border: "#FFFFFF", @@ -71,7 +77,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [ { key: "custom", value: "custom", - label: "Custom theme", + i18n_label: "Custom theme", type: "light", icon: { border: "#FFC9C9", diff --git a/packages/i18n/src/locales/en/translations.json b/packages/i18n/src/locales/en/translations.json index e115a99ec67..6d1498698d4 100644 --- a/packages/i18n/src/locales/en/translations.json +++ b/packages/i18n/src/locales/en/translations.json @@ -960,5 +960,28 @@ } } } + }, + + "themes": { + "theme_options": { + "system_preference": { + "label": "System preference" + }, + "light": { + "label": "Light" + }, + "dark": { + "label": "Dark" + }, + "light_contrast": { + "label": "Light high contrast" + }, + "dark_contrast": { + "label": "Dark high contrast" + }, + "custom": { + "label": "Custom theme" + } + } } } diff --git a/web/app/profile/appearance/page.tsx b/web/app/profile/appearance/page.tsx index 5b1a96c5be1..c89bcdf3c33 100644 --- a/web/app/profile/appearance/page.tsx +++ b/web/app/profile/appearance/page.tsx @@ -3,6 +3,8 @@ import { useEffect, useState } from "react"; import { observer } from "mobx-react"; import { useTheme } from "next-themes"; +// plane imports +import { I_THEME_OPTION, THEME_OPTIONS } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { IUserTheme } from "@plane/types"; import { setPromiseToast } from "@plane/ui"; @@ -11,7 +13,6 @@ import { LogoSpinner } from "@/components/common"; import { CustomThemeSelector, ThemeSwitch, PageHead } from "@/components/core"; import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile"; // constants -import { I_THEME_OPTION, THEME_OPTIONS } from "@/constants/themes"; // helpers import { applyTheme, unsetCustomCssVariables } from "@/helpers/theme.helper"; // hooks diff --git a/web/core/components/command-palette/actions/theme-actions.tsx b/web/core/components/command-palette/actions/theme-actions.tsx index 2ae81d3f316..9df95c00a96 100644 --- a/web/core/components/command-palette/actions/theme-actions.tsx +++ b/web/core/components/command-palette/actions/theme-actions.tsx @@ -5,9 +5,10 @@ import { Command } from "cmdk"; import { observer } from "mobx-react"; import { useTheme } from "next-themes"; import { Settings } from "lucide-react"; +// plane imports +import { THEME_OPTIONS } from "@plane/constants"; +import { useTranslation } from "@plane/i18n"; import { TOAST_TYPE, setToast } from "@plane/ui"; -// constants -import { THEME_OPTIONS } from "@/constants/themes"; // hooks import { useUserProfile } from "@/hooks/store"; @@ -20,6 +21,7 @@ export const CommandPaletteThemeActions: FC = observer((props) => { const { setTheme } = useTheme(); // hooks const { updateUserTheme } = useUserProfile(); + const { t } = useTranslation(); // states const [mounted, setMounted] = useState(false); @@ -53,7 +55,7 @@ export const CommandPaletteThemeActions: FC = observer((props) => { >
- {theme.label} + {t(theme.i18n_label)}
))} diff --git a/web/core/components/core/theme/theme-switch.tsx b/web/core/components/core/theme/theme-switch.tsx index 7a188a48aa0..1a188fa03ef 100644 --- a/web/core/components/core/theme/theme-switch.tsx +++ b/web/core/components/core/theme/theme-switch.tsx @@ -1,10 +1,11 @@ "use client"; import { FC } from "react"; +// plane imports +import { I_THEME_OPTION, THEME_OPTIONS } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; // constants import { CustomSelect } from "@plane/ui"; -import { THEME_OPTIONS, I_THEME_OPTION } from "@/constants/themes"; // ui type Props = { From b617ca222391b9afb2c7313adbcd66381ab18bdc Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 27 Jan 2025 19:46:39 +0530 Subject: [PATCH 2/3] chore: theme language support and refactor --- .../i18n/src/locales/es/translations.json | 23 ++++++++++++++ .../i18n/src/locales/fr/translations.json | 31 ++++++++++++++++--- .../i18n/src/locales/ja/translations.json | 23 ++++++++++++++ .../i18n/src/locales/zh-CN/translations.json | 23 ++++++++++++++ 4 files changed, 96 insertions(+), 4 deletions(-) diff --git a/packages/i18n/src/locales/es/translations.json b/packages/i18n/src/locales/es/translations.json index 557abd6bb51..9ec6b37b001 100644 --- a/packages/i18n/src/locales/es/translations.json +++ b/packages/i18n/src/locales/es/translations.json @@ -959,5 +959,28 @@ } } } + }, + + "themes": { + "theme_options": { + "system_preference": { + "label": "Preferencia del sistema" + }, + "light": { + "label": "Claro" + }, + "dark": { + "label": "Oscuro" + }, + "light_contrast": { + "label": "Alto contraste claro" + }, + "dark_contrast": { + "label": "Alto contraste oscuro" + }, + "custom": { + "label": "Tema personalizado" + } + } } } diff --git a/packages/i18n/src/locales/fr/translations.json b/packages/i18n/src/locales/fr/translations.json index 4a5594a81d9..0f6fb5eff56 100644 --- a/packages/i18n/src/locales/fr/translations.json +++ b/packages/i18n/src/locales/fr/translations.json @@ -447,7 +447,7 @@ } } }, - + "view": { "create": { "label": "Créer une vue" @@ -620,7 +620,7 @@ "empty_state": { "activity": { "title": "Aucune activité pour le moment", - "description": "Commencez par créer une nouvelle tâche ! Ajoutez des détails et des propriétés à celle-ci. Explorez davantage Plane pour voir votre activité." + "description": "Commencez par créer une nouvelle tâche ! Ajoutez des détails et des propriétés à celle-ci. Explorez davantage Plane pour voir votre activité." }, "assigned": { "title": "Aucune tâche assignée", @@ -687,13 +687,13 @@ "project_issues": { "empty_state": { "no_issues": { - "title": "Créez un problème et assignez-le à quelqu’un, même à vous-même", + "title": "Créez un problème et assignez-le à quelqu'un, même à vous-même", "description": "Considérez les problèmes comme des emplois, des tâches, des actions ou JTBD (travaux à accomplir). Nous aimons ça. Un problème et ses sous-problèmes sont généralement des actions basées sur le temps assignées aux membres de votre équipe. Votre équipe crée, assigne et termine des problèmes pour faire avancer votre projet vers son objectif.", "primary_button": { "text": "Créez votre premier problème", "comic": { "title": "Les problèmes sont les éléments constitutifs de Plane.", - "description": "Redessiner l’interface utilisateur de Plane, Rebrander l’entreprise ou Lancer le nouveau système d’injection de carburant sont des exemples de problèmes qui comportent probablement des sous-problèmes." + "description": "Redessiner l'interface utilisateur de Plane, Rebrander l'entreprise ou Lancer le nouveau système d'injection de carburant sont des exemples de problèmes qui comportent probablement des sous-problèmes." } } }, @@ -957,5 +957,28 @@ } } } + }, + + "themes": { + "theme_options": { + "system_preference": { + "label": "Préférence système" + }, + "light": { + "label": "Clair" + }, + "dark": { + "label": "Sombre" + }, + "light_contrast": { + "label": "Contraste élevé clair" + }, + "dark_contrast": { + "label": "Contraste élevé sombre" + }, + "custom": { + "label": "Thème personnalisé" + } + } } } diff --git a/packages/i18n/src/locales/ja/translations.json b/packages/i18n/src/locales/ja/translations.json index 4f53184200a..96d76a31f8f 100644 --- a/packages/i18n/src/locales/ja/translations.json +++ b/packages/i18n/src/locales/ja/translations.json @@ -960,5 +960,28 @@ } } } + }, + + "themes": { + "theme_options": { + "system_preference": { + "label": "システム設定" + }, + "light": { + "label": "ライト" + }, + "dark": { + "label": "ダーク" + }, + "light_contrast": { + "label": "ライト高コントラスト" + }, + "dark_contrast": { + "label": "ダーク高コントラスト" + }, + "custom": { + "label": "カスタムテーマ" + } + } } } diff --git a/packages/i18n/src/locales/zh-CN/translations.json b/packages/i18n/src/locales/zh-CN/translations.json index 12c85b57f7b..38ff0bd7751 100644 --- a/packages/i18n/src/locales/zh-CN/translations.json +++ b/packages/i18n/src/locales/zh-CN/translations.json @@ -495,5 +495,28 @@ "subscribed": "已订阅", "activity": "活动" } + }, + + "themes": { + "theme_options": { + "system_preference": { + "label": "系统偏好" + }, + "light": { + "label": "明亮" + }, + "dark": { + "label": "暗黑" + }, + "light_contrast": { + "label": "高对比度明亮" + }, + "dark_contrast": { + "label": "高对比度暗黑" + }, + "custom": { + "label": "自定义主题" + } + } } } From 9fcf01febf2181c061d8c8dd1b94af71d78b1614 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 27 Jan 2025 19:53:37 +0530 Subject: [PATCH 3/3] fix --- .../i18n/src/locales/es/translations.json | 1 + .../i18n/src/locales/fr/translations.json | 1 + .../i18n/src/locales/ja/translations.json | 57 +++++++++---------- 3 files changed, 30 insertions(+), 29 deletions(-) diff --git a/packages/i18n/src/locales/es/translations.json b/packages/i18n/src/locales/es/translations.json index 94dd961a899..c2946aaee15 100644 --- a/packages/i18n/src/locales/es/translations.json +++ b/packages/i18n/src/locales/es/translations.json @@ -1195,6 +1195,7 @@ "created": "Creados", "subscribed": "Suscritos" }, + "home_widgets": { "empty_state": { "general": { diff --git a/packages/i18n/src/locales/fr/translations.json b/packages/i18n/src/locales/fr/translations.json index c9b7252c752..bfc58297e29 100644 --- a/packages/i18n/src/locales/fr/translations.json +++ b/packages/i18n/src/locales/fr/translations.json @@ -1192,6 +1192,7 @@ "created": "Créés", "subscribed": "Abonnés" }, + "home_widgets": { "empty_state": { "general": { diff --git a/packages/i18n/src/locales/ja/translations.json b/packages/i18n/src/locales/ja/translations.json index bbccc0884d3..51f2786473f 100644 --- a/packages/i18n/src/locales/ja/translations.json +++ b/packages/i18n/src/locales/ja/translations.json @@ -1104,35 +1104,34 @@ } } }, - "toasts": { - "errors": { - "wrong_name": "付箋の名前は100文字を超えることはできません。", - "already_exists": "説明のない付箋がすでに存在します" - }, - "created": { - "title": "付箋が作成されました", - "message": "付箋が正常に作成されました" - }, - "not_created": { - "title": "付箋を作成できません", - "message": "付箋を作成できませんでした" - }, - "updated": { - "title": "付箋が更新されました", - "message": "付箋が正常に更新されました" - }, - "not_updated": { - "title": "付箋を更新できません", - "message": "付箋を更新できませんでした" - }, - "removed": { - "title": "付箋が削除されました", - "message": "付箋が正常に削除されました" - }, - "not_removed": { - "title": "付箋を削除できません", - "message": "付箋を削除できませんでした" - } + "toasts": { + "errors": { + "wrong_name": "付箋の名前は100文字を超えることはできません。", + "already_exists": "説明のない付箋がすでに存在します" + }, + "created": { + "title": "付箋が作成されました", + "message": "付箋が正常に作成されました" + }, + "not_created": { + "title": "付箋を作成できません", + "message": "付箋を作成できませんでした" + }, + "updated": { + "title": "付箋が更新されました", + "message": "付箋が正常に更新されました" + }, + "not_updated": { + "title": "付箋を更新できません", + "message": "付箋を更新できませんでした" + }, + "removed": { + "title": "付箋が削除されました", + "message": "付箋が正常に削除されました" + }, + "not_removed": { + "title": "付箋を削除できません", + "message": "付箋を削除できませんでした" } },