imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use semantic headings for spellcheck and language (#10959)

Browse source
This commit is contained in:
Kerry 2023-05-24 11:34:56 +12:00 • committed by GitHub
parent 2f2804f8af
commit f491f2f951
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -98,7 +98,7 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
);
return (
<div className="mx_SpellCheckLanguages">
<>
{existingSpellCheckLanguages}
<form onSubmit={this.onAddClick} noValidate={true}>
<SpellCheckLanguagesDropdown
@ -108,7 +108,7 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
/>
{addButton}
</form>
</div>
</>
);
}
}

19
src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
View file

@ -57,6 +57,7 @@ import { IS_MAC } from "../../../../../Keyboard";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection from "../../shared/SettingsSubsection";
import { SettingsSubsectionHeading } from "../../shared/SettingsSubsectionHeading";
interface IProps {
closeSettingsFn: () => void;
@ -417,31 +418,31 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
private renderLanguageSection(): JSX.Element {
// TODO: Convert to new-styled Field
return (
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Language and region")}</span>
<SettingsSubsection heading={_t("Language and region")} stretchContent>
<LanguageDropdown
className="mx_GeneralUserSettingsTab_section_languageInput"
onOptionChange={this.onLanguageChange}
value={this.state.language}
/>
</div>
</SettingsSubsection>
);
}
private renderSpellCheckSection(): JSX.Element {
const heading = (
<SettingsSubsectionHeading heading={_t("Spell check")}>
<ToggleSwitch checked={!!this.state.spellCheckEnabled} onChange={this.onSpellCheckEnabledChange} />
</SettingsSubsectionHeading>
);
return (
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--spellcheck">
<span className="mx_SettingsTab_subheading">
{_t("Spell check")}
<ToggleSwitch checked={!!this.state.spellCheckEnabled} onChange={this.onSpellCheckEnabledChange} />
</span>
<SettingsSubsection heading={heading} stretchContent>
{this.state.spellCheckEnabled && !IS_MAC && (
<SpellCheckSettings
languages={this.state.spellCheckLanguages}
onLanguagesChange={this.onSpellCheckLanguagesChange}
/>
)}
</div>
</SettingsSubsection>
);
}