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

implement collapsible leftpanel at last

Browse source
This commit is contained in:
Matthew Hodgson 2015-10-11 02:09:14 +01:00
parent a05437e81f
commit 47ed8971e3
16 changed files with 107 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/skins/vector/views/organisms/LeftPanel.js
View file

@ -22,16 +22,40 @@ var sdk = require('matrix-react-sdk')
module.exports = React.createClass({
displayName: 'LeftPanel',
getInitialState: function() {
return {
collapsed: false,
};
},
onShowClick: function() {
this.setState({ collapsed : false });
},
onHideClick: function() {
this.setState({ collapsed : true });
},
render: function() {
var RoomList = sdk.getComponent('organisms.RoomList');
var BottomLeftMenu = sdk.getComponent('molecules.BottomLeftMenu');
var IncomingCallBox = sdk.getComponent('molecules.voip.IncomingCallBox');
var collapseButton;
var classes = "mx_LeftPanel";
if (this.state.collapsed) {
classes += " collapsed";
collapseButton = <img className="mx_LeftPanel_showButton" onClick={ this.onShowClick } src="img/menu.png" width="27" height="20" alt=">"/>
}
else {
collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>
}
return (
<aside className="mx_LeftPanel">
<img className="mx_LeftPanel_hideButton" src="img/hide.png" width="32" height="32" alt="<"/>
<aside className={classes}>
{ collapseButton }
<IncomingCallBox />
<RoomList selectedRoom={this.props.selectedRoom} />
<RoomList selectedRoom={this.props.selectedRoom} collapsed={this.state.collapsed}/>
<BottomLeftMenu />
</aside>
);