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

@ -212,7 +212,20 @@ export default React.createClass({
},
_onSettingsClick: function() {
this.setState({editing: true});
this.setState({
editing: true,
profileForm: Object.assign({}, this.state.summary.profile),
});
},
_onCancelClick: function() {
this.setState({
editing: false,
profileForm: null,
});
},
_onSaveClick: function() {
},
_getFeaturedRoomsNode() {
@ -295,61 +308,162 @@ export default React.createClass({
const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
const Loader = sdk.getComponent("elements.Spinner");
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const ChangeAvatar = sdk.getComponent("settings.ChangeAvatar");
if (this.state.summary === null && this.state.error === null) {
return <Loader />;
} else if (this.state.editing) {
return <div />;
} else if (false && this.state.editing) {
const summary = this.state.summary;
const avatarEdit = (
<div className="mx_GroupView_avatarPicker">
<div onClick={this.onAvatarPickerClick}>
<ChangeAvatar ref={this._collectChangeAvatar}
groupId={this.props.groupId}
initialAvatarUrl={this.state.summary.profile.avatar_url}
setAvatar={false} onAvatar={this._onAvatarChange}
showUploadSection={false} width={48} height={48}
/>
</div>
<div className="mx_GroupView_avatarPicker_edit">
<label htmlFor="avatarInput" ref="file_label">
<img src="img/camera.svg"
alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
width="17" height="15" />
</label>
<input id="avatarInput" className="mx_GroupView_uploadInput" type="file" onChange={this._onAvatarSelected}/>
</div>
</div>
);
return <div>
{avatarEdit}
<input type="text"
value={this.state.profileForm.name}
onChange={this._onNameChange}
placeholder={_t('Group Name')}
/>
<input type="text"
value={this.state.profileForm.short_description}
onChange={this._onShortDescChange}
placeholder={_t('Description')}
/>
<AccessibleButton className="mx_GroupView_saveButton" onClick={this._onSaveClick}>
{_t('Save')}
</AccessibleButton>
<AccessibleButton className='mx_GroupView_cancelButton' onClick={this._onCancelClick}>
<img src="img/cancel.svg" className='mx_filterFlipColor'
width="18" height="18" alt={_t("Cancel")}/>
</AccessibleButton>
<textarea value={this.state.profileForm.long_description}
onChange={this._onLongDescChange}
/>
</div>;
} else if (this.state.summary) {
const summary = this.state.summary;
let description = null;
if (summary.profile && summary.profile.long_description) {
description = sanitizedHtmlNode(summary.profile.long_description);
}
const roomBody = <div>
<div className="mx_GroupView_groupDesc">{description}</div>
{this._getFeaturedRoomsNode()}
{this._getFeaturedUsersNode()}
</div>;
let avatarNode;
let nameNode;
if (summary.profile && summary.profile.name) {
nameNode = <div className="mx_RoomHeader_name">
<span>{summary.profile.name}</span>
<span className="mx_GroupView_header_groupid">
({this.props.groupId})
</span>
let shortDescNode;
let rightButtons;
let roomBody;
if (this.state.editing) {
avatarNode = (
<div className="mx_GroupView_avatarPicker">
<div onClick={this.onAvatarPickerClick}>
<ChangeAvatar ref={this._collectChangeAvatar}
groupId={this.props.groupId}
initialAvatarUrl={this.state.summary.profile.avatar_url}
setAvatar={false} onAvatar={this._onAvatarChange}
showUploadSection={false} width={48} height={48}
/>
</div>
<div className="mx_GroupView_avatarPicker_edit">
<label htmlFor="avatarInput" ref="file_label">
<img src="img/camera.svg"
alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
width="17" height="15" />
</label>
<input id="avatarInput" className="mx_GroupView_uploadInput" type="file" onChange={this._onAvatarSelected}/>
</div>
</div>
);
nameNode = <input type="text"
value={this.state.profileForm.name}
onChange={this._onNameChange}
placeholder={_t('Group Name')}
/>
shortDescNode = <input type="text"
value={this.state.profileForm.short_description}
onChange={this._onShortDescChange}
placeholder={_t('Description')}
/>
roomBody = <div>
<textarea value={this.state.profileForm.long_description}
onChange={this._onLongDescChange}
/>
</div>;
rightButtons = <div>
<AccessibleButton className="mx_GroupView_saveButton" onClick={this._onSaveClick}>
{_t('Save')}
</AccessibleButton>
<AccessibleButton className='mx_GroupView_cancelButton' onClick={this._onCancelClick}>
<img src="img/cancel.svg" className='mx_filterFlipColor'
width="18" height="18" alt={_t("Cancel")}/>
</AccessibleButton>
</div>;
} else {
nameNode = <div className="mx_RoomHeader_name">
<span>{this.props.groupId}</span>
const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
avatarNode = <GroupAvatar
groupId={this.props.groupId}
groupAvatarUrl={groupAvatarUrl}
width={48} height={48}
/>;
if (summary.profile && summary.profile.name) {
nameNode = <div>
<span>{summary.profile.name}</span>
<span className="mx_GroupView_header_groupid">
({this.props.groupId})
</span>
</div>;
} else {
nameNode = <span>{this.props.groupId}</span>;
}
shortDescNode = <div className="mx_RoomHeader_topic">
{summary.profile.short_description}
</div>;
let description = null;
if (summary.profile && summary.profile.long_description) {
description = sanitizedHtmlNode(summary.profile.long_description);
}
roomBody = <div>
<div className="mx_GroupView_groupDesc">{description}</div>
{this._getFeaturedRoomsNode()}
{this._getFeaturedUsersNode()}
</div>;
rightButtons = <AccessibleButton className="mx_RoomHeader_button" onClick={this._onSettingsClick} title={_t("Settings")}>
<TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
</AccessibleButton>;
}
const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
// settings button is display: none until settings is wired up
return (
<div className="mx_GroupView">
<div className="mx_RoomHeader">
<div className="mx_RoomHeader_wrapper">
<div className="mx_RoomHeader_avatar">
<GroupAvatar
groupId={this.props.groupId}
groupAvatarUrl={groupAvatarUrl}
width={48} height={48}
/>
<div className="mx_GroupView_header">
<div className="mx_GroupView_header_leftCol">
<div className="mx_GroupView_header_avatar">
{avatarNode}
</div>
<div className="mx_RoomHeader_info">
{nameNode}
<div className="mx_RoomHeader_topic">
{summary.profile.short_description}
<div className="mx_GroupView_header_info">
<div className="mx_GroupView_header_name">
{nameNode}
</div>
<div className="mx_GroupView_header_shortDesc">
{shortDescNode}
</div>
</div>
<AccessibleButton className="mx_RoomHeader_button" onClick={this._onSettingsClick} title={_t("Settings")} style={{display: 'none'}}>
<TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
</AccessibleButton>
</div>
<div className="mx_GroupView_header_rightCol">
{rightButtons}
</div>
</div>
{roomBody}

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 />
);