From d54533e15009e25ddf6be215c0995ecb2a2d3236 Mon Sep 17 00:00:00 2001 From: HFO4 <912394456@qq.com> Date: Tue, 7 Jun 2022 17:45:06 +0800 Subject: [PATCH] i18n: theme settings --- public/locales/en-US/dashboard.json | 24 +++++- public/locales/zh-CN/dashboard.json | 24 +++++- src/component/Admin/Dialogs/CreateTheme.js | 17 ++-- src/component/Admin/Setting/Theme.js | 91 +++++++++++++--------- 4 files changed, 111 insertions(+), 45 deletions(-) diff --git a/public/locales/en-US/dashboard.json b/public/locales/en-US/dashboard.json index 4b357ed..e9c89d6 100644 --- a/public/locales/en-US/dashboard.json +++ b/public/locales/en-US/dashboard.json @@ -159,6 +159,28 @@ "heartbeatRecoverModeIntervalDes": "Interval between master attempts to reconnect to a node after the node has been marked as recovery mode.", "slaveTransitExpiration": "Slave transfer timeout (seconds)", "slaveTransitExpirationDes": "Maximum time that can be consumed by a slave to execute a file transfer task.", - "nodesCommunication": "Node communication" + "nodesCommunication": "Node communication", + "cannotDeleteDefaultTheme": "Cannot delete default theme.", + "keepAtLeastOneTheme": "Please reserve at least one theme.", + "duplicatedThemePrimaryColor": "Duplicated primart color.", + "themes": "Themes", + "colors": "Colors", + "themeConfig": "Configs", + "actions": "Actions", + "wrongFormat": "Incorrect format.", + "createNewTheme": "Create new theme", + "themeConfigDoc": "https://v4.mui.com/customization/default-theme/", + "themeConfigDes": "Full available configurations can be referred at <0>Default Theme - Material-UI.", + "defaultTheme": "Default theme", + "defaultThemeDes": "The default them to use when the user does not specify a preferred one.", + "appearance": "Appearance", + "personalFileListView": "Default view for personal file list", + "personalFileListViewDes": "The default display view to use when the user does not specify a preferred one.", + "sharedFileListView": "Default view for shared file list", + "sharedFileListViewDes": "The default display view to use when the user does not specify a preferred one.", + "primaryColor": "Primary color", + "primaryColorText": "Text on primary color", + "secondaryColor": "Secondary color", + "secondaryColorText": "Text on secondary color" } } \ No newline at end of file diff --git a/public/locales/zh-CN/dashboard.json b/public/locales/zh-CN/dashboard.json index 9a3a51c..0e99bbc 100644 --- a/public/locales/zh-CN/dashboard.json +++ b/public/locales/zh-CN/dashboard.json @@ -159,6 +159,28 @@ "heartbeatRecoverModeIntervalDes": "节点因异常被主机标记为恢复模式后，主机尝试重新连接节点的间隔", "slaveTransitExpiration": "从机中转超时（秒）", "slaveTransitExpirationDes": "从机执行文件中转任务可消耗的最长时间", - "nodesCommunication": "节点通信" + "nodesCommunication": "节点通信", + "cannotDeleteDefaultTheme": "不能删除默认配色", + "keepAtLeastOneTheme": "请至少保留一个配色方案", + "duplicatedThemePrimaryColor": "主色调不能与已有配色重复", + "themes": "主题配色", + "colors": "关键色", + "themeConfig": "色彩配置", + "actions": "操作", + "wrongFormat": "格式不正确", + "createNewTheme": "新建配色方案", + "themeConfigDoc": "https://v4.mui.com/zh/customization/default-theme/", + "themeConfigDes": "完整的配置项可在 <0>默认主题 - Material-UI 查阅。", + "defaultTheme": "默认配色", + "defaultThemeDes": "用户未指定偏好配色时，站点默认使用的配色方案", + "appearance": "界面", + "personalFileListView": "个人文件列表默认样式", + "personalFileListViewDes": "用户未指定偏好样式时，个人文件页面列表默认样式", + "sharedFileListView": "目录分享页列表默认样式", + "sharedFileListViewDes": "用户未指定偏好样式时，目录分享页面的默认样式", + "primaryColor": "主色调", + "primaryColorText": "主色调文字", + "secondaryColor": "辅色调", + "secondaryColorText": "辅色调文字" } } \ No newline at end of file diff --git a/src/component/Admin/Dialogs/CreateTheme.js b/src/component/Admin/Dialogs/CreateTheme.js index c493f08..24eed79 100644 --- a/src/component/Admin/Dialogs/CreateTheme.js +++ b/src/component/Admin/Dialogs/CreateTheme.js @@ -14,6 +14,7 @@ import { Add, Menu } from "@material-ui/icons"; import { ThemeProvider } from "@material-ui/styles"; import React, { useCallback, useState } from "react"; import { CompactPicker } from "react-color"; +import { useTranslation } from "react-i18next"; const useStyles = makeStyles((theme) => ({ picker: { @@ -37,6 +38,8 @@ const useStyles = makeStyles((theme) => ({ })); export default function CreateTheme({ open, onClose, onSubmit }) { + const { t } = useTranslation("dashboard", { keyPrefix: "settings" }); + const { t: tGlobal } = useTranslation("common"); const classes = useStyles(); const [theme, setTheme] = useState({ palette: { @@ -66,7 +69,7 @@ export default function CreateTheme({ open, onClose, onSubmit }) { - 主色调 + {t("primaryColor")} - 辅色调 + {t("secondaryColor")} - 主色调文字 + {t("primaryColorText")} - 辅色调文字 + {t("secondaryColorText")}
diff --git a/src/component/Admin/Setting/Theme.js b/src/component/Admin/Setting/Theme.js index dee17f0..63e7e53 100644 --- a/src/component/Admin/Setting/Theme.js +++ b/src/component/Admin/Setting/Theme.js @@ -21,6 +21,7 @@ import { useDispatch } from "react-redux"; import { toggleSnackbar } from "../../../redux/explorer"; import API from "../../../middleware/Api"; import CreateTheme from "../Dialogs/CreateTheme"; +import { Trans, useTranslation } from "react-i18next"; const useStyles = makeStyles((theme) => ({ root: { @@ -51,6 +52,8 @@ const useStyles = makeStyles((theme) => ({ })); export default function Theme() { + const { t } = useTranslation("dashboard", { keyPrefix: "settings" }); + const { t: tApp } = useTranslation(); const classes = useStyles(); const [loading, setLoading] = useState(false); const [theme, setTheme] = useState({}); @@ -73,11 +76,16 @@ export default function Theme() { const deleteTheme = (color) => { if (color === options.defaultTheme) { - ToggleSnackbar("top", "right", "不能删除默认配色", "warning"); + ToggleSnackbar( + "top", + "right", + t("cannotDeleteDefaultTheme"), + "warning" + ); return; } if (Object.keys(theme).length <= 1) { - ToggleSnackbar("top", "right", "请至少保留一个配色方案", "warning"); + ToggleSnackbar("top", "right", t("keepAtLeastOneTheme"), "warning"); return; } const themeCopy = { ...theme }; @@ -95,7 +103,7 @@ export default function Theme() { ToggleSnackbar( "top", "right", - "主色调不能与已有配色重复", + t("duplicatedThemePrimaryColor"), "warning" ); return; @@ -157,7 +165,7 @@ export default function Theme() { options: option, }) .then(() => { - ToggleSnackbar("top", "right", "设置已更改", "success"); + ToggleSnackbar("top", "right", t("saved"), "success"); }) .catch((error) => { ToggleSnackbar("top", "right", error.message, "error"); @@ -172,16 +180,18 @@ export default function Theme() {
- 主题配色 + {t("themes")}
- 关键色 - 色彩配置 - 操作 + {t("colors")} + + {t("themeConfig")} + + {t("actions")} @@ -225,7 +235,7 @@ export default function Theme() { error={themeConfigError[k]} helperText={ themeConfigError[k] && - "格式不正确" + t("wrongFormat") } fullWidth multiline @@ -307,21 +317,22 @@ export default function Theme() { style={{ marginTop: 8 }} onClick={() => setCreate(true)} > - 新建配色方案 + {t("createNewTheme")} - 完整的配置项可在{" "} - - 默认主题 - Material-UI - {" "} - 查阅。 + , + ]} + /> @@ -329,7 +340,7 @@ export default function Theme() {
- 默认配色 + {t("defaultTheme")} - 大图标 - - 小图标 + + {tApp("fileManager.gridViewLarge")} + + + {tApp("fileManager.gridViewSmall")} + + + {tApp("fileManager.listView")} - 列表 - 用户未指定偏好样式时，个人文件页面列表默认样式 + {t("personalFileListViewDes")}
@@ -403,21 +418,25 @@ export default function Theme() {
- 目录分享页列表默认样式 + {t("sharedFileListView")} - 用户未指定偏好样式时，目录分享页面的默认样式 + {t("sharedFileListViewDes")}
@@ -431,7 +450,7 @@ export default function Theme() { variant={"contained"} color={"primary"} > - 保存 + {t("save")}