feat: translate clienttheme plugin as test
This commit is contained in:
parent
b92a21ac7d
commit
51770e96f2
6
.vscode/i18n-ally-custom-framework.yml
vendored
6
.vscode/i18n-ally-custom-framework.yml
vendored
|
@ -5,12 +5,12 @@ languageIds:
|
||||||
- typescriptreact
|
- typescriptreact
|
||||||
|
|
||||||
usageMatchRegex:
|
usageMatchRegex:
|
||||||
- "[^\\w\\d]\\$t\\(['\"`]({key})['\"`]"
|
- "[^\\w\\d]\\t\\(['\"`]({key})['\"`]"
|
||||||
- "<Translate ?.* i18nKey=\\{?['\"`]({key})['\"`]"
|
- "<Translate ?.* i18nKey=\\{?['\"`]({key})['\"`]"
|
||||||
|
|
||||||
refactorTemplates:
|
refactorTemplates:
|
||||||
- "$t(\"$1\")"
|
- "t(\"$1\")"
|
||||||
- "{$t(\"$1\")}"
|
- "{t(\"$1\")}"
|
||||||
- "<Translate i18nKey=\"$1\" />"
|
- "<Translate i18nKey=\"$1\" />"
|
||||||
|
|
||||||
monopoly: true
|
monopoly: true
|
||||||
|
|
|
@ -65,8 +65,8 @@ function ThemeSettings() {
|
||||||
<div className="client-theme-settings">
|
<div className="client-theme-settings">
|
||||||
<div className="client-theme-container">
|
<div className="client-theme-container">
|
||||||
<div className="client-theme-settings-labels">
|
<div className="client-theme-settings-labels">
|
||||||
<Forms.FormTitle tag="h3">Theme Color</Forms.FormTitle>
|
<Forms.FormTitle tag="h3">{t("clientTheme.settingsTitle")}</Forms.FormTitle>
|
||||||
<Forms.FormText>Add a color to your Discord client theme</Forms.FormText>
|
<Forms.FormText>{t("clientTheme.settingsDescription")}</Forms.FormText>
|
||||||
</div>
|
</div>
|
||||||
<ColorPicker
|
<ColorPicker
|
||||||
color={parseInt(settings.store.color, 16)}
|
color={parseInt(settings.store.color, 16)}
|
||||||
|
@ -79,12 +79,12 @@ function ThemeSettings() {
|
||||||
<Forms.FormDivider className={classes(Margins.top8, Margins.bottom8)} />
|
<Forms.FormDivider className={classes(Margins.top8, Margins.bottom8)} />
|
||||||
<div className={`client-theme-contrast-warning ${contrastWarning ? (isLightTheme ? "theme-dark" : "theme-light") : ""}`}>
|
<div className={`client-theme-contrast-warning ${contrastWarning ? (isLightTheme ? "theme-dark" : "theme-light") : ""}`}>
|
||||||
<div className="client-theme-warning">
|
<div className="client-theme-warning">
|
||||||
<Forms.FormText>Warning, your theme won't look good:</Forms.FormText>
|
<Forms.FormText>{t("clientTheme.warningTitle")}</Forms.FormText>
|
||||||
{contrastWarning && <Forms.FormText>Selected color won't contrast well with text</Forms.FormText>}
|
{contrastWarning && <Forms.FormText>{t("clientTheme.warnings.badContrast")}</Forms.FormText>}
|
||||||
{nitroThemeEnabled && <Forms.FormText>Nitro themes aren't supported</Forms.FormText>}
|
{nitroThemeEnabled && <Forms.FormText>{t("clientTheme.warnings.nitro")}</Forms.FormText>}
|
||||||
</div>
|
</div>
|
||||||
{(contrastWarning && fixableContrast) && <Button onClick={() => setTheme(oppositeTheme)} color={Button.Colors.RED}>Switch to {oppositeTheme} mode</Button>}
|
{(contrastWarning && fixableContrast) && <Button onClick={() => setTheme(oppositeTheme)} color={Button.Colors.RED}>{t(`clientTheme.switchToOpposite.${oppositeTheme}`)}</Button>}
|
||||||
{(nitroThemeEnabled) && <Button onClick={() => setTheme(theme)} color={Button.Colors.RED}>Disable Nitro Theme</Button>}
|
{(nitroThemeEnabled) && <Button onClick={() => setTheme(theme)} color={Button.Colors.RED}>{t("clientTheme.disableNitroTheme")}</Button>}
|
||||||
</div>
|
</div>
|
||||||
</>)}
|
</>)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -93,18 +93,18 @@ function ThemeSettings() {
|
||||||
|
|
||||||
const settings = definePluginSettings({
|
const settings = definePluginSettings({
|
||||||
color: {
|
color: {
|
||||||
description: "Color your Discord client theme will be based around. Light mode isn't supported",
|
description: t("clientTheme.colorDescription"),
|
||||||
type: OptionType.COMPONENT,
|
type: OptionType.COMPONENT,
|
||||||
default: "313338",
|
default: "313338",
|
||||||
component: () => <ThemeSettings />
|
component: () => <ThemeSettings />
|
||||||
},
|
},
|
||||||
resetColor: {
|
resetColor: {
|
||||||
description: "Reset Theme Color",
|
description: t("clientTheme.resetColorDescription"),
|
||||||
type: OptionType.COMPONENT,
|
type: OptionType.COMPONENT,
|
||||||
default: "313338",
|
default: "313338",
|
||||||
component: () => (
|
component: () => (
|
||||||
<Button onClick={() => onPickColor(0x313338)}>
|
<Button onClick={() => onPickColor(0x313338)}>
|
||||||
Reset Theme Color
|
{t("clientTheme.resetButton")}
|
||||||
</Button>
|
</Button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,19 @@
|
||||||
{
|
{
|
||||||
|
"colorDescription": "Color your Discord client theme will be based around. Light mode isn't supported",
|
||||||
"description": "Recreation of the old client theme experiment. Add a color to your Discord client theme",
|
"description": "Recreation of the old client theme experiment. Add a color to your Discord client theme",
|
||||||
"edit": "Edit ClientTheme"
|
"disableNitroTheme": "Disable Nitro Theme",
|
||||||
|
"edit": "Edit ClientTheme",
|
||||||
|
"resetButton": "Reset Theme Color",
|
||||||
|
"resetColorDescription": "Reset Theme Color",
|
||||||
|
"settingsDescription": "Add a color to your Discord client theme",
|
||||||
|
"settingsTitle": "Theme Color",
|
||||||
|
"switchToOpposite": {
|
||||||
|
"dark": "Switch to dark mode",
|
||||||
|
"light": "Switch to light mode"
|
||||||
|
},
|
||||||
|
"warningTitle": "Warning, your theme won't look good:",
|
||||||
|
"warnings": {
|
||||||
|
"badContrast": "Selected color won't contrast well with text",
|
||||||
|
"nitro": "Nitro themes aren't supported"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue