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

Matthew/right panel collapse
This commit is contained in:
Matthew Hodgson 2016-09-13 19:09:18 +01:00 committed by GitHub
commit 17cf2fc745
6 changed files with 79 additions and 30 deletions

View file

@ -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 />

View file

@ -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;
}

View file

@ -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}

View file

@ -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}>