Merge remote-tracking branch 'origin/experimental' into travis/develop-for-real

src/components/views/groups/GroupMemberList.js

@@ -17,8 +17,13 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
+import dis from '../../../dispatcher';
 import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
+import { showGroupInviteDialog } from '../../../GroupAddressPicker';
+import AccessibleButton from '../elements/AccessibleButton';
+import TintableSvg from '../elements/TintableSvg';
+import RightPanel from '../../structures/RightPanel';
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 
@@ -154,6 +159,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) {
@@ -164,11 +179,9 @@ export default React.createClass({
         }
 
         const inputBox = (
-            <form autoComplete="off">
-                <input className="mx_GroupMemberList_query" id="mx_GroupMemberList_query" type="text"
-                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                        placeholder={_t('Filter community members')} />
-            </form>
+            <input className="mx_GroupMemberList_query mx_textinput" id="mx_GroupMemberList_query" type="text"
+                    onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                    placeholder={_t('Filter community members')} autoComplete="off" />
         );
 
         const joined = this.state.members ? <div className="mx_MemberList_joined">
@@ -192,13 +205,29 @@ export default React.createClass({
                     )
                 }
             </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="18" height="14" />
+                </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>
         );
     },

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,25 +129,38 @@ 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="18" height="14" />
+                    </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"
-                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                        placeholder={_t('Filter community rooms')} />
-            </form>
+            <input className="mx_GroupRoomList_query mx_textinput" id="mx_GroupRoomList_query" type="text"
+                    onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                    placeholder={_t('Filter community rooms')} autoComplete="off" />
         );
 
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         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>
         );
     },