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 e1eda409d5..39e1d9b54c 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1008,43 +1008,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 f39a3c6627..947ff7cb4e 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -97,7 +97,7 @@ module.exports = React.createClass({
highlightedEventId: React.PropTypes.string,
// is the RightPanel collapsed?
- rightPanelCollapsed: React.PropTypes.bool,
+ collapsedRhs: React.PropTypes.bool,
},
getInitialState: function() {
@@ -1374,7 +1374,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 }
@@ -1413,7 +1413,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 }
@@ -1622,6 +1626,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/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..6abcb549d8 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');
@@ -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;
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>