mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-12 01:05:53 +03:00
Code Issues Projects Releases Packages Wiki Activity

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
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: {
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 />

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

@ -996,43 +996,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;
}

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

@ -96,7 +96,7 @@ module.exports = React.createClass({
highlightedEventId: React.PropTypes.string,
// is the RightPanel collapsed?
rightPanelCollapsed: React.PropTypes.bool,
collapsedRhs: React.PropTypes.bool,
},
getInitialState: function() {
@ -1359,7 +1359,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 }

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

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

@ -35,7 +35,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,
@ -287,8 +287,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.props.onSearchClick} title="Search">
<TintableSvg src="img/icons-search.svg" width="35" height="35"/>
</div>
}
var right_row;