Merge branch 'experimental' into nadonomy/icons

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/HeaderButton.js

@@ -36,6 +36,7 @@ export default class HeaderButton extends React.Component {
         dis.dispatch({
             action: 'view_right_panel_phase',
             phase: this.props.clickPhase,
+            fromHeader: true,
         });
     }
 

src/components/views/right_panel/HeaderButtons.js

@@ -18,6 +18,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import dis from '../../../dispatcher';
 
 export default class HeaderButtons extends React.Component {
@@ -25,7 +26,7 @@ export default class HeaderButtons extends React.Component {
         super(props);
 
         this.state = {
-            phase: initialPhase,
+            phase: props.collapsedRhs ? null : initialPhase,
             isUserPrivilegedInGroup: null,
         };
         this.onAction = this.onAction.bind(this);
@@ -47,11 +48,42 @@ 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") {
-            this.setState({
-                phase: payload.phase,
-            });
+            // only actions coming from header buttons should collapse the right panel
+            if (this.state.phase === payload.phase && payload.fromHeader) {
+                dis.dispatch({
+                    action: 'hide_right_panel',
+                });
+                this.setState({
+                    phase: null,
+                });
+            } else {
+                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,
+                });
+            }
         }
     }
 
@@ -62,3 +94,7 @@ export default class HeaderButtons extends React.Component {
         </div>;
     }
 }
+
+HeaderButtons.propTypes = {
+    collapsedRhs: PropTypes.bool,
+};

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/feather-icons/user.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/feather-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/feather-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']}
             />,