OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

use semantic headings for spellcheck and language (#10959)

pull/28788/head^2
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
res/css/views/settings/_SpellCheckLanguages.pcss
View File

@ -17,7 +17,6 @@ limitations under the License.
.mx_ExistingSpellCheckLanguage { .mx_ExistingSpellCheckLanguage {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 5px;
} }
.mx_ExistingSpellCheckLanguage_language { .mx_ExistingSpellCheckLanguage_language {
@ -26,10 +25,5 @@ limitations under the License.
} }
.mx_GeneralUserSettingsTab_spellCheckLanguageInput { .mx_GeneralUserSettingsTab_spellCheckLanguageInput {
margin-top: 1em; margin-bottom: $spacing-8;
margin-bottom: 1em;
}
.mx_SpellCheckLanguages {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
} }

7
res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
View File

@ -41,8 +41,7 @@ limitations under the License.
.mx_GeneralUserSettingsTab_section--account .mx_EmailAddresses, .mx_GeneralUserSettingsTab_section--account .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_section--account .mx_PhoneNumbers, .mx_GeneralUserSettingsTab_section--account .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing, .mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing {
.mx_GeneralUserSettingsTab_section_languageInput {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
} }
@ -62,10 +61,6 @@ limitations under the License.
margin-left: 5px; margin-left: 5px;
} }
.mx_GeneralUserSettingsTab_section--spellcheck .mx_ToggleSwitch {
float: right;
}
.mx_GeneralUserSettingsTab_heading_warningIcon { .mx_GeneralUserSettingsTab_heading_warningIcon {
vertical-align: middle; vertical-align: middle;
} }

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

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