diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index d733ebf5a1e..868ea4fec50 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -37,6 +37,7 @@ limitations under the License. color: $primary-content; margin-top: 10px; /* TODO: Use a spacing variable */ margin-bottom: 10px; /* TODO: Use a spacing variable */ + margin-right: 100px; /* TODO: Use a spacing variable */ &:nth-child(n + 2) { margin-top: var(--SettingsTab_heading_nth_child-margin-top); @@ -50,6 +51,7 @@ limitations under the License. color: $primary-content; margin-top: $spacing-12; margin-bottom: 10px; /* TODO: Use a spacing variable */ + margin-right: 100px; /* TODO: Use a spacing variable */ } .mx_SettingsTab_subsectionText { diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss index 070deafa0e2..d48314b4384 100644 --- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss +++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss @@ -46,3 +46,7 @@ limitations under the License. .mx_GeneralUserSettingsTab_warningIcon { vertical-align: middle; } + +.mx_SettingsTab_section_spellcheck .mx_ToggleSwitch { + float: right; +} diff --git a/src/BasePlatform.ts b/src/BasePlatform.ts index 2a0061836d5..9efed3b7ea5 100644 --- a/src/BasePlatform.ts +++ b/src/BasePlatform.ts @@ -151,7 +151,7 @@ export default abstract class BasePlatform { * Return true if platform supports multi-language * spell-checking, otherwise false. */ - public supportsMultiLanguageSpellCheck(): boolean { + public supportsSpellCheckSettings(): boolean { return false; } @@ -274,6 +274,12 @@ export default abstract class BasePlatform { public setLanguage(preferredLangs: string[]) {} + public setSpellCheckEnabled(enabled: boolean): void {} + + public async getSpellCheckEnabled(): Promise { + return null; + } + public setSpellCheckLanguages(preferredLangs: string[]) {} public getSpellCheckLanguages(): Promise | null { diff --git a/src/components/views/elements/Dropdown.tsx b/src/components/views/elements/Dropdown.tsx index 4f572875a57..b9d8122ec55 100644 --- a/src/components/views/elements/Dropdown.tsx +++ b/src/components/views/elements/Dropdown.tsx @@ -82,6 +82,8 @@ interface IProps { // width. menuWidth?: number; searchEnabled?: boolean; + // Placeholder to show when no value is selected + placeholder?: string; // Called when the selected option changes onOptionChange(dropdownKey: string): void; // Called when the value of the search field changes @@ -362,7 +364,7 @@ export default class Dropdown extends React.Component { this.props.getShortOption(this.props.value) : this.childrenByKey[this.props.value]; currentValue =
- { selectedChild } + { selectedChild || this.props.placeholder }
; } diff --git a/src/components/views/elements/SpellCheckLanguagesDropdown.tsx b/src/components/views/elements/SpellCheckLanguagesDropdown.tsx index a269ac00106..b7a8083e72d 100644 --- a/src/components/views/elements/SpellCheckLanguagesDropdown.tsx +++ b/src/components/views/elements/SpellCheckLanguagesDropdown.tsx @@ -116,7 +116,9 @@ export default class SpellCheckLanguagesDropdown extends React.Component + label={_t("Language Dropdown")} + placeholder={_t("Choose a locale")} + > { options } ; } diff --git a/src/components/views/elements/ToggleSwitch.tsx b/src/components/views/elements/ToggleSwitch.tsx index 154a89a73ff..f56633786a9 100644 --- a/src/components/views/elements/ToggleSwitch.tsx +++ b/src/components/views/elements/ToggleSwitch.tsx @@ -25,7 +25,7 @@ interface IProps { checked: boolean; // Whether or not the user can interact with the switch - disabled: boolean; + disabled?: boolean; // Called when the checked state changes. First argument will be the new state. onChange(checked: boolean): void; diff --git a/src/components/views/settings/SpellCheckSettings.tsx b/src/components/views/settings/SpellCheckSettings.tsx index 83c3492a874..abccadb74f5 100644 --- a/src/components/views/settings/SpellCheckSettings.tsx +++ b/src/components/views/settings/SpellCheckSettings.tsx @@ -72,6 +72,7 @@ export default class SpellCheckLanguages extends React.Component void; @@ -57,6 +59,7 @@ interface IProps { interface IState { language: string; + spellCheckEnabled: boolean; spellCheckLanguages: string[]; haveIdServer: boolean; serverSupportsSeparateAddAndBind: boolean; @@ -85,6 +88,7 @@ export default class GeneralUserSettingsTab extends React.Component { - const plaf = PlatformPeg.get(); - if (plaf) { + const plat = PlatformPeg.get(); + const [spellCheckEnabled, spellCheckLanguages] = await Promise.all([ + plat.getSpellCheckEnabled(), + plat.getSpellCheckLanguages(), + ]); + + if (spellCheckLanguages) { this.setState({ - spellCheckLanguages: await plaf.getSpellCheckLanguages(), + spellCheckEnabled, + spellCheckLanguages, }); } } @@ -238,11 +248,12 @@ export default class GeneralUserSettingsTab extends React.Component { this.setState({ spellCheckLanguages: languages }); + PlatformPeg.get()?.setSpellCheckLanguages(languages); + }; - const plaf = PlatformPeg.get(); - if (plaf) { - plaf.setSpellCheckLanguages(languages); - } + private onSpellCheckEnabledChange = (spellCheckEnabled: boolean): void => { + this.setState({ spellCheckEnabled }); + PlatformPeg.get()?.setSpellCheckEnabled(spellCheckEnabled); }; private onPasswordChangeError = (err): void => { @@ -368,12 +379,18 @@ export default class GeneralUserSettingsTab extends React.Component - { _t("Spell check dictionaries") } - + + { _t("Spell check") } + + + { (this.state.spellCheckEnabled && !IS_MAC) && + /> } ); } @@ -449,7 +466,7 @@ export default class GeneralUserSettingsTab extends React.Component