Merge pull request #1490 from matrix-org/luke/groups-move-buttons
Shuffle GroupView UI
This commit is contained in:
commit
8c162766fe
3 changed files with 104 additions and 105 deletions
|
@ -458,6 +458,8 @@ export default React.createClass({
|
||||||
}
|
}
|
||||||
this.setState({
|
this.setState({
|
||||||
summary,
|
summary,
|
||||||
|
isGroupPublicised: this._groupStore.getGroupPublicity(),
|
||||||
|
isUserPrivileged: this._groupStore.isUserPrivileged(),
|
||||||
error: null,
|
error: null,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -606,22 +608,15 @@ export default React.createClass({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
_onPubliciseOffClick: function() {
|
|
||||||
this._setPublicity(false);
|
|
||||||
},
|
|
||||||
|
|
||||||
_onPubliciseOnClick: function() {
|
|
||||||
this._setPublicity(true);
|
|
||||||
},
|
|
||||||
|
|
||||||
_onAddRoomsClick: function() {
|
_onAddRoomsClick: function() {
|
||||||
showGroupAddRoomDialog(this.props.groupId);
|
showGroupAddRoomDialog(this.props.groupId);
|
||||||
},
|
},
|
||||||
|
|
||||||
_setPublicity: function(publicity) {
|
_onPublicityToggle: function() {
|
||||||
this.setState({
|
this.setState({
|
||||||
publicityBusy: true,
|
publicityBusy: true,
|
||||||
});
|
});
|
||||||
|
const publicity = !this.state.isGroupPublicised;
|
||||||
this._groupStore.setGroupPublicity(publicity).then(() => {
|
this._groupStore.setGroupPublicity(publicity).then(() => {
|
||||||
this.setState({
|
this.setState({
|
||||||
publicityBusy: false,
|
publicityBusy: false,
|
||||||
|
@ -745,8 +740,8 @@ export default React.createClass({
|
||||||
<Spinner />
|
<Spinner />
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_invited">
|
return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_invited">
|
||||||
|
<div className="mx_GroupView_membershipSubSection">
|
||||||
<div className="mx_GroupView_membershipSection_description">
|
<div className="mx_GroupView_membershipSection_description">
|
||||||
{ _t("%(inviter)s has invited you to join this group", {inviter: group.inviter.userId}) }
|
{ _t("%(inviter)s has invited you to join this group", {inviter: group.inviter.userId}) }
|
||||||
</div>
|
</div>
|
||||||
|
@ -762,83 +757,96 @@ export default React.createClass({
|
||||||
{ _t("Decline") }
|
{ _t("Decline") }
|
||||||
</AccessibleButton>
|
</AccessibleButton>
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
|
||||||
} else if (group.myMembership === 'join') {
|
|
||||||
let youAreAMemberText = _t("You are a member of this group");
|
|
||||||
if (this.state.summary.user && this.state.summary.user.is_privileged) {
|
|
||||||
youAreAMemberText = _t("You are an administrator of this group");
|
|
||||||
}
|
|
||||||
|
|
||||||
let publicisedButton;
|
|
||||||
if (this.state.publicityBusy) {
|
|
||||||
publicisedButton = <Spinner />;
|
|
||||||
}
|
|
||||||
|
|
||||||
let publicisedSection;
|
|
||||||
if (this.state.summary.user && this.state.summary.user.is_publicised) {
|
|
||||||
if (!this.state.publicityBusy) {
|
|
||||||
publicisedButton = <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
|
|
||||||
onClick={this._onPubliciseOffClick}
|
|
||||||
>
|
|
||||||
{ _t("Unpublish") }
|
|
||||||
</AccessibleButton>;
|
|
||||||
}
|
|
||||||
publicisedSection = <div className="mx_GroupView_membershipSubSection">
|
|
||||||
{ _t("This group is published on your profile") }
|
|
||||||
<div className="mx_GroupView_membership_buttonContainer">
|
|
||||||
{ publicisedButton }
|
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
</div>;
|
||||||
} else {
|
} else if (group.myMembership === 'join' && this.state.editing) {
|
||||||
if (!this.state.publicityBusy) {
|
const leaveButtonTooltip = this.state.isUserPrivileged ?
|
||||||
publicisedButton = <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
|
_t("You are a member of this group") :
|
||||||
onClick={this._onPubliciseOnClick}
|
_t("You are an administrator of this group");
|
||||||
>
|
const leaveButtonClasses = classnames({
|
||||||
{ _t("Publish") }
|
"mx_RoomHeader_textButton": true,
|
||||||
</AccessibleButton>;
|
"mx_GroupView_textButton": true,
|
||||||
}
|
"mx_GroupView_leaveButton": true,
|
||||||
publicisedSection = <div className="mx_GroupView_membershipSubSection">
|
"mx_RoomHeader_textButton_danger": this.state.isUserPrivileged,
|
||||||
{ _t("This group is not published on your profile") }
|
});
|
||||||
<div className="mx_GroupView_membership_buttonContainer">
|
|
||||||
{ publicisedButton }
|
|
||||||
</div>
|
|
||||||
</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_joined">
|
return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_joined">
|
||||||
<div className="mx_GroupView_membershipSubSection">
|
<div className="mx_GroupView_membershipSubSection">
|
||||||
<div className="mx_GroupView_membershipSection_description">
|
{ /* Empty div for flex alignment */ }
|
||||||
{ youAreAMemberText }
|
<div />
|
||||||
</div>
|
|
||||||
<div className="mx_GroupView_membership_buttonContainer">
|
<div className="mx_GroupView_membership_buttonContainer">
|
||||||
<AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
|
<AccessibleButton
|
||||||
|
className={leaveButtonClasses}
|
||||||
onClick={this._onLeaveClick}
|
onClick={this._onLeaveClick}
|
||||||
|
title={leaveButtonTooltip}
|
||||||
>
|
>
|
||||||
{ _t("Leave") }
|
{ _t("Leave") }
|
||||||
</AccessibleButton>
|
</AccessibleButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{ publicisedSection }
|
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_getMemberSettingsSection: function() {
|
||||||
|
return <div className="mx_GroupView_memberSettings">
|
||||||
|
<h3> { _t("Community Member Settings") } </h3>
|
||||||
|
<div className="mx_GroupView_memberSettings_toggle">
|
||||||
|
<input type="checkbox"
|
||||||
|
onClick={this._onPublicityToggle}
|
||||||
|
checked={this.state.isGroupPublicised}
|
||||||
|
tabIndex="3"
|
||||||
|
id="isGroupPublicised"
|
||||||
|
/>
|
||||||
|
<label htmlFor="isGroupPublicised"
|
||||||
|
onClick={this._onPublicityToggle}
|
||||||
|
>
|
||||||
|
{ _t("Publish this community on your profile") }
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>;
|
||||||
|
},
|
||||||
|
|
||||||
|
_getLongDescriptionNode: function() {
|
||||||
|
const summary = this.state.summary;
|
||||||
|
let description = null;
|
||||||
|
if (summary.profile && summary.profile.long_description) {
|
||||||
|
description = sanitizedHtmlNode(summary.profile.long_description);
|
||||||
|
}
|
||||||
|
return this.state.editing && this.state.isUserPrivileged ?
|
||||||
|
<div className="mx_GroupView_groupDesc">
|
||||||
|
<h3> { _t("Long Description (HTML)") } </h3>
|
||||||
|
<textarea
|
||||||
|
value={this.state.profileForm.long_description}
|
||||||
|
onChange={this._onLongDescChange}
|
||||||
|
tabIndex="4"
|
||||||
|
key="editLongDesc"
|
||||||
|
/>
|
||||||
|
</div> :
|
||||||
|
<div className="mx_GroupView_groupDesc">
|
||||||
|
{ description }
|
||||||
|
</div>;
|
||||||
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
|
const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
|
||||||
const Loader = sdk.getComponent("elements.Spinner");
|
const Spinner = sdk.getComponent("elements.Spinner");
|
||||||
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||||
|
|
||||||
if (this.state.summary === null && this.state.error === null || this.state.saving) {
|
if (this.state.summary === null && this.state.error === null || this.state.saving) {
|
||||||
return <Loader />;
|
return <Spinner />;
|
||||||
} else if (this.state.summary) {
|
} else if (this.state.summary) {
|
||||||
const summary = this.state.summary;
|
const summary = this.state.summary;
|
||||||
|
|
||||||
let avatarNode;
|
let avatarNode;
|
||||||
let nameNode;
|
let nameNode;
|
||||||
let shortDescNode;
|
let shortDescNode;
|
||||||
let bodyNodes = [];
|
const bodyNodes = [
|
||||||
|
this._getMembershipSection(),
|
||||||
|
this.state.editing ? this._getMemberSettingsSection() : null,
|
||||||
|
this._getLongDescriptionNode(),
|
||||||
|
this._getRoomsNode(),
|
||||||
|
];
|
||||||
const rightButtons = [];
|
const rightButtons = [];
|
||||||
const headerClasses = {
|
const headerClasses = {
|
||||||
mx_GroupView_header: true,
|
mx_GroupView_header: true,
|
||||||
|
@ -846,7 +854,7 @@ export default React.createClass({
|
||||||
if (this.state.editing) {
|
if (this.state.editing) {
|
||||||
let avatarImage;
|
let avatarImage;
|
||||||
if (this.state.uploadingAvatar) {
|
if (this.state.uploadingAvatar) {
|
||||||
avatarImage = <Loader />;
|
avatarImage = <Spinner />;
|
||||||
} else {
|
} else {
|
||||||
const GroupAvatar = sdk.getComponent('avatars.GroupAvatar');
|
const GroupAvatar = sdk.getComponent('avatars.GroupAvatar');
|
||||||
avatarImage = <GroupAvatar groupId={this.props.groupId}
|
avatarImage = <GroupAvatar groupId={this.props.groupId}
|
||||||
|
@ -895,15 +903,6 @@ export default React.createClass({
|
||||||
width="18" height="18" alt={_t("Cancel")} />
|
width="18" height="18" alt={_t("Cancel")} />
|
||||||
</AccessibleButton>,
|
</AccessibleButton>,
|
||||||
);
|
);
|
||||||
bodyNodes = [
|
|
||||||
<textarea className="mx_GroupView_editLongDesc"
|
|
||||||
value={this.state.profileForm.long_description}
|
|
||||||
onChange={this._onLongDescChange}
|
|
||||||
tabIndex="3"
|
|
||||||
key="editLongDesc"
|
|
||||||
/>,
|
|
||||||
this._getRoomsNode(),
|
|
||||||
];
|
|
||||||
} else {
|
} else {
|
||||||
const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
|
const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
|
||||||
avatarNode = <GroupAvatar
|
avatarNode = <GroupAvatar
|
||||||
|
@ -924,25 +923,13 @@ export default React.createClass({
|
||||||
if (summary.profile && summary.profile.short_description) {
|
if (summary.profile && summary.profile.short_description) {
|
||||||
shortDescNode = <span>{ summary.profile.short_description }</span>;
|
shortDescNode = <span>{ summary.profile.short_description }</span>;
|
||||||
}
|
}
|
||||||
|
|
||||||
let description = null;
|
|
||||||
if (summary.profile && summary.profile.long_description) {
|
|
||||||
description = sanitizedHtmlNode(summary.profile.long_description);
|
|
||||||
}
|
|
||||||
bodyNodes = [
|
|
||||||
this._getMembershipSection(),
|
|
||||||
<div key="groupDesc" className="mx_GroupView_groupDesc">{ description }</div>,
|
|
||||||
this._getRoomsNode(),
|
|
||||||
];
|
|
||||||
if (summary.user && summary.user.is_privileged) {
|
|
||||||
rightButtons.push(
|
rightButtons.push(
|
||||||
<AccessibleButton className="mx_GroupHeader_button"
|
<AccessibleButton className="mx_GroupHeader_button"
|
||||||
onClick={this._onEditClick} title={_t("Edit Group")} key="_editButton"
|
onClick={this._onEditClick} title={_t("Community Settings")} key="_editButton"
|
||||||
>
|
>
|
||||||
<TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
|
<TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
|
||||||
</AccessibleButton>,
|
</AccessibleButton>,
|
||||||
);
|
);
|
||||||
}
|
|
||||||
if (this.props.collapsedRhs) {
|
if (this.props.collapsedRhs) {
|
||||||
rightButtons.push(
|
rightButtons.push(
|
||||||
<AccessibleButton className="mx_GroupHeader_button"
|
<AccessibleButton className="mx_GroupHeader_button"
|
||||||
|
|
|
@ -927,5 +927,9 @@
|
||||||
"%(serverName)s Matrix ID": "%(serverName)s Matrix ID",
|
"%(serverName)s Matrix ID": "%(serverName)s Matrix ID",
|
||||||
"Add rooms to this group": "Add rooms to this group",
|
"Add rooms to this group": "Add rooms to this group",
|
||||||
"Invites sent": "Invites sent",
|
"Invites sent": "Invites sent",
|
||||||
"Your group invitations have been sent.": "Your group invitations have been sent."
|
"Your group invitations have been sent.": "Your group invitations have been sent.",
|
||||||
|
"Publish this community on your profile": "Publish this community on your profile",
|
||||||
|
"Community Member Settings": "Community Member Settings",
|
||||||
|
"Long Description (HTML)": "Long Description (HTML)",
|
||||||
|
"Community Settings": "Community Settings"
|
||||||
}
|
}
|
||||||
|
|
|
@ -61,6 +61,14 @@ export default class GroupStore extends EventEmitter {
|
||||||
return this._rooms;
|
return this._rooms;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getGroupPublicity() {
|
||||||
|
return this._summary.user ? this._summary.user.is_publicised : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
isUserPrivileged() {
|
||||||
|
return this._summary.user ? this._summary.user.is_privileged : null;
|
||||||
|
}
|
||||||
|
|
||||||
addRoomToGroup(roomId) {
|
addRoomToGroup(roomId) {
|
||||||
return this._matrixClient
|
return this._matrixClient
|
||||||
.addRoomToGroup(this.groupId, roomId)
|
.addRoomToGroup(this.groupId, roomId)
|
||||||
|
|
Loading…
Reference in a new issue