imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve the profile section a bit and add a highlight to the temp tab

Browse source
This commit is contained in:
Travis Ralston 2019-01-21 17:27:43 -07:00
parent c3692aa9ae
commit 15a56fa90b
9 changed files with 186 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/components/views/settings/tabs/GeneralSettingsTab.js
View file

@ -16,32 +16,82 @@ limitations under the License.
import React from 'react';
import {_t} from "../../../../languageHandler";
import MatrixClientPeg from "../../../../MatrixClientPeg";
import Field from "../../elements/Field";
import AccessibleButton from "../../elements/AccessibleButton";
export default class GeneralSettingsTab extends React.Component {
constructor() {
super();
const client = MatrixClientPeg.get();
this.state = {
userId: client.getUserId(),
displayName: client.getUser(client.getUserId()).displayName,
enableProfileSave: false,
};
}
_saveProfile = async (e) => {
e.stopPropagation();
e.preventDefault();
if (!this.state.enableProfileSave) return;
this.setState({enableProfileSave: false});
// TODO: What do we do about errors?
await MatrixClientPeg.get().setDisplayName(this.state.displayName);
// TODO: Support avatars
this.setState({enableProfileSave: true});
};
_onDisplayNameChanged = (e) => {
this.setState({
displayName: e.target.value,
enableProfileSave: true,
});
};
_renderProfileSection() {
const form = (
<form onSubmit={this._saveProfile} autoComplete={false} noValidate={true}>
<div className="mx_GeneralSettingsTab_profile">
<div className="mx_GeneralSettingsTab_profileControls">
<p className="mx_GeneralSettingsTab_profileUsername">{this.state.userId}</p>
<Field id="profileDisplayName" label={_t("Display Name")}
type="text" value={this.state.displayName} autocomplete="off"
onChange={this._onDisplayNameChanged}
/>
</div>
<div className="mx_GeneralSettingsTab_profileAvatar">
{/*TODO: Ditch avatar placeholder and use the real thing*/}
<div/>
</div>
</div>
<AccessibleButton onClick={this._saveProfile} kind="primary"
disabled={!this.state.enableProfileSave}
>
{_t("Save")}
</AccessibleButton>
</form>
);
return (
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
{form}
</div>
);
}
render() {
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("General")}</div>
<div className="mx_GeneralSettingsTab_profile mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
<input type="text" value="travis"/>
<input type="text" value="TravisR"/>
</div>
<div className="mx_GeneralSettingsTab_profile mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
<input type="text" value="travis"/>
<input type="text" value="TravisR"/>
</div>
<div className="mx_GeneralSettingsTab_profile mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
<input type="text" value="travis"/>
<input type="text" value="TravisR"/>
</div>
<div className="mx_GeneralSettingsTab_profile mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
<input type="text" value="travis"/>
<input type="text" value="TravisR"/>
</div>
{this._renderProfileSection()}
</div>
);
}