feat: translate clienttheme plugin as test

This commit is contained in:
Lewis Crichton 2024-06-11 23:12:13 +01:00
parent b92a21ac7d
commit 51770e96f2
No known key found for this signature in database
3 changed files with 29 additions and 14 deletions

View file

@ -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

View file

@ -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>
) )
} }

View file

@ -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"
}
} }