Make right panel collpasing work in GroupView

src/components/structures/RightPanel.js

@@ -98,11 +98,15 @@ module.exports = React.createClass({
             return;
         }
 
-        // call ChatInviteDialog
+        if (this.state.phase === this.Phase.GroupMemberList) {
-        dis.dispatch({
+            // TODO: display UserPickeDialog
-            action: 'view_invite',
+        } else {
-            roomId: this.props.roomId,
+            // call UserPickerDialog
-        });
+            dis.dispatch({
+                action: 'view_invite',
+                roomId: this.props.roomId,
+            });
+        }
     },
 
     onRoomStateMember: function(ev, state, member) {
@@ -169,7 +173,6 @@ module.exports = React.createClass({
         const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
         const FilePanel = sdk.getComponent('structures.FilePanel');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
-        let buttonGroup;
         let inviteGroup;
         let panel;
 
@@ -212,50 +215,72 @@ module.exports = React.createClass({
 
         }
 
+        let headerButtons = [];
         if (this.props.roomId) {
-            buttonGroup =
+            headerButtons.push(
-                    <div className="mx_RightPanel_headerButtonGroup">
+                <AccessibleButton className="mx_RightPanel_headerButton" key="_membersButton"
-                        <AccessibleButton className="mx_RightPanel_headerButton"
+                        title={ _t('Members') } onClick={ this.onMemberListButtonClick }>
-                                title={ _t('Members') } onClick={ this.onMemberListButtonClick }>
+                    <div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
-                            <div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
+                    <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
-                            <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
+                    { membersHighlight }
-                            { membersHighlight }
+                </AccessibleButton>
-                        </AccessibleButton>
+            );
-                        <AccessibleButton
+            headerButtons.push(
-                                className="mx_RightPanel_headerButton mx_RightPanel_filebutton"
+                <AccessibleButton
-                                title={ _t('Files') } onClick={ this.onFileListButtonClick }>
+                        className="mx_RightPanel_headerButton mx_RightPanel_filebutton" key="_filesButton"
-                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
+                        title={ _t('Files') } onClick={ this.onFileListButtonClick }>
-                            <TintableSvg src="img/icons-files.svg" width="25" height="25"/>
+                    <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
-                            { filesHighlight }
+                    <TintableSvg src="img/icons-files.svg" width="25" height="25"/>
-                        </AccessibleButton>
+                    { filesHighlight }
-                        <AccessibleButton
+                </AccessibleButton>
-                                className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton"
+            );
-                                title={ _t('Notifications') } onClick={ this.onNotificationListButtonClick }>
+            headerButtons.push(
-                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
+                <AccessibleButton
-                            <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
+                        className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton" key="_notifsButton"
-                            { notificationsHighlight }
+                        title={ _t('Notifications') } onClick={ this.onNotificationListButtonClick }>
-                        </AccessibleButton>
+                    <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" title={ _t("Hide panel") } onClick={ this.onCollapseClick }>
+                    <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
-                            <TintableSvg src="img/minimise.svg" width="10" height="16"/>
+                    { notificationsHighlight }
-                        </div>
+                </AccessibleButton>
-                    </div>;
+            );
+        }
+
+        if (this.props.roomId || this.props.groupId) {
+            // Hiding the right panel hides it completely and relies on an 'expand' button
+            // being put in the RoomHeader or GroupView header, so only show the minimise
+            // button on these 2 screens or you won't be able to re-expand the panel.
+            headerButtons.push(
+                <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" key="_minimizeButton"
+                    title={ _t("Hide panel") } onClick={ this.onCollapseClick }
+                >
+                    <TintableSvg src="img/minimise.svg" width="10" height="16"/>
+                </div>
+            );
         }
 
         if (!this.props.collapsed) {
             if (this.props.roomId && this.state.phase == this.Phase.RoomMemberList) {
                 panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
             } else if (this.props.groupId && this.state.phase == this.Phase.GroupMemberList) {
-                panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />
+                panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
+                inviteGroup = (
+                    <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+                        <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 group') }</div>
+                    </AccessibleButton>
+                );
             } else if (this.state.phase == this.Phase.RoomMemberInfo) {
                 const MemberInfo = sdk.getComponent('rooms.MemberInfo');
                 panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />
             } else if (this.state.phase == this.Phase.GroupMemberInfo) {
                 const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
-                panel = <GroupMemberInfo member={this.state.member} groupId={this.props.groupId} key={this.state.member.user_id} />
+                panel = <GroupMemberInfo member={this.state.member} groupId={this.props.groupId} key={this.state.member.user_id} />;
             } else if (this.state.phase == this.Phase.NotificationPanel) {
-                panel = <NotificationPanel />
+                panel = <NotificationPanel />;
             } else if (this.state.phase == this.Phase.FilePanel) {
-                panel = <FilePanel roomId={this.props.roomId} />
+                panel = <FilePanel roomId={this.props.roomId} />;
             }
         }
 
@@ -271,7 +296,9 @@ module.exports = React.createClass({
         return (
             <aside className={classes} style={{ opacity: this.props.opacity }}>
                 <div className="mx_RightPanel_header">
-                    { buttonGroup }
+                    <div className="mx_RightPanel_headerButtonGroup">
+                        {headerButtons}
+                    </div>
                 </div>
                 { panel }
                 <div className="mx_RightPanel_footer">

src/i18n/strings/en_EN.json

@@ -205,5 +205,6 @@
   "Remember, you can always set an email address in user settings if you change your mind.": "Remember, you can always set an email address in user settings if you change your mind.",
   "To return to your account in future you need to <u>set a password</u>": "To return to your account in future you need to <u>set a password</u>",
   "Set Password": "Set Password",
-  "Couldn't load home page": "Couldn't load home page"
+  "Couldn't load home page": "Couldn't load home page",
+  "Invite to this group": "Invite to this group"
 }

src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss

@@ -70,6 +70,10 @@ limitations under the License.
     flex: 1;
 }
 
+.mx_GroupView_header_rightCol {
+    display: flex;
+}
+
 .mx_GroupView_saveButton, .mx_GroupView_cancelButton {
     display: table-cell;
 }