fix up look and feel of UserSettings a bit more

This commit is contained in:
Matthew Hodgson 2016-01-15 12:35:30 +00:00
parent 84b46dae4e
commit 828b1f4837

View file

@ -83,6 +83,12 @@ module.exports = React.createClass({
} }
}, },
onAvatarPickerClick: function(ev) {
if (this.refs.file_label) {
this.refs.file_label.click();
}
},
onAvatarSelected: function(ev) { onAvatarSelected: function(ev) {
var self = this; var self = this;
var changeAvatar = this.refs.changeAvatar; var changeAvatar = this.refs.changeAvatar;
@ -175,7 +181,7 @@ module.exports = React.createClass({
if (MatrixClientPeg.get().isGuest()) { if (MatrixClientPeg.get().isGuest()) {
accountJsx = ( accountJsx = (
<div className="mx_UserSettings_button" onClick={this.onUpgradeClicked}> <div className="mx_UserSettings_button" onClick={this.onUpgradeClicked}>
Upgrade (It's free!) Create an account
</div> </div>
); );
} }
@ -224,14 +230,14 @@ module.exports = React.createClass({
})} })}
</div> </div>
<div className="mx_UserSettings_avatarPicker"> <div className="mx_UserSettings_avatarPicker" onClick={ this.onAvatarPickerClick } >
<ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl} <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
showUploadSection={false} className="mx_UserSettings_avatarPicker_img"/> showUploadSection={false} className="mx_UserSettings_avatarPicker_img"/>
<div className="mx_UserSettings_avatarPicker_edit"> <div className="mx_UserSettings_avatarPicker_edit">
<label htmlFor="avatarInput"> <label htmlFor="avatarInput" ref="file_label">
<img src="img/upload.svg" <img src="img/camera.svg"
alt="Upload avatar" title="Upload avatar" alt="Upload avatar" title="Upload avatar"
width="19" height="24" /> width="17" height="15" />
</label> </label>
<input id="avatarInput" type="file" onChange={this.onAvatarSelected}/> <input id="avatarInput" type="file" onChange={this.onAvatarSelected}/>
</div> </div>
@ -241,13 +247,12 @@ module.exports = React.createClass({
<h2>Account</h2> <h2>Account</h2>
<div className="mx_UserSettings_section"> <div className="mx_UserSettings_section">
{accountJsx}
</div>
<div className="mx_UserSettings_logout"> <div className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
<div className="mx_UserSettings_button" onClick={this.onLogoutClicked}>
Log out Log out
</div> </div>
{accountJsx}
</div> </div>
<h2>Notifications</h2> <h2>Notifications</h2>