Merge pull request #2361 from matrix-org/bwindels/collapserhs

Redesign: allow to hide the right panel when clicking already active button & persist

src/components/structures/GroupView.js

@@ -1311,7 +1311,7 @@ export default React.createClass({
                         <div className="mx_GroupView_header_rightCol">
                             { rightButtons }
                         </div>
-                        <GroupHeaderButtons />
+                        <GroupHeaderButtons collapsedRhs={this.props.collapsedRhs} />
                     </div>
                     <MainSplit collapsedRhs={this.props.collapsedRhs} panel={rightPanel}>
                         <GeminiScrollbarWrapper className="mx_GroupView_body">

src/components/structures/LoggedInView.js

@@ -62,7 +62,7 @@ const LoggedInView = React.createClass({
         // Called with the credentials of a registered user (if they were a ROU that
         // transitioned to PWLU)
         onRegistered: PropTypes.func,
-
+        collapsedRhs: PropTypes.bool,
         teamToken: PropTypes.string,
 
         // Used by the RoomView to handle joining rooms
@@ -438,7 +438,7 @@ const LoggedInView = React.createClass({
                         eventPixelOffset={this.props.initialEventPixelOffset}
                         key={this.props.currentRoomId || 'roomview'}
                         disabled={this.props.middleDisabled}
-                        collapsedRhs={this.props.collapseRhs}
+                        collapsedRhs={this.props.collapsedRhs}
                         ConferenceHandler={this.props.ConferenceHandler}
                     />;
                 break;
@@ -488,7 +488,7 @@ const LoggedInView = React.createClass({
                 page_element = <GroupView
                     groupId={this.props.currentGroupId}
                     isNew={this.props.currentGroupIsNew}
-                    collapsedRhs={this.props.collapseRhs}
+                    collapsedRhs={this.props.collapsedRhs}
                 />;
                 break;
         }

src/components/structures/MainSplit.js

@@ -55,7 +55,7 @@ export default class MainSplit extends React.Component {
     }
 
     componentDidMount() {
-        if (this.props.panel && !this.collapsedRhs) {
+        if (this.props.panel && !this.props.collapsedRhs) {
             this._createResizer();
         }
     }

src/components/structures/MatrixChat.js

@@ -161,7 +161,7 @@ export default React.createClass({
             viewUserId: null,
 
             collapseLhs: false,
-            collapseRhs: false,
+            collapsedRhs: window.localStorage.getItem("mx_rhs_collapsed") === "true",
             leftDisabled: false,
             middleDisabled: false,
             rightDisabled: false,
@@ -555,7 +555,7 @@ export default React.createClass({
                 break;
             case 'view_user':
                 // FIXME: ugly hack to expand the RightPanel and then re-dispatch.
-                if (this.state.collapseRhs) {
+                if (this.state.collapsedRhs) {
                     setTimeout(()=>{
                         dis.dispatch({
                             action: 'show_right_panel',
@@ -656,13 +656,15 @@ export default React.createClass({
                 });
                 break;
             case 'hide_right_panel':
+                window.localStorage.setItem("mx_rhs_collapsed", true);
                 this.setState({
-                    collapseRhs: true,
+                    collapsedRhs: true,
                 });
                 break;
             case 'show_right_panel':
+                window.localStorage.setItem("mx_rhs_collapsed", false);
                 this.setState({
-                    collapseRhs: false,
+                    collapsedRhs: false,
                 });
                 break;
             case 'panel_disable': {
@@ -1217,7 +1219,7 @@ export default React.createClass({
             view: VIEWS.LOGIN,
             ready: false,
             collapseLhs: false,
-            collapseRhs: false,
+            collapsedRhs: false,
             currentRoomId: null,
             page_type: PageTypes.RoomDirectory,
         });

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);
@@ -49,11 +50,26 @@ export default class HeaderButtons extends React.Component {
 
     onAction(payload) {
         if (payload.action === "view_right_panel_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) {
+                    dis.dispatch({
+                        action: 'show_right_panel',
+                    });
+                }
                 this.setState({
                     phase: payload.phase,
                 });
             }
         }
+    }
 
     render() {
         // inline style as this will be swapped around in future commits
@@ -62,3 +78,7 @@ export default class HeaderButtons extends React.Component {
         </div>;
     }
 }
+
+HeaderButtons.propTypes = {
+    collapsedRhs: PropTypes.bool,
+};

src/components/views/rooms/RoomHeader.js

@@ -394,14 +394,6 @@ module.exports = React.createClass({
                 </AccessibleButton>;
         }
 
-        let rightPanelButtons;
-        if (this.props.collapsedRhs) {
-            rightPanelButtons =
-                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_showPanel" onClick={this.onShowRhsClick} title={_t('Show panel')}>
-                    <TintableSvg src="img/maximise.svg" width="10" height="16" />
-                </AccessibleButton>;
-        }
-
         let rightRow;
         let manageIntegsButton;
         if (this.props.room && this.props.room.roomId && this.props.inRoom) {
@@ -419,7 +411,6 @@ module.exports = React.createClass({
                     { manageIntegsButton }
                     { forgetButton }
                     { searchButton }
-                    { rightPanelButtons }
                 </div>;
         }
 
@@ -433,7 +424,7 @@ module.exports = React.createClass({
                     { saveButton }
                     { cancelButton }
                     { rightRow }
-                    <RoomHeaderButtons />
+                    <RoomHeaderButtons collapsedRhs={this.props.collapsedRhs} />
                 </div>
             </div>
         );