mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 10:15:43 +03:00
Code Issues Projects Releases Packages Wiki Activity

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

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_PhoneNumbers,
.mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing,
.mx_GeneralUserSettingsTab_section_languageInput {
.mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
}
@ -62,10 +61,6 @@ limitations under the License.
margin-left: 5px;
}
.mx_GeneralUserSettingsTab_section--spellcheck .mx_ToggleSwitch {
float: right;
}
.mx_GeneralUserSettingsTab_heading_warningIcon {
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 (
<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>
);
}