From dbe5449d0c1c27680dc147480207c6fa0830b161 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 10 Dec 2018 17:21:55 +0100
Subject: [PATCH] bring invite buttons back in group member / room list
also put filter field on bottom
---
src/components/structures/RightPanel.js | 20 -------------
.../views/groups/GroupMemberList.js | 29 ++++++++++++++++++-
src/components/views/groups/GroupRoomList.js | 21 +++++++++++++-
3 files changed, 48 insertions(+), 22 deletions(-)
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 8fd464e80d..3687764712 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -192,26 +192,6 @@ export default class RightPanel extends React.Component {
panel = <FilePanel roomId={this.props.roomId} />;
}
- // TODO: either include this in the DOM again, or move it to other component
- if (this.props.groupId && this.state.isUserPrivilegedInGroup) {
- // inviteGroup =
- isPhaseGroup ? (
- <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteToGroupButtonClick}>
- <div className="mx_RightPanel_icon" >
- <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
- </div>
- <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
- </AccessibleButton>
- ) : (
- <AccessibleButton className="mx_RightPanel_invite" onClick={this.onAddRoomToGroupButtonClick}>
- <div className="mx_RightPanel_icon" >
- <TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
- </div>
- <div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
- </AccessibleButton>
- );
- }
-
const classes = classNames("mx_RightPanel", "mx_fadable", {
"collapsed": this.props.collapsed,
"mx_fadable_faded": this.props.disabled,
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 38c679a5b5..411ed138d4 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -19,6 +19,9 @@ import { _t } from '../../../languageHandler';
import sdk from '../../../index';
import GroupStore from '../../../stores/GroupStore';
import PropTypes from 'prop-types';
+import { showGroupInviteDialog } from '../../../GroupAddressPicker';
+import AccessibleButton from '../elements/AccessibleButton';
+import TintableSvg from '../elements/TintableSvg';
const INITIAL_LOAD_NUM_MEMBERS = 30;
@@ -135,6 +138,16 @@ export default React.createClass({
</TruncatedList>;
},
+ onInviteToGroupButtonClick() {
+ showGroupInviteDialog(this.props.groupId).then(() => {
+ dis.dispatch({
+ action: 'view_right_panel_phase',
+ phase: RightPanel.Phase.GroupMemberList,
+ groupId: this.props.groupId,
+ });
+ });
+ },
+
render: function() {
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
if (this.state.fetching || this.state.fetchingInvitedMembers) {
@@ -162,13 +175,27 @@ export default React.createClass({
{ this.makeGroupMemberTiles(this.state.searchQuery, this.state.invitedMembers) }
</div> : <div />;
+ let inviteButton;
+ if (GroupStore.isUserPrivileged(this.props.groupId)) {
+ inviteButton = (<AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteToGroupButtonClick}>
+ <div className="mx_RightPanel_icon" >
+ <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
+ </div>
+ <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
+ </AccessibleButton>);
+ }
+
return (
+
+
+
<div className="mx_MemberList">
- { inputBox }
+ { inviteButton }
<GeminiScrollbarWrapper autoshow={true}>
{ joined }
{ invited }
</GeminiScrollbarWrapper>
+ { inputBox }
</div>
);
},
diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js
index cfd2b806d4..968e10eb61 100644
--- a/src/components/views/groups/GroupRoomList.js
+++ b/src/components/views/groups/GroupRoomList.js
@@ -18,6 +18,9 @@ import { _t } from '../../../languageHandler';
import sdk from '../../../index';
import GroupStore from '../../../stores/GroupStore';
import PropTypes from 'prop-types';
+import { showGroupAddRoomDialog } from '../../../GroupAddressPicker';
+import AccessibleButton from '../elements/AccessibleButton';
+import TintableSvg from '../elements/TintableSvg';
const INITIAL_LOAD_NUM_ROOMS = 30;
@@ -90,6 +93,12 @@ export default React.createClass({
this.setState({ searchQuery: ev.target.value });
},
+ onAddRoomToGroupButtonClick() {
+ showGroupAddRoomDialog(this.props.groupId).then(() => {
+ this.forceUpdate();
+ });
+ },
+
makeGroupRoomTiles: function(query) {
const GroupRoomTile = sdk.getComponent("groups.GroupRoomTile");
query = (query || "").toLowerCase();
@@ -120,6 +129,15 @@ export default React.createClass({
return null;
}
+ let inviteButton;
+ if (GroupStore.isUserPrivileged(this.props.groupId)) {
+ inviteButton = (<AccessibleButton className="mx_RightPanel_invite" onClick={this.onAddRoomToGroupButtonClick}>
+ <div className="mx_RightPanel_icon" >
+ <TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
+ </div>
+ <div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
+ </AccessibleButton>);
+ }
const inputBox = (
<form autoComplete="off">
<input className="mx_GroupRoomList_query" id="mx_GroupRoomList_query" type="text"
@@ -132,13 +150,14 @@ export default React.createClass({
const TruncatedList = sdk.getComponent("elements.TruncatedList");
return (
<div className="mx_GroupRoomList">
- { inputBox }
+ { inviteButton }
<GeminiScrollbarWrapper autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
<TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
createOverflowElement={this._createOverflowTile}>
{ this.makeGroupRoomTiles(this.state.searchQuery) }
</TruncatedList>
</GeminiScrollbarWrapper>
+ { inputBox }
</div>
);
},