PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Get avatar display and uploads working

Browse source
This commit is contained in:
Kegan Dougal 2015-12-23 16:52:59 +00:00
parent 19bd39b066
commit a279dce027
2 changed files with 68 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
src/components/structures/UserSettings.js
View file

@ -47,26 +47,7 @@ module.exports = React.createClass({
componentWillMount: function() {
var self = this;
q.all([
UserSettingsStore.loadProfileInfo(), UserSettingsStore.loadThreePids()
]).done(function(resps) {
self.setState({
avatarUrl: resps[0].avatar_url,
threepids: resps[1].threepids,
phase: "UserSettings.DISPLAY",
});
// keep a copy of the original state in order to track changes
self.setState({
originalState: self.state
});
}, function(error) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Can't load user settings",
description: error.toString()
});
});
this._refreshFromServer();
},
componentDidMount: function() {
@ -78,47 +59,24 @@ module.exports = React.createClass({
dis.unregister(this.dispatcherRef);
},
/*
onSaveClicked: function(ev) { // XXX unused
_refreshFromServer: function() {
var self = this;
var savePromises = [];
// XXX: this is managed in ChangeAvatar.js, although could be moved out here in order
// to allow for the change to be staged alongside the rest of the form.
//
// if (this.state.originalState.avatarUrl !== this.state.avatarUrl) {
// savePromises.push( UserSettingsStore.saveAvatarUrl(this.state.avatarUrl) );
// }
if (this.state.originalState.threepids.length !== this.state.threepids.length ||
this.state.originalState.threepids.every((element, index) => {
return element === this.state.threepids[index];
})) {
savePromises.push(
UserSettingsStore.saveThreePids(this.state.threepids)
);
}
self.setState({
phase: "UserSettings.SAVING",
});
q.all(savePromises).done(function(resps) {
q.all([
UserSettingsStore.loadProfileInfo(), UserSettingsStore.loadThreePids()
]).done(function(resps) {
self.setState({
avatarUrl: resps[0].avatar_url,
threepids: resps[1].threepids,
phase: "UserSettings.DISPLAY",
});
self.props.onClose();
}, function(error) {
self.setState({
phase: "UserSettings.DISPLAY",
});
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Can't save user settings",
title: "Can't load user settings",
description: error.toString()
});
});
}, */
},
onAction: function(payload) {
if (payload.action === "notifier_enabled") {
@ -128,22 +86,24 @@ module.exports = React.createClass({
}
},
editAvatar: function() {
var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl);
var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
var avatarDialog = (
<div>
<ChangeAvatar initialAvatarUrl={url} />
<div className="mx_Dialog_buttons">
<button onClick={this.onAvatarDialogCancel}>Cancel</button>
</div>
</div>
);
this.avatarDialog = Modal.createDialogWithElement(avatarDialog);
},
onAvatarDialogCancel: function() {
this.avatarDialog.close();
onAvatarSelected: function(ev) {
var self = this;
var changeAvatar = this.refs.changeAvatar;
if (!changeAvatar) {
console.error("No ChangeAvatar found to upload image to!");
return;
}
changeAvatar.onFileSelected(ev).catch(function(err) {
var errMsg = err.error || "";
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Error",
description: "Failed to set avatar. " + errMsg
});
}).finally(function() {
// dunno if the avatar changed, re-check it.
self._refreshFromServer();
}).done();
},
onLogoutClicked: function(ev) {
@ -206,6 +166,10 @@ module.exports = React.createClass({
var RoomHeader = sdk.getComponent('rooms.RoomHeader');
var ChangeDisplayName = sdk.getComponent("views.settings.ChangeDisplayName");
var ChangePassword = sdk.getComponent("views.settings.ChangePassword");
var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
var avatarUrl = (
this.state.avatarUrl ? MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl) : null
);
return (
<div className="mx_UserSettings">
@ -240,8 +204,15 @@ module.exports = React.createClass({
</div>
<div className="mx_UserSettings_avatarPicker">
<div className="mx_UserSettings_avatarPicker_edit"
onClick={this.editAvatar}>
<ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
showUploadSection={false} />
<div className="mx_UserSettings_avatarPicker_edit">
<label htmlFor="avatarInput">
<img src="img/upload.svg"
alt="Upload avatar" title="Upload avatar"
width="19" height="24" />
</label>
<input id="avatarInput" type="file" onChange={this.onAvatarSelected}/>
</div>
</div>
</div>

35
src/components/views/settings/ChangeAvatar.js
View file

@ -23,6 +23,8 @@ module.exports = React.createClass({
propTypes: {
initialAvatarUrl: React.PropTypes.string,
room: React.PropTypes.object,
// if false, you need to call changeAvatar.onFileSelected yourself.
showUploadSection: React.PropTypes.bool
},
Phases: {
@ -31,6 +33,12 @@ module.exports = React.createClass({
Error: "error",
},
getDefaultProps: function() {
return {
showUploadSection: true
};
},
getInitialState: function() {
return {
avatarUrl: this.props.initialAvatarUrl,
@ -55,7 +63,7 @@ module.exports = React.createClass({
phase: this.Phases.Uploading
});
var self = this;
MatrixClientPeg.get().uploadContent(file).then(function(url) {
var httpPromise = MatrixClientPeg.get().uploadContent(file).then(function(url) {
newUrl = url;
if (self.props.room) {
return MatrixClientPeg.get().sendStateEvent(
@ -67,7 +75,9 @@ module.exports = React.createClass({
} else {
return MatrixClientPeg.get().setAvatarUrl(url);
}
}).done(function() {
});
httpPromise.done(function() {
self.setState({
phase: self.Phases.Display,
avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(newUrl)
@ -78,11 +88,13 @@ module.exports = React.createClass({
});
self.onError(error);
});
return httpPromise;
},
onFileSelected: function(ev) {
this.avatarSet = true;
this.setAvatarFromFile(ev.target.files[0]);
return this.setAvatarFromFile(ev.target.files[0]);
},
onError: function(error) {
@ -106,6 +118,17 @@ module.exports = React.createClass({
avatarImg = <img src={this.state.avatarUrl} style={style} />;
}
var uploadSection;
if (this.props.showUploadSection) {
uploadSection = (
<div className="mx_Dialog_content">
Upload new:
<input type="file" onChange={this.onFileSelected}/>
{this.state.errorText}
</div>
);
}
switch (this.state.phase) {
case this.Phases.Display:
case this.Phases.Error:
@ -114,11 +137,7 @@ module.exports = React.createClass({
<div className="mx_Dialog_content">
{avatarImg}
</div>
<div className="mx_Dialog_content">
Upload new:
<input type="file" onChange={this.onFileSelected}/>
{this.state.errorText}
</div>
{uploadSection}
</div>
);
case this.Phases.Uploading: