mirror of https://github.com/vector-im/riot-web
Humanize spell check language labels (#12409)
* 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>pull/28217/head
parent
d35fce198c
commit
c40fea008a
|
@ -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 = (
|
||||||
|
|
Loading…
Reference in New Issue