imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip for collapsable RHS

Browse source
This commit is contained in:
Matthew Hodgson 2016-09-13 12:18:22 +01:00
parent ce40fa1a8f
commit 3b52081092
5 changed files with 46 additions and 29 deletions
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 />

28
src/components/structures/MatrixChat.js
View file

@ -996,8 +996,7 @@ 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}
@ -1009,30 +1008,37 @@ module.exports = React.createClass({
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}
ConferenceHandler={this.props.ConferenceHandler} /> collapsedRhs={ this.state.collapse_rhs }
); 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;