Merge pull request #470 from matrix-org/matthew/right-panel-collapse

Matthew/right panel collapse

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');
@@ -35,7 +36,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,
@@ -114,6 +115,10 @@ module.exports = React.createClass({
         }).done();
     },
 
+    onShowRhsClick: function(ev) {
+        dis.dispatch({ action: 'show_right_panel' });
+    },
+
     /**
      * After editing the settings, get the new name for the room
      *
@@ -287,8 +292,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.onShowRhsClick} title=">">
+                    <TintableSvg src="img/minimise.svg" width="10" height="16"/>
+                </div>
         }
 
         var right_row;

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>