Start on editing groups

This commit is contained in:
David Baker 2017-07-13 18:41:51 +01:00
parent ce0f9e8803
commit 381f685013
2 changed files with 189 additions and 54 deletions

View file

@ -24,11 +24,21 @@ module.exports = React.createClass({
propTypes: {
initialAvatarUrl: React.PropTypes.string,
room: React.PropTypes.object,
// if set, set initialAvatarUrl to the current avatar, if it has one
groupId: React.PropTypes.string,
// if false, you need to call changeAvatar.onFileSelected yourself.
showUploadSection: React.PropTypes.bool,
width: React.PropTypes.number,
height: React.PropTypes.number,
className: React.PropTypes.string
className: React.PropTypes.string,
// If true, set the room / user avatar once the image is uploaded.
// Ignored for groups.
setAvatar: React.PropTypes.bool,
// Called after the avatar is uploaded
onAvatar: React.PropTypes.func,
},
Phases: {
@ -43,6 +53,7 @@ module.exports = React.createClass({
className: "",
width: 80,
height: 80,
setAvatar: true,
};
},
@ -72,15 +83,20 @@ module.exports = React.createClass({
var self = this;
var httpPromise = MatrixClientPeg.get().uploadContent(file).then(function(url) {
newUrl = url;
if (self.props.room) {
return MatrixClientPeg.get().sendStateEvent(
self.props.room.roomId,
'm.room.avatar',
{url: url},
''
);
} else {
return MatrixClientPeg.get().setAvatarUrl(url);
if (this.props.onAvatar) {
this.props.onAvatar(url);
}
if (this.props.setAvatar) {
if (self.props.room) {
return MatrixClientPeg.get().sendStateEvent(
self.props.room.roomId,
'm.room.avatar',
{url: url},
''
);
} else {
return MatrixClientPeg.get().setAvatarUrl(url);
}
}
});
@ -111,20 +127,25 @@ module.exports = React.createClass({
},
render: function() {
var avatarImg;
let avatarImg;
// Having just set an avatar we just display that since it will take a little
// time to propagate through to the RoomAvatar.
if (this.props.room && !this.avatarSet) {
var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
avatarImg = <RoomAvatar room={this.props.room} width={ this.props.width } height={ this.props.height } resizeMethod='crop' />;
} else if (this.props.groupId) {
const GroupAvatar = sdk.getComponent('avatars.GroupAvatar');
avatarImg = <GroupAvatar groupId={this.props.groupId} groupAvatarUrl={this.props.initialAvatarUrl}
width={this.props.width} height={this.props.height} resizeMethod='crop'
/>;
} else {
var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
// XXX: FIXME: once we track in the JS what our own displayname is(!) then use it here rather than ?
avatarImg = <BaseAvatar width={this.props.width} height={this.props.height} resizeMethod='crop'
name='?' idName={ MatrixClientPeg.get().getUserIdLocalpart() } url={this.state.avatarUrl} />;
}
var uploadSection;
let uploadSection;
if (this.props.showUploadSection) {
uploadSection = (
<div className={this.props.className}>
@ -147,7 +168,7 @@ module.exports = React.createClass({
</div>
);
case this.Phases.Uploading:
var Loader = sdk.getComponent("elements.Spinner");
const Loader = sdk.getComponent("elements.Spinner");
return (
<Loader />
);