Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Humanize spell check language labels #12409

Merged
merged 2 commits into from
Apr 10, 2024
Merged

Humanize spell check language labels #12409

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
10556ef
Humanize spell check language labels
t3chguy Apr 9, 2024
3be4533
Comment
t3chguy Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/components/views/settings/SpellCheckSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,11 @@ import React from "react";

import SpellCheckLanguagesDropdown from "../../../components/views/elements/SpellCheckLanguagesDropdown";
import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton";
import { _t } from "../../../languageHandler";
import { _t, getUserLanguage } from "../../../languageHandler";

interface ExistingSpellCheckLanguageIProps {
language: string;
label?: string;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
onRemoved(language: string): void;
}

Expand All @@ -45,7 +46,9 @@ export class ExistingSpellCheckLanguage extends React.Component<ExistingSpellChe
public render(): React.ReactNode {
return (
<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">
{_t("action|remove")}
</AccessibleButton>
Expand Down Expand Up @@ -87,8 +90,9 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
};

public render(): React.ReactNode {
const intl = new Intl.DisplayNames([getUserLanguage()], { type: "language", style: "short" });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does style: "short" actually do anything here, ooi?

If not, I'd favour omitting it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes.

image

The default is long.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames#options

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 = (
Expand Down
Loading