OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

wip for collapsable RHS

pull/21833/head
Matthew Hodgson 2016-09-13 12:18:22 +01:00
parent ce40fa1a8f
commit 3b52081092
5 changed files with 46 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/structures/CreateRoom.js
View File

@ -31,6 +31,7 @@ module.exports = React.createClass({
propTypes: { propTypes: {
onRoomCreated: React.PropTypes.func, onRoomCreated: React.PropTypes.func,
collapsedRhs: React.PropTypes.bool,
}, },
phases: { phases: {
@ -245,7 +246,7 @@ module.exports = React.createClass({
return ( return (
<div className="mx_CreateRoom"> <div className="mx_CreateRoom">
<SimpleRoomHeader title="CreateRoom" /> <SimpleRoomHeader title="CreateRoom" collapsedRhs={ this.props.collapsedRhs }/>
<div className="mx_CreateRoom_body"> <div className="mx_CreateRoom_body">
<input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br /> <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 /> <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Topic"/> <br />

50
src/components/structures/MatrixChat.js
View File

@ -996,43 +996,49 @@ module.exports = React.createClass({
switch (this.state.page_type) { switch (this.state.page_type) {
case this.PageTypes.RoomView: case this.PageTypes.RoomView:
page_element = ( page_element = <RoomView
<RoomView ref="roomView"
ref="roomView" roomAddress={this.state.currentRoomAlias || this.state.currentRoomId}
roomAddress={this.state.currentRoomAlias || this.state.currentRoomId} autoJoin={this.state.autoJoin}
autoJoin={this.state.autoJoin} onRoomIdResolved={this.onRoomIdResolved}
onRoomIdResolved={this.onRoomIdResolved} eventId={this.state.initialEventId}
eventId={this.state.initialEventId} thirdPartyInvite={this.state.thirdPartyInvite}
thirdPartyInvite={this.state.thirdPartyInvite} oobData={this.state.roomOobData}
oobData={this.state.roomOobData} highlightedEventId={this.state.highlightedEventId}
highlightedEventId={this.state.highlightedEventId} eventPixelOffset={this.state.initialEventPixelOffset}
eventPixelOffset={this.state.initialEventPixelOffset} key={this.state.currentRoomAlias || this.state.currentRoomId}
key={this.state.currentRoomAlias || this.state.currentRoomId} opacity={this.state.middleOpacity}
opacity={this.state.middleOpacity} collapsedRhs={ this.state.collapse_rhs }
ConferenceHandler={this.props.ConferenceHandler} /> ConferenceHandler={this.props.ConferenceHandler}
); />
right_panel = <RightPanel roomId={this.state.currentRoomId} collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity} /> if (!this.state.collapse_rhs) right_panel = <RightPanel roomId={this.state.currentRoomId} opacity={this.state.sideOpacity} />
break; break;
case this.PageTypes.UserSettings: case this.PageTypes.UserSettings:
page_element = <UserSettings page_element = <UserSettings
onClose={this.onUserSettingsClose} onClose={this.onUserSettingsClose}
version={this.state.version} version={this.state.version}
brand={this.props.config.brand} brand={this.props.config.brand}
collapsedRhs={ this.state.collapse_rhs }
enableLabs={this.props.config.enableLabs} 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; break;
case this.PageTypes.CreateRoom: case this.PageTypes.CreateRoom:
page_element = <CreateRoom onRoomCreated={this.onRoomCreated}/> page_element = <CreateRoom
right_panel = <RightPanel collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity}/> onRoomCreated={this.onRoomCreated}
collapsedRhs={ this.state.collapse_rhs }
/>
if (!this.state.collapse_rhs) right_panel = <RightPanel opacity={this.state.sideOpacity}/>
break; break;
case this.PageTypes.RoomDirectory: case this.PageTypes.RoomDirectory:
page_element = <RoomDirectory /> page_element = <RoomDirectory
right_panel = <RightPanel collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity}/> collapsedRhs={ this.state.collapse_rhs }
/>
if (!this.state.collapse_rhs) right_panel = <RightPanel opacity={this.state.sideOpacity}/>
break; break;
case this.PageTypes.UserView: case this.PageTypes.UserView:
page_element = null; // deliberately null for now 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; break;
} }

4
src/components/structures/RoomView.js
View File

@ -96,7 +96,7 @@ module.exports = React.createClass({
highlightedEventId: React.PropTypes.string, highlightedEventId: React.PropTypes.string,
// is the RightPanel collapsed? // is the RightPanel collapsed?
rightPanelCollapsed: React.PropTypes.bool, collapsedRhs: React.PropTypes.bool,
}, },
getInitialState: function() { getInitialState: function() {
@ -1359,7 +1359,7 @@ module.exports = React.createClass({
<RoomHeader ref="header" <RoomHeader ref="header"
room={this.state.room} room={this.state.room}
oobData={this.props.oobData} oobData={this.props.oobData}
rightPanelCollapsed={ this.props.rightPanelCollapsed } collapsedRhs={ this.props.collapsedRhs }
/> />
<div className="mx_RoomView_auxPanel"> <div className="mx_RoomView_auxPanel">
<RoomPreviewBar onJoinClick={ this.onJoinButtonClicked } <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked }

9
src/components/structures/UserSettings.js
View File

@ -57,6 +57,9 @@ module.exports = React.createClass({
// True to show the 'labs' section of experimental features // True to show the 'labs' section of experimental features
enableLabs: React.PropTypes.bool, enableLabs: React.PropTypes.bool,
// true if RightPanel is collapsed
collapsedRhs: React.PropTypes.bool,
}, },
getDefaultProps: function() { getDefaultProps: function() {
@ -506,7 +509,11 @@ module.exports = React.createClass({
return ( return (
<div className="mx_UserSettings"> <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" <GeminiScrollbar className="mx_UserSettings_body"
autoshow={true}> autoshow={true}>

9
src/components/views/rooms/RoomHeader.js
View File

@ -35,7 +35,7 @@ module.exports = React.createClass({
oobData: React.PropTypes.object, oobData: React.PropTypes.object,
editing: React.PropTypes.bool, editing: React.PropTypes.bool,
saving: React.PropTypes.bool, saving: React.PropTypes.bool,
rightPanelCollapsed: React.PropTypes.bool, collapsedRhs: React.PropTypes.bool,
onSettingsClick: React.PropTypes.func, onSettingsClick: React.PropTypes.func,
onSaveClick: React.PropTypes.func, onSaveClick: React.PropTypes.func,
onSearchClick: React.PropTypes.func, onSearchClick: React.PropTypes.func,
@ -287,8 +287,11 @@ module.exports = React.createClass({
} }
var rightPanel_buttons; var rightPanel_buttons;
if (this.props.rightPanelCollapsed) { if (this.props.collapsedRhs) {
// TODO: embed the RightPanel header in here if it's collapsed. 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; var right_row;