Merge pull request #2366 from matrix-org/bwindels/fixrhscollapse

Redesign: fix remaining right panel collapse issues.

src/components/structures/GroupView.js

@@ -1272,15 +1272,6 @@ export default React.createClass({
                         <TintableSvg src="img/icons-share.svg" width="16" height="16" />
                     </AccessibleButton>,
                 );
-                if (this.props.collapsedRhs) {
-                    rightButtons.push(
-                        <AccessibleButton className="mx_GroupHeader_button"
-                            onClick={this._onShowRhsClick} title={_t('Show panel')} key="_maximiseButton"
-                        >
-                            <TintableSvg src="img/maximise.svg" width="10" height="16" />
-                        </AccessibleButton>,
-                    );
-                }
             }
 
             const rightPanel = !this.props.collapsedRhs ? <RightPanel groupId={this.props.groupId} /> : undefined;

src/components/views/right_panel/GroupHeaderButtons.js

@@ -55,23 +55,23 @@ export default class GroupHeaderButtons extends HeaderButtons {
     }
 
     renderButtons() {
-        const isPhaseGroup = [
+        const groupPhases = [
             RightPanel.Phase.GroupMemberInfo,
             RightPanel.Phase.GroupMemberList,
-        ].includes(this.state.phase);
-        const isPhaseRoom = [
+        ];
+        const roomPhases = [
             RightPanel.Phase.GroupRoomList,
             RightPanel.Phase.GroupRoomInfo,
-        ].includes(this.state.phase);
+        ];
 
         return [
             <HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
-                isHighlighted={isPhaseGroup}
+                isHighlighted={this.isPhase(groupPhases)}
                 clickPhase={RightPanel.Phase.GroupMemberList}
                 analytics={['Right Panel', 'Group Member List Button', 'click']}
             />,
             <HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc="img/icons-room-nobg.svg"
-                isHighlighted={isPhaseRoom}
+                isHighlighted={this.isPhase(roomPhases)}
                 clickPhase={RightPanel.Phase.GroupRoomList}
                 analytics={['Right Panel', 'Group Room List Button', 'click']}
             />,

src/components/views/right_panel/HeaderButtons.js

@@ -48,6 +48,17 @@ export default class HeaderButtons extends React.Component {
         }, extras));
     }
 
+    isPhase(phases) {
+        if (this.props.collapsedRhs) {
+            return false;
+        }
+        if (Array.isArray(phases)) {
+            return phases.includes(this.state.phase);
+        } else {
+            return phases === this.state.phase;
+        }
+    }
+
     onAction(payload) {
         if (payload.action === "view_right_panel_phase") {
             // only actions coming from header buttons should collapse the right panel
@@ -59,10 +70,15 @@ export default class HeaderButtons extends React.Component {
                     phase: null,
                 });
             } else {
-                if (this.props.collapsedRhs) {
+                if (this.props.collapsedRhs && payload.fromHeader) {
                     dis.dispatch({
                         action: 'show_right_panel',
                     });
+                    // emit payload again as the RightPanel didn't exist up
+                    // till show_right_panel, just without the fromHeader flag
+                    // as that would hide the right panel again
+                    dis.dispatch(Object.assign({}, payload, {fromHeader: false}));
+
                 }
                 this.setState({
                     phase: payload.phase,

src/components/views/right_panel/RoomHeaderButtons.js

@@ -46,24 +46,24 @@ export default class RoomHeaderButtons extends HeaderButtons {
     }
 
     renderButtons() {
-        const isMembersPhase = [
+        const membersPhases = [
             RightPanel.Phase.RoomMemberList,
             RightPanel.Phase.RoomMemberInfo,
-        ].includes(this.state.phase);
+        ];
 
         return [
             <HeaderButton key="_membersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
-                isHighlighted={isMembersPhase}
+                isHighlighted={this.isPhase(membersPhases)}
                 clickPhase={RightPanel.Phase.RoomMemberList}
                 analytics={['Right Panel', 'Member List Button', 'click']}
             />,
             <HeaderButton key="_filesButton" title={_t('Files')} iconSrc="img/icons-files.svg"
-                isHighlighted={this.state.phase === RightPanel.Phase.FilePanel}
+                isHighlighted={this.isPhase(RightPanel.Phase.FilePanel)}
                 clickPhase={RightPanel.Phase.FilePanel}
                 analytics={['Right Panel', 'File List Button', 'click']}
             />,
             <HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc="img/icons-notifications.svg"
-                isHighlighted={this.state.phase === RightPanel.Phase.NotificationPanel}
+                isHighlighted={this.isPhase(RightPanel.Phase.NotificationPanel)}
                 clickPhase={RightPanel.Phase.NotificationPanel}
                 analytics={['Right Panel', 'Notification List Button', 'click']}
             />,

src/components/views/rooms/RoomHeader.js

@@ -23,7 +23,6 @@ import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Modal from "../../../Modal";
-import dis from "../../../dispatcher";
 import RateLimitedFunc from '../../../ratelimitedfunc';
 
 import * as linkify from 'linkifyjs';
@@ -146,10 +145,6 @@ module.exports = React.createClass({
         MatrixClientPeg.get().sendStateEvent(this.props.room.roomId, 'm.room.avatar', {url: null}, '');
     },
 
-    onShowRhsClick: function(ev) {
-        dis.dispatch({ action: 'show_right_panel' });
-    },
-
     onShareRoomClick: function(ev) {
         const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share room dialog', '', ShareDialog, {