Move language settings to 'preferences' (#12723)
* Move language settings to 'preferences' Their new home is in this tab * Update snapshot * Move playwright test code * Add test * tests * Update screenshot
This commit is contained in:
David Baker
GitHub
parent
dcf7643d4a
commit
81f29d13dc
9 changed files with 198 additions and 110 deletions
|
|
@ -22,25 +22,17 @@ import { logger } from "matrix-js-sdk/src/logger";
|
|||
|
||||
import { UserFriendlyError, _t } from "../../../../../languageHandler";
|
||||
import UserProfileSettings from "../../UserProfileSettings";
|
||||
import * as languageHandler from "../../../../../languageHandler";
|
||||
import SettingsStore from "../../../../../settings/SettingsStore";
|
||||
import LanguageDropdown from "../../../elements/LanguageDropdown";
|
||||
import SpellCheckSettings from "../../SpellCheckSettings";
|
||||
import AccessibleButton from "../../../elements/AccessibleButton";
|
||||
import DeactivateAccountDialog from "../../../dialogs/DeactivateAccountDialog";
|
||||
import PlatformPeg from "../../../../../PlatformPeg";
|
||||
import Modal from "../../../../../Modal";
|
||||
import { SettingLevel } from "../../../../../settings/SettingLevel";
|
||||
import { UIFeature } from "../../../../../settings/UIFeature";
|
||||
import ErrorDialog, { extractErrorMessageFromError } from "../../../dialogs/ErrorDialog";
|
||||
import ChangePassword from "../../ChangePassword";
|
||||
import SetIntegrationManager from "../../SetIntegrationManager";
|
||||
import ToggleSwitch from "../../../elements/ToggleSwitch";
|
||||
import { IS_MAC } from "../../../../../Keyboard";
|
||||
import SettingsTab from "../SettingsTab";
|
||||
import { SettingsSection } from "../../shared/SettingsSection";
|
||||
import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
|
||||
import { SettingsSubsectionHeading } from "../../shared/SettingsSubsectionHeading";
|
||||
import { SDKContext } from "../../../../../contexts/SDKContext";
|
||||
import UserPersonalInfoSettings from "../../UserPersonalInfoSettings";
|
||||
|
||||
|
|
@ -49,9 +41,6 @@ interface IProps {
|
|||
}
|
||||
|
||||
interface IState {
|
||||
language: string;
|
||||
spellCheckEnabled?: boolean;
|
||||
spellCheckLanguages: string[];
|
||||
canChangePassword: boolean;
|
||||
idServerName?: string;
|
||||
externalAccountManagementUrl?: string;
|
||||
|
|
@ -69,9 +58,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
|
|||
this.context = context;
|
||||
|
||||
this.state = {
|
||||
language: languageHandler.getCurrentLanguage(),
|
||||
spellCheckEnabled: false,
|
||||
spellCheckLanguages: [],
|
||||
canChangePassword: false,
|
||||
canMake3pidChanges: false,
|
||||
canSetDisplayName: false,
|
||||
|
|
@ -81,21 +67,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
|
|||
this.getCapabilities();
|
||||
}
|
||||
|
||||
public async componentDidMount(): Promise<void> {
|
||||
const plat = PlatformPeg.get();
|
||||
const [spellCheckEnabled, spellCheckLanguages] = await Promise.all([
|
||||
plat?.getSpellCheckEnabled(),
|
||||
plat?.getSpellCheckLanguages(),
|
||||
]);
|
||||
|
||||
if (spellCheckLanguages) {
|
||||
this.setState({
|
||||
spellCheckEnabled,
|
||||
spellCheckLanguages,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private async getCapabilities(): Promise<void> {
|
||||
const cli = this.context.client!;
|
||||
|
||||
|
|
@ -127,28 +98,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
|
|||
});
|
||||
}
|
||||
|
||||
private onLanguageChange = (newLanguage: string): void => {
|
||||
if (this.state.language === newLanguage) return;
|
||||
|
||||
SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLanguage);
|
||||
this.setState({ language: newLanguage });
|
||||
const platform = PlatformPeg.get();
|
||||
if (platform) {
|
||||
platform.setLanguage([newLanguage]);
|
||||
platform.reload();
|
||||
}
|
||||
};
|
||||
|
||||
private onSpellCheckLanguagesChange = (languages: string[]): void => {
|
||||
this.setState({ spellCheckLanguages: languages });
|
||||
PlatformPeg.get()?.setSpellCheckLanguages(languages);
|
||||
};
|
||||
|
||||
private onSpellCheckEnabledChange = (spellCheckEnabled: boolean): void => {
|
||||
this.setState({ spellCheckEnabled });
|
||||
PlatformPeg.get()?.setSpellCheckEnabled(spellCheckEnabled);
|
||||
};
|
||||
|
||||
private onPasswordChangeError = (err: Error): void => {
|
||||
logger.error("Failed to change password: " + err);
|
||||
|
||||
|
|
@ -228,37 +177,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
|
|||
);
|
||||
}
|
||||
|
||||
private renderLanguageSection(): JSX.Element {
|
||||
// TODO: Convert to new-styled Field
|
||||
return (
|
||||
<SettingsSubsection heading={_t("settings|general|language_section")} stretchContent>
|
||||
<LanguageDropdown
|
||||
className="mx_GeneralUserSettingsTab_section_languageInput"
|
||||
onOptionChange={this.onLanguageChange}
|
||||
value={this.state.language}
|
||||
/>
|
||||
</SettingsSubsection>
|
||||
);
|
||||
}
|
||||
|
||||
private renderSpellCheckSection(): JSX.Element {
|
||||
const heading = (
|
||||
<SettingsSubsectionHeading heading={_t("settings|general|spell_check_section")}>
|
||||
<ToggleSwitch checked={!!this.state.spellCheckEnabled} onChange={this.onSpellCheckEnabledChange} />
|
||||
</SettingsSubsectionHeading>
|
||||
);
|
||||
return (
|
||||
<SettingsSubsection heading={heading} stretchContent>
|
||||
{this.state.spellCheckEnabled && !IS_MAC && (
|
||||
<SpellCheckSettings
|
||||
languages={this.state.spellCheckLanguages}
|
||||
onLanguagesChange={this.onSpellCheckLanguagesChange}
|
||||
/>
|
||||
)}
|
||||
</SettingsSubsection>
|
||||
);
|
||||
}
|
||||
|
||||
private renderManagementSection(): JSX.Element {
|
||||
// TODO: Improve warning text for account deactivation
|
||||
return (
|
||||
|
|
@ -283,9 +201,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
|
|||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
const plaf = PlatformPeg.get();
|
||||
const supportsMultiLanguageSpellCheck = plaf?.supportsSpellCheckSettings();
|
||||
|
||||
let accountManagementSection: JSX.Element | undefined;
|
||||
const isAccountManagedExternally = !!this.state.externalAccountManagementUrl;
|
||||
if (SettingsStore.getValue(UIFeature.Deactivate) && !isAccountManagedExternally) {
|
||||
|
|
@ -302,8 +217,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
|
|||
/>
|
||||
<UserPersonalInfoSettings canMake3pidChanges={this.state.canMake3pidChanges} />
|
||||
{this.renderAccountSection()}
|
||||
{this.renderLanguageSection()}
|
||||
{supportsMultiLanguageSpellCheck ? this.renderSpellCheckSection() : null}
|
||||
</SettingsSection>
|
||||
{this.renderIntegrationManagerSection()}
|
||||
{accountManagementSection}
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import { _t } from "../../../../../languageHandler";
|
||||
import { _t, getCurrentLanguage } from "../../../../../languageHandler";
|
||||
import { UseCase } from "../../../../../settings/enums/UseCase";
|
||||
import SettingsStore from "../../../../../settings/SettingsStore";
|
||||
import Field from "../../../elements/Field";
|
||||
|
|
@ -33,6 +33,11 @@ import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingP
|
|||
import SettingsSubsection from "../../shared/SettingsSubsection";
|
||||
import SettingsTab from "../SettingsTab";
|
||||
import { SettingsSection } from "../../shared/SettingsSection";
|
||||
import LanguageDropdown from "../../../elements/LanguageDropdown";
|
||||
import PlatformPeg from "../../../../../PlatformPeg";
|
||||
import { IS_MAC } from "../../../../../Keyboard";
|
||||
import SpellCheckSettings from "../../SpellCheckSettings";
|
||||
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
|
||||
|
||||
interface IProps {
|
||||
closeSettingsFn(success: boolean): void;
|
||||
|
|
@ -44,6 +49,79 @@ interface IState {
|
|||
readMarkerOutOfViewThresholdMs: string;
|
||||
}
|
||||
|
||||
const LanguageSection: React.FC = () => {
|
||||
const [language, setLanguage] = useState(getCurrentLanguage());
|
||||
|
||||
const onLanguageChange = useCallback(
|
||||
(newLanguage: string) => {
|
||||
if (language === newLanguage) return;
|
||||
|
||||
SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLanguage);
|
||||
setLanguage(newLanguage);
|
||||
const platform = PlatformPeg.get();
|
||||
if (platform) {
|
||||
platform.setLanguage([newLanguage]);
|
||||
platform.reload();
|
||||
}
|
||||
},
|
||||
[language],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="mx_SettingsSubsection_contentStretch">
|
||||
{_t("settings|general|application_language")}
|
||||
<LanguageDropdown
|
||||
className="mx_GeneralUserSettingsTab_section_languageInput"
|
||||
onOptionChange={onLanguageChange}
|
||||
value={language}
|
||||
/>
|
||||
<div className="mx_GeneralUserSettingsTab_section_hint">
|
||||
{_t("settings|general|application_language_reload_hint")}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SpellCheckSection: React.FC = () => {
|
||||
const [spellCheckEnabled, setSpellCheckEnabled] = useState<boolean | undefined>();
|
||||
const [spellCheckLanguages, setSpellCheckLanguages] = useState<string[] | undefined>();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const plaf = PlatformPeg.get();
|
||||
const [enabled, langs] = await Promise.all([plaf?.getSpellCheckEnabled(), plaf?.getSpellCheckLanguages()]);
|
||||
|
||||
setSpellCheckEnabled(enabled);
|
||||
setSpellCheckLanguages(langs || undefined);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const onSpellCheckEnabledChange = useCallback((enabled: boolean) => {
|
||||
setSpellCheckEnabled(enabled);
|
||||
PlatformPeg.get()?.setSpellCheckEnabled(enabled);
|
||||
}, []);
|
||||
|
||||
const onSpellCheckLanguagesChange = useCallback((languages: string[]): void => {
|
||||
setSpellCheckLanguages(languages);
|
||||
PlatformPeg.get()?.setSpellCheckLanguages(languages);
|
||||
}, []);
|
||||
|
||||
if (!PlatformPeg.get()?.supportsSpellCheckSettings()) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<LabelledToggleSwitch
|
||||
label={_t("settings|general|allow_spellcheck")}
|
||||
value={Boolean(spellCheckEnabled)}
|
||||
onChange={onSpellCheckEnabledChange}
|
||||
/>
|
||||
{spellCheckEnabled && spellCheckLanguages !== undefined && !IS_MAC && (
|
||||
<SpellCheckSettings languages={spellCheckLanguages} onLanguagesChange={onSpellCheckLanguagesChange} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default class PreferencesUserSettingsTab extends React.Component<IProps, IState> {
|
||||
private static ROOM_LIST_SETTINGS = ["breadcrumbs", "FTUE.userOnboardingButton"];
|
||||
|
||||
|
|
@ -146,6 +224,12 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
|
|||
return (
|
||||
<SettingsTab data-testid="mx_PreferencesUserSettingsTab">
|
||||
<SettingsSection>
|
||||
{/* The heading string is still 'general' from where it was moved, but this section should become 'general' */}
|
||||
<SettingsSubsection heading={_t("settings|general|language_section")}>
|
||||
<LanguageSection />
|
||||
<SpellCheckSection />
|
||||
</SettingsSubsection>
|
||||
|
||||
{roomListSettings.length > 0 && (
|
||||
<SettingsSubsection heading={_t("settings|preferences|room_list_heading")}>
|
||||
{this.renderGroup(roomListSettings)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue