mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-16 05:11:31 +03:00
Added UI
This commit is contained in:
parent
1db130b8f0
commit
2f988bc97f
2 changed files with 129 additions and 0 deletions
111
src/components/views/settings/SpellCheckSettings.tsx
Normal file
111
src/components/views/settings/SpellCheckSettings.tsx
Normal file
|
@ -0,0 +1,111 @@
|
||||||
|
/*
|
||||||
|
Copyright 2019 New Vector Ltd
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import LanguageDropdown from "../../../components/views/elements/LanguageDropdown";
|
||||||
|
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
|
||||||
|
import {_t} from "../../../languageHandler";
|
||||||
|
|
||||||
|
interface ExistingSpellCheckLanguageIProps {
|
||||||
|
language: string,
|
||||||
|
onRemoved(language: string),
|
||||||
|
};
|
||||||
|
|
||||||
|
interface SpellCheckLanguagesIProps {
|
||||||
|
languages: Array<string>,
|
||||||
|
onLanguagesChange(languages: Array<string>),
|
||||||
|
};
|
||||||
|
|
||||||
|
interface SpellCheckLanguagesIState {
|
||||||
|
newLanguage: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ExistingSpellCheckLanguage extends React.Component<ExistingSpellCheckLanguageIProps> {
|
||||||
|
_onRemove = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
return this.props.onRemoved(this.props.language);
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="mx_ExistingSpellCheckerLanguage">
|
||||||
|
<span className="mx_ExistingSpellCheckerLanguage_language">{this.props.language}</span>
|
||||||
|
<AccessibleButton onClick={this._onRemove} kind="danger_sm">
|
||||||
|
{_t("Remove")}
|
||||||
|
</AccessibleButton>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class SpellCheckLanguages extends React.Component<SpellCheckLanguagesIProps, SpellCheckLanguagesIState> {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
newLanguage: "",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_onRemoved = (language) => {
|
||||||
|
const languages = this.props.languages.filter((e) => e !== language);
|
||||||
|
this.props.onLanguagesChange(languages);
|
||||||
|
};
|
||||||
|
|
||||||
|
_onAddClick = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const language = this.state.newLanguage;
|
||||||
|
|
||||||
|
if (!language) return;
|
||||||
|
if (this.props.languages.includes(language)) return;
|
||||||
|
|
||||||
|
this.props.languages.push(language)
|
||||||
|
this.props.onLanguagesChange(this.props.languages);
|
||||||
|
};
|
||||||
|
|
||||||
|
_onNewLanguageChange = (language: string) => {
|
||||||
|
if (this.state.newLanguage === language) return;
|
||||||
|
this.setState({newLanguage: language});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const existingSpellCheckLanguages = this.props.languages.map((e) => {
|
||||||
|
return <ExistingSpellCheckLanguage language={e} onRemoved={this._onRemoved} key={e} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
let addButton = (
|
||||||
|
<AccessibleButton onClick={this._onAddClick} kind="primary">
|
||||||
|
{_t("Add")}
|
||||||
|
</AccessibleButton>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mx_SpellCheckerLanguages">
|
||||||
|
{existingSpellCheckLanguages}
|
||||||
|
<form onSubmit={this._onAddClick} noValidate={true}
|
||||||
|
className="mx_mx_SpellCheckerLanguages_new">
|
||||||
|
<LanguageDropdown className="mx_GeneralUserSettingsTab_spellCheckLanguageInput"
|
||||||
|
value={this.state.newLanguage}
|
||||||
|
onOptionChange={this._onNewLanguageChange} />
|
||||||
|
{addButton}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
|
@ -22,6 +22,7 @@ import ProfileSettings from "../../ProfileSettings";
|
||||||
import * as languageHandler from "../../../../../languageHandler";
|
import * as languageHandler from "../../../../../languageHandler";
|
||||||
import SettingsStore from "../../../../../settings/SettingsStore";
|
import SettingsStore from "../../../../../settings/SettingsStore";
|
||||||
import LanguageDropdown from "../../../elements/LanguageDropdown";
|
import LanguageDropdown from "../../../elements/LanguageDropdown";
|
||||||
|
import SpellCheckSettings from "../../SpellCheckSettings"
|
||||||
import AccessibleButton from "../../../elements/AccessibleButton";
|
import AccessibleButton from "../../../elements/AccessibleButton";
|
||||||
import DeactivateAccountDialog from "../../../dialogs/DeactivateAccountDialog";
|
import DeactivateAccountDialog from "../../../dialogs/DeactivateAccountDialog";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
|
@ -49,6 +50,7 @@ export default class GeneralUserSettingsTab extends React.Component {
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
language: languageHandler.getCurrentLanguage(),
|
language: languageHandler.getCurrentLanguage(),
|
||||||
|
spellCheckLanguages: [],
|
||||||
haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl()),
|
haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl()),
|
||||||
serverSupportsSeparateAddAndBind: null,
|
serverSupportsSeparateAddAndBind: null,
|
||||||
idServerHasUnsignedTerms: false,
|
idServerHasUnsignedTerms: false,
|
||||||
|
@ -182,6 +184,10 @@ export default class GeneralUserSettingsTab extends React.Component {
|
||||||
PlatformPeg.get().reload();
|
PlatformPeg.get().reload();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
_onSpellCheckLanguagesChange = (languages) => {
|
||||||
|
this.setState({spellCheckLanguages: languages})
|
||||||
|
};
|
||||||
|
|
||||||
_onPasswordChangeError = (err) => {
|
_onPasswordChangeError = (err) => {
|
||||||
// TODO: Figure out a design that doesn't involve replacing the current dialog
|
// TODO: Figure out a design that doesn't involve replacing the current dialog
|
||||||
let errMsg = err.error || "";
|
let errMsg = err.error || "";
|
||||||
|
@ -303,6 +309,17 @@ export default class GeneralUserSettingsTab extends React.Component {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_renderSpellCheckSection() {
|
||||||
|
return (
|
||||||
|
<div className="mx_SettingsTab_section">
|
||||||
|
<span className="mx_SettingsTab_subheading">{_t("Spell checking")}</span>
|
||||||
|
<SpellCheckSettings className="mx_GeneralUserSettingsTab_spellCheckLanguageInput"
|
||||||
|
languages={this.state.spellCheckLanguages}
|
||||||
|
onLanguagesChange={this._onSpellCheckLanguagesChange} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
_renderDiscoverySection() {
|
_renderDiscoverySection() {
|
||||||
const SetIdServer = sdk.getComponent("views.settings.SetIdServer");
|
const SetIdServer = sdk.getComponent("views.settings.SetIdServer");
|
||||||
|
|
||||||
|
@ -409,6 +426,7 @@ export default class GeneralUserSettingsTab extends React.Component {
|
||||||
{this._renderProfileSection()}
|
{this._renderProfileSection()}
|
||||||
{this._renderAccountSection()}
|
{this._renderAccountSection()}
|
||||||
{this._renderLanguageSection()}
|
{this._renderLanguageSection()}
|
||||||
|
{this._renderSpellCheckSection()}
|
||||||
{ discoverySection }
|
{ discoverySection }
|
||||||
{this._renderIntegrationManagerSection() /* Has its own title */}
|
{this._renderIntegrationManagerSection() /* Has its own title */}
|
||||||
{ accountManagementSection }
|
{ accountManagementSection }
|
||||||
|
|
Loading…
Reference in a new issue