Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 14:05:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1490 from matrix-org/luke/groups-move-buttons

Browse Source 
Shuffle GroupView UI
This commit is contained in:
Luke Barnard 2017-10-18 11:12:58 +02:00 committed by GitHub
commit 8c162766fe
3 changed files with 104 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/components/structures/GroupView.js
View File

@ -458,6 +458,8 @@ export default React.createClass({
}
this.setState({
summary,
isGroupPublicised: this._groupStore.getGroupPublicity(),
isUserPrivileged: this._groupStore.isUserPrivileged(),
error: null,
});
});
@ -606,22 +608,15 @@ export default React.createClass({
});
},
_onPubliciseOffClick: function() {
this._setPublicity(false);
},
_onPubliciseOnClick: function() {
this._setPublicity(true);
},
_onAddRoomsClick: function() {
showGroupAddRoomDialog(this.props.groupId);
},
_setPublicity: function(publicity) {
_onPublicityToggle: function() {
this.setState({
publicityBusy: true,
});
const publicity = !this.state.isGroupPublicised;
this._groupStore.setGroupPublicity(publicity).then(() => {
this.setState({
publicityBusy: false,
@ -745,8 +740,8 @@ export default React.createClass({
<Spinner />
</div>;
}
return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_invited">
<div className="mx_GroupView_membershipSubSection">
<div className="mx_GroupView_membershipSection_description">
{ _t("%(inviter)s has invited you to join this group", {inviter: group.inviter.userId}) }
</div>
@ -762,83 +757,96 @@ export default React.createClass({
{ _t("Decline") }
</AccessibleButton>
</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>;
} else {
if (!this.state.publicityBusy) {
publicisedButton = <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
onClick={this._onPubliciseOnClick}
>
{ _t("Publish") }
</AccessibleButton>;
}
publicisedSection = <div className="mx_GroupView_membershipSubSection">
{ _t("This group is not published on your profile") }
<div className="mx_GroupView_membership_buttonContainer">
{ publicisedButton }
</div>
</div>;
}
} else if (group.myMembership === 'join' && this.state.editing) {
const leaveButtonTooltip = this.state.isUserPrivileged ?
_t("You are a member of this group") :
_t("You are an administrator of this group");
const leaveButtonClasses = classnames({
"mx_RoomHeader_textButton": true,
"mx_GroupView_textButton": true,
"mx_GroupView_leaveButton": true,
"mx_RoomHeader_textButton_danger": this.state.isUserPrivileged,
});
return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_joined">
<div className="mx_GroupView_membershipSubSection">
<div className="mx_GroupView_membershipSection_description">
{ youAreAMemberText }
</div>
{ /* Empty div for flex alignment */ }
<div />
<div className="mx_GroupView_membership_buttonContainer">
<AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
<AccessibleButton
className={leaveButtonClasses}
onClick={this._onLeaveClick}
title={leaveButtonTooltip}
>
{ _t("Leave") }
</AccessibleButton>
</div>
</div>
{ publicisedSection }
</div>;
}
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() {
const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
const Loader = sdk.getComponent("elements.Spinner");
const Spinner = sdk.getComponent("elements.Spinner");
const TintableSvg = sdk.getComponent("elements.TintableSvg");
if (this.state.summary === null && this.state.error === null || this.state.saving) {
return <Loader />;
return <Spinner />;
} else if (this.state.summary) {
const summary = this.state.summary;
let avatarNode;
let nameNode;
let shortDescNode;
let bodyNodes = [];
const bodyNodes = [
this._getMembershipSection(),
this.state.editing ? this._getMemberSettingsSection() : null,
this._getLongDescriptionNode(),
this._getRoomsNode(),
];
const rightButtons = [];
const headerClasses = {
mx_GroupView_header: true,
@ -846,7 +854,7 @@ export default React.createClass({
if (this.state.editing) {
let avatarImage;
if (this.state.uploadingAvatar) {
avatarImage = <Loader />;
avatarImage = <Spinner />;
} else {
const GroupAvatar = sdk.getComponent('avatars.GroupAvatar');
avatarImage = <GroupAvatar groupId={this.props.groupId}
@ -895,15 +903,6 @@ export default React.createClass({
width="18" height="18" alt={_t("Cancel")} />
</AccessibleButton>,
);
bodyNodes = [
<textarea className="mx_GroupView_editLongDesc"
value={this.state.profileForm.long_description}
onChange={this._onLongDescChange}
tabIndex="3"
key="editLongDesc"
/>,
this._getRoomsNode(),
];
} else {
const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
avatarNode = <GroupAvatar
@ -924,25 +923,13 @@ export default React.createClass({
if (summary.profile && summary.profile.short_description) {
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(
<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" />
</AccessibleButton>,
);
}
if (this.props.collapsedRhs) {
rightButtons.push(
<AccessibleButton className="mx_GroupHeader_button"

6
src/i18n/strings/en_EN.json
View File

@ -927,5 +927,9 @@
"%(serverName)s Matrix ID": "%(serverName)s Matrix ID",
"Add rooms to this group": "Add rooms to this group",
"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"
}

8
src/stores/GroupStore.js
View File

@ -61,6 +61,14 @@ export default class GroupStore extends EventEmitter {
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) {
return this._matrixClient
.addRoomToGroup(this.groupId, roomId)