From 3b520810928af60fdb20f7f09e5862ecc17ad08d Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 13 Sep 2016 12:18:22 +0100
Subject: [PATCH 1/3] wip for collapsable RHS

---
 src/components/structures/CreateRoom.js   |  3 +-
 src/components/structures/MatrixChat.js   | 50 +++++++++++++----------
 src/components/structures/RoomView.js     |  4 +-
 src/components/structures/UserSettings.js |  9 +++-
 src/components/views/rooms/RoomHeader.js  |  9 ++--
 5 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/components/structures/CreateRoom.js b/src/components/structures/CreateRoom.js
index e7585e3640..ce4c0916d4 100644
--- a/src/components/structures/CreateRoom.js
+++ b/src/components/structures/CreateRoom.js
@@ -31,6 +31,7 @@ module.exports = React.createClass({
 
     propTypes: {
         onRoomCreated: React.PropTypes.func,
+        collapsedRhs: React.PropTypes.bool,
     },
 
     phases: {
@@ -245,7 +246,7 @@ module.exports = React.createClass({
 
             return (
             <div className="mx_CreateRoom">
-                <SimpleRoomHeader title="CreateRoom" />
+                <SimpleRoomHeader title="CreateRoom" collapsedRhs={ this.props.collapsedRhs }/>
                 <div className="mx_CreateRoom_body">
                     <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
                     <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Topic"/> <br />
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index c83da2b8f0..d93f5a6831 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -996,43 +996,49 @@ module.exports = React.createClass({
 
             switch (this.state.page_type) {
                 case this.PageTypes.RoomView:
-                    page_element = (
-                        <RoomView
-                            ref="roomView"
-                            roomAddress={this.state.currentRoomAlias || this.state.currentRoomId}
-                            autoJoin={this.state.autoJoin}
-                            onRoomIdResolved={this.onRoomIdResolved}
-                            eventId={this.state.initialEventId}
-                            thirdPartyInvite={this.state.thirdPartyInvite}
-                            oobData={this.state.roomOobData}
-                            highlightedEventId={this.state.highlightedEventId}
-                            eventPixelOffset={this.state.initialEventPixelOffset}
-                            key={this.state.currentRoomAlias || this.state.currentRoomId}
-                            opacity={this.state.middleOpacity}
-                            ConferenceHandler={this.props.ConferenceHandler} />
-                    );
-                    right_panel = <RightPanel roomId={this.state.currentRoomId} collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity} />
+                    page_element = <RoomView
+                        ref="roomView"
+                        roomAddress={this.state.currentRoomAlias || this.state.currentRoomId}
+                        autoJoin={this.state.autoJoin}
+                        onRoomIdResolved={this.onRoomIdResolved}
+                        eventId={this.state.initialEventId}
+                        thirdPartyInvite={this.state.thirdPartyInvite}
+                        oobData={this.state.roomOobData}
+                        highlightedEventId={this.state.highlightedEventId}
+                        eventPixelOffset={this.state.initialEventPixelOffset}
+                        key={this.state.currentRoomAlias || this.state.currentRoomId}
+                        opacity={this.state.middleOpacity}
+                        collapsedRhs={ this.state.collapse_rhs }
+                        ConferenceHandler={this.props.ConferenceHandler}
+                    />
+                    if (!this.state.collapse_rhs) right_panel = <RightPanel roomId={this.state.currentRoomId} opacity={this.state.sideOpacity} />
                     break;
                 case this.PageTypes.UserSettings:
                     page_element = <UserSettings
                         onClose={this.onUserSettingsClose}
                         version={this.state.version}
                         brand={this.props.config.brand}
+                        collapsedRhs={ this.state.collapse_rhs }
                         enableLabs={this.props.config.enableLabs}
                     />
-                    right_panel = <RightPanel collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity}/>
+                    if (!this.state.collapse_rhs) right_panel = <RightPanel opacity={this.state.sideOpacity}/>
                     break;
                 case this.PageTypes.CreateRoom:
-                    page_element = <CreateRoom onRoomCreated={this.onRoomCreated}/>
-                    right_panel = <RightPanel collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity}/>
+                    page_element = <CreateRoom
+                        onRoomCreated={this.onRoomCreated}
+                        collapsedRhs={ this.state.collapse_rhs }
+                    />
+                    if (!this.state.collapse_rhs) right_panel = <RightPanel opacity={this.state.sideOpacity}/>
                     break;
                 case this.PageTypes.RoomDirectory:
-                    page_element = <RoomDirectory />
-                    right_panel = <RightPanel collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity}/>
+                    page_element = <RoomDirectory
+                        collapsedRhs={ this.state.collapse_rhs }
+                    />
+                    if (!this.state.collapse_rhs) right_panel = <RightPanel opacity={this.state.sideOpacity}/>
                     break;
                 case this.PageTypes.UserView:
                     page_element = null; // deliberately null for now
-                    right_panel = <RightPanel userId={this.state.viewUserId} collapsed={false} opacity={this.state.sideOpacity} />
+                    right_panel = <RightPanel userId={this.state.viewUserId} opacity={this.state.sideOpacity} />
                     break;
             }
 
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 49d171f631..9c0c0080fa 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -96,7 +96,7 @@ module.exports = React.createClass({
         highlightedEventId: React.PropTypes.string,
 
         // is the RightPanel collapsed?
-        rightPanelCollapsed: React.PropTypes.bool,
+        collapsedRhs: React.PropTypes.bool,
     },
 
     getInitialState: function() {
@@ -1359,7 +1359,7 @@ module.exports = React.createClass({
                             <RoomHeader ref="header"
                                 room={this.state.room}
                                 oobData={this.props.oobData}
-                                rightPanelCollapsed={ this.props.rightPanelCollapsed }
+                                collapsedRhs={ this.props.collapsedRhs }
                             />
                             <div className="mx_RoomView_auxPanel">
                                 <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked }
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 89972aebb8..fadb97705b 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -57,6 +57,9 @@ module.exports = React.createClass({
 
         // True to show the 'labs' section of experimental features
         enableLabs: React.PropTypes.bool,
+
+        // true if RightPanel is collapsed
+        collapsedRhs: React.PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -506,7 +509,11 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_UserSettings">
-                <SimpleRoomHeader title="Settings" onCancelClick={ this.props.onClose }/>
+                <SimpleRoomHeader
+                    title="Settings"
+                    collapsedRhs={ this.props.collapsedRhs }
+                    onCancelClick={ this.props.onClose }
+                />
 
                 <GeminiScrollbar className="mx_UserSettings_body"
                                  autoshow={true}>
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index f7f4f50a84..036de649ca 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -35,7 +35,7 @@ module.exports = React.createClass({
         oobData: React.PropTypes.object,
         editing: React.PropTypes.bool,
         saving: React.PropTypes.bool,
-        rightPanelCollapsed: React.PropTypes.bool,
+        collapsedRhs: React.PropTypes.bool,
         onSettingsClick: React.PropTypes.func,
         onSaveClick: React.PropTypes.func,
         onSearchClick: React.PropTypes.func,
@@ -287,8 +287,11 @@ module.exports = React.createClass({
         }
 
         var rightPanel_buttons;
-        if (this.props.rightPanelCollapsed) {
-            // TODO: embed the RightPanel header in here if it's collapsed.
+        if (this.props.collapsedRhs) {
+            rightPanel_buttons =
+                <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
+                    <TintableSvg src="img/icons-search.svg" width="35" height="35"/>
+                </div>
         }
 
         var right_row;

From 32b1b6f58aa175de75afb11ac75c2ff217dcc2f0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 13 Sep 2016 13:12:45 +0100
Subject: [PATCH 2/3] WIP

---
 src/components/views/rooms/RoomHeader.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 036de649ca..431ad17dc2 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -20,6 +20,7 @@ var React = require('react');
 var sdk = require('../../../index');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var Modal = require("../../../Modal");
+var dis = require("../../../dispatcher");
 
 var linkify = require('linkifyjs');
 var linkifyElement = require('linkifyjs/element');
@@ -114,6 +115,10 @@ module.exports = React.createClass({
         }).done();
     },
 
+    onCollapseRhsClick: function(ev) {
+        dis.dispatch({ action: 'hide_right_panel' });
+    },
+
     /**
      * After editing the settings, get the new name for the room
      *
@@ -289,8 +294,8 @@ module.exports = React.createClass({
         var rightPanel_buttons;
         if (this.props.collapsedRhs) {
             rightPanel_buttons =
-                <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
-                    <TintableSvg src="img/icons-search.svg" width="35" height="35"/>
+                <div className="mx_RoomHeader_button" onClick={this.onCollapseRhsClick} title=">">
+                    <TintableSvg src="img/minimise.svg" width="10" height="16"/>
                 </div>
         }
 

From eb6a4f97babe92e0f9c70900bea6b3da004ed32e Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 13 Sep 2016 19:00:35 +0100
Subject: [PATCH 3/3] make it work

---
 src/components/structures/RoomView.js         |  7 +++++-
 src/components/views/rooms/RoomHeader.js      |  6 ++---
 .../views/rooms/SimpleRoomHeader.js           | 22 +++++++++++++++++++
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 9c0c0080fa..6e92e9e834 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1398,7 +1398,11 @@ module.exports = React.createClass({
                 // We have a regular invite for this room.
                 return (
                     <div className="mx_RoomView">
-                        <RoomHeader ref="header" room={this.state.room}/>
+                        <RoomHeader
+                            ref="header"
+                            room={this.state.room}
+                            collapsedRhs={ this.props.collapsedRhs }
+                        />
                         <div className="mx_RoomView_auxPanel">
                             <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked }
                                             onRejectClick={ this.onRejectButtonClicked }
@@ -1607,6 +1611,7 @@ module.exports = React.createClass({
                     oobData={this.props.oobData}
                     editing={this.state.editingRoomSettings}
                     saving={this.state.uploadingRoomSettings}
+                    collapsedRhs={ this.props.collapsedRhs }
                     onSearchClick={this.onSearchClick}
                     onSettingsClick={this.onSettingsClick}
                     onSaveClick={this.onSettingsSaveClick}
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 431ad17dc2..6abcb549d8 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -115,8 +115,8 @@ module.exports = React.createClass({
         }).done();
     },
 
-    onCollapseRhsClick: function(ev) {
-        dis.dispatch({ action: 'hide_right_panel' });
+    onShowRhsClick: function(ev) {
+        dis.dispatch({ action: 'show_right_panel' });
     },
 
     /**
@@ -294,7 +294,7 @@ module.exports = React.createClass({
         var rightPanel_buttons;
         if (this.props.collapsedRhs) {
             rightPanel_buttons =
-                <div className="mx_RoomHeader_button" onClick={this.onCollapseRhsClick} title=">">
+                <div className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title=">">
                     <TintableSvg src="img/minimise.svg" width="10" height="16"/>
                 </div>
         }
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index 2f8c5eaf11..7f2bb0048a 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -17,6 +17,8 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var sdk = require('../../../index');
+var dis = require("../../../dispatcher");
 
 /*
  * A stripped-down room header used for things like the user settings
@@ -28,19 +30,39 @@ module.exports = React.createClass({
     propTypes: {
         title: React.PropTypes.string,
         onCancelClick: React.PropTypes.func,
+
+        // is the RightPanel collapsed?
+        collapsedRhs: React.PropTypes.bool,
+    },
+
+    onShowRhsClick: function(ev) {
+        dis.dispatch({ action: 'show_right_panel' });
     },
 
     render: function() {
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+
         var cancelButton;
         if (this.props.onCancelClick) {
             cancelButton = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>
         }
 
+        var showRhsButton;
+        /* // don't bother cluttering things up with this for now.
+        if (this.props.collapsedRhs) {
+            showRhsButton =
+                <div className="mx_RoomHeader_button" style={{ float: 'right' }} onClick={this.onShowRhsClick} title=">">
+                    <TintableSvg src="img/minimise.svg" width="10" height="16"/>
+                </div>
+        }
+        */
+
         return (
             <div className="mx_RoomHeader" >
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_simpleHeader">
                         { this.props.title }
+                        { showRhsButton }
                         { cancelButton }
                     </div>
                 </div>