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

6
src/skins/vector/views/molecules/BottomLeftMenu.js
View file

@ -41,19 +41,19 @@ module.exports = React.createClass({
<div className="mx_BottomLeftMenu_options">
<div className="mx_RoomTile" onClick={this.onCreateRoomClick}>
<div className="mx_RoomTile_avatar">
<img src="img/create-big.png" alt="Create new room" title="Create new room" width="42" height="42"/>
<img src="img/create-big.png" alt="Create new room" title="Create new room" width="36" height="36"/>
</div>
<div className="mx_RoomTile_name">Create new room</div>
</div>
<div className="mx_RoomTile" onClick={this.onRoomDirectoryClick}>
<div className="mx_RoomTile_avatar">
<img src="img/directory-big.png" alt="Directory" title="Directory" width="42" height="42"/>
<img src="img/directory-big.png" alt="Directory" title="Directory" width="36" height="36"/>
</div>
<div className="mx_RoomTile_name">Directory</div>
</div>
<div className="mx_RoomTile" onClick={this.onSettingsClick}>
<div className="mx_RoomTile_avatar">
<img src="img/settings-big.png" alt="Settings" title="Settings" width="42" height="42"/>
<img src="img/settings-big.png" alt="Settings" title="Settings" width="36" height="36"/>
</div>
<div className="mx_RoomTile_name">Settings</div>
</div>

2
src/skins/vector/views/molecules/RoomHeader.js
View file

@ -92,7 +92,7 @@ module.exports = React.createClass({
var roomAvatar = null;
if (this.props.room) {
roomAvatar = (
<RoomAvatar room={this.props.room} />
<RoomAvatar room={this.props.room} width="48" height="48" />
);
}

29
src/skins/vector/views/molecules/RoomTile.js
View file

@ -28,6 +28,19 @@ var sdk = require('matrix-react-sdk')
module.exports = React.createClass({
displayName: 'RoomTile',
mixins: [RoomTileController],
getInitialState: function() {
return( { hover : false });
},
onMouseEnter: function() {
this.setState( { hover : true });
},
onMouseLeave: function() {
this.setState( { hover : false });
},
render: function() {
var myUserId = MatrixClientPeg.get().credentials.userId;
var classes = classNames({
@ -57,14 +70,26 @@ module.exports = React.createClass({
nameCell = <div className="mx_RoomTile_name">{name}</div>;
}
*/
var nameElement;
if (!this.props.collapsed) {
nameElement = <div className="mx_RoomTile_name">{name}</div>;
}
else if (this.state.hover) {
nameElement = <div className="mx_RoomTile_tooltip">
<img className="mx_RoomTile_chevron" src="img/chevron-left.png" width="9" height="16"/>
{ name }
</div>;
}
var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');
return (
<div className={classes} onClick={this.onClick}>
<div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<div className="mx_RoomTile_avatar">
<RoomAvatar room={this.props.room} />
{ badge }
</div>
<div className="mx_RoomTile_name">{name}</div>
{ nameElement }
</div>
);
}

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>
);

4
src/skins/vector/views/organisms/RoomList.js
View file

@ -34,13 +34,15 @@ module.exports = React.createClass({
callElement = <CallView className="mx_MatrixChat_callView"/>
}
var recentsLabel = this.props.collapsed ? "" : "Recents";
return (
<div className="mx_RoomList">
{callElement}
<h2 className="mx_RoomList_favourites_label">Favourites</h2>
<RoomDropTarget text="Drop here to favourite"/>
<h2 className="mx_RoomList_recents_label">Recents</h2>
<h2 className="mx_RoomList_recents_label">{ recentsLabel }&nbsp;</h2>
<div className="mx_RoomList_recents">
{this.makeRoomTiles()}
</div>