Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

track RHS collapse state, and implement a basic responsive design

Browse Source
This commit is contained in:
Matthew Hodgson 2015-10-11 16:09:46 +01:00
parent b05f3343e2
commit 9a8a9a4ce4
2 changed files with 53 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/skins/vector/views/organisms/RightPanel.js
View File

@ -18,13 +18,12 @@ limitations under the License.
var React = require('react');
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
module.exports = React.createClass({
displayName: 'RightPanel',
Phase : {
Blank: 'Blank',
None: 'None',
MemberList: 'MemberList',
FileList: 'FileList',
},
@ -36,11 +35,16 @@ module.exports = React.createClass({
},
onMemberListButtonClick: function() {
if (this.state.phase == this.Phase.None) {
if (this.props.collapsed) {
this.setState({ phase: this.Phase.MemberList });
dis.dispatch({
action: 'show_right_panel',
});
}
else {
this.setState({ phase: this.Phase.None });
dis.dispatch({
action: 'hide_right_panel',
});
}
},
@ -48,6 +52,7 @@ module.exports = React.createClass({
var MemberList = sdk.getComponent('organisms.MemberList');
var buttonGroup;
var panel;
if (this.props.roomId) {
buttonGroup =
<div className="mx_RightPanel_headerButtonGroup">
@ -59,13 +64,13 @@ module.exports = React.createClass({
</div>
</div>;
if (this.state.phase == this.Phase.MemberList) {
if (!this.props.collapsed && this.state.phase == this.Phase.MemberList) {
panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
}
}
var classes = "mx_RightPanel";
if (this.state.phase === this.Phase.None) {
if (this.props.collapsed) {
classes += " collapsed";
}

45
src/skins/vector/views/pages/MatrixChat.js
View File

@ -31,6 +31,43 @@ module.exports = React.createClass({
displayName: 'MatrixChat',
mixins: [MatrixChatController],
getInitialState: function() {
return {
width: 10000,
}
},
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.handleResize);
},
handleResize: function(e) {
var hideLhsThreshold = 1000;
var showLhsThreshold = 1000;
var hideRhsThreshold = 820;
var showRhsThreshold = 820;
if (this.state.width > hideLhsThreshold && window.innerWidth <= hideLhsThreshold) {
dis.dispatch({ action: 'hide_left_panel' });
}
if (this.state.width <= showLhsThreshold && window.innerWidth > showLhsThreshold) {
dis.dispatch({ action: 'show_left_panel' });
}
if (this.state.width > hideRhsThreshold && window.innerWidth <= hideRhsThreshold) {
dis.dispatch({ action: 'hide_right_panel' });
}
if (this.state.width <= showRhsThreshold && window.innerWidth > showRhsThreshold) {
dis.dispatch({ action: 'show_right_panel' });
}
this.setState({width: window.innerWidth});
},
onRoomCreated: function(room_id) {
dis.dispatch({
action: "view_room",
@ -57,19 +94,19 @@ module.exports = React.createClass({
switch (this.state.page_type) {
case this.PageTypes.RoomView:
page_element = <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
right_panel = <RightPanel roomId={this.state.currentRoom} />
right_panel = <RightPanel roomId={this.state.currentRoom} collapsed={this.state.collapse_rhs} />
break;
case this.PageTypes.UserSettings:
page_element = <UserSettings />
right_panel = <RightPanel/>
right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
break;
case this.PageTypes.CreateRoom:
page_element = <CreateRoom onRoomCreated={this.onRoomCreated}/>
right_panel = <RightPanel/>
right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
break;
case this.PageTypes.RoomDirectory:
page_element = <RoomDirectory />
right_panel = <RightPanel/>
right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
break;
}