PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Humanize spell check language labels (#12409)

Browse source 
* Humanize spell check language labels

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-04-10 23:33:24 +01:00 committed by GitHub
parent d35fce198c
commit c40fea008a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/views/settings/SpellCheckSettings.tsx
View file

@ -18,10 +18,14 @@ import React from "react";
import SpellCheckLanguagesDropdown from "../../../components/views/elements/SpellCheckLanguagesDropdown"; import SpellCheckLanguagesDropdown from "../../../components/views/elements/SpellCheckLanguagesDropdown";
import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton"; import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton";
import { _t } from "../../../languageHandler"; import { _t, getUserLanguage } from "../../../languageHandler";
interface ExistingSpellCheckLanguageIProps { interface ExistingSpellCheckLanguageIProps {
language: string; language: string;
/**
* The label to render on the component. If not provided, the language code will be used.
*/
label?: string;
onRemoved(language: string): void; onRemoved(language: string): void;
} }
@ -45,7 +49,9 @@ export class ExistingSpellCheckLanguage extends React.Component<ExistingSpellChe
public render(): React.ReactNode { public render(): React.ReactNode {
return ( return (
<div className="mx_ExistingSpellCheckLanguage"> <div className="mx_ExistingSpellCheckLanguage">
<span className="mx_ExistingSpellCheckLanguage_language">{this.props.language}</span> <span className="mx_ExistingSpellCheckLanguage_language">
{this.props.label ?? this.props.language}
</span>
<AccessibleButton onClick={this.onRemove} kind="danger_sm"> <AccessibleButton onClick={this.onRemove} kind="danger_sm">
{_t("action|remove")} {_t("action|remove")}
</AccessibleButton> </AccessibleButton>
@ -87,8 +93,9 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
}; };
public render(): React.ReactNode { public render(): React.ReactNode {
const intl = new Intl.DisplayNames([getUserLanguage()], { type: "language", style: "short" });
const existingSpellCheckLanguages = this.props.languages.map((e) => { const existingSpellCheckLanguages = this.props.languages.map((e) => {
return <ExistingSpellCheckLanguage language={e} onRemoved={this.onRemoved} key={e} />; return <ExistingSpellCheckLanguage language={e} label={intl.of(e)} onRemoved={this.onRemoved} key={e} />;
}); });
const addButton = ( const addButton = (