diff --git a/src/controllers/organisms/RoomList.js b/src/controllers/organisms/RoomList.js
index 2602315ac5..b178fce7a6 100644
--- a/src/controllers/organisms/RoomList.js
+++ b/src/controllers/organisms/RoomList.js
@@ -159,6 +159,7 @@ module.exports = {
<RoomTile
room={room}
key={room.roomId}
+ collapsed={self.props.collapsed}
selected={selected}
unread={self.state.activityMap[room.roomId] === 1}
highlight={self.state.activityMap[room.roomId] === 2}
diff --git a/src/skins/vector/css/hide.css b/src/skins/vector/css/hide.css
index 381f9a18cc..fbc2db207e 100644
--- a/src/skins/vector/css/hide.css
+++ b/src/skins/vector/css/hide.css
@@ -1,7 +1,6 @@
.mx_RoomDropTarget,
.mx_RoomList_favourites_label,
.mx_RoomList_archive_label,
-.mx_LeftPanel_hideButton,
.mx_RoomHeader_search,
.mx_RoomSettings_encrypt,
.mx_CreateRoom_encrypt,
diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/molecules/RoomTile.css
index d43945c377..2a8abf58d3 100644
--- a/src/skins/vector/css/molecules/RoomTile.css
+++ b/src/skins/vector/css/molecules/RoomTile.css
@@ -22,13 +22,13 @@ limitations under the License.
.mx_RoomTile_avatar {
display: table-cell;
- padding-right: 12px;
+ padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
- padding-left: 16px;
+ padding-left: 10px;
vertical-align: middle;
- width: 40px;
- height: 40px;
+ width: 36px;
+ height: 36px;
position: relative;
}
@@ -45,6 +45,31 @@ limitations under the License.
padding-right: 16px;
}
+.mx_RoomTile_tooltip {
+ border: 1px solid #a9dbf4;
+ border-radius: 8px;
+ background-color: #fff;
+ position: absolute;
+ z-index: 1000;
+ margin-top: 6px;
+ left: 64px;
+ padding: 6px;
+}
+
+.mx_RoomTile_chevron {
+ position: absolute;
+ left: -9px;
+ top: 8px;
+}
+
+.mx_RoomTile_tooltip {
+ position: absolute;
+}
+
+.collapsed .mx_RoomTile_name {
+ display: none;
+}
+
/*
.mx_RoomTile_nameBadge {
display: table;
diff --git a/src/skins/vector/css/organisms/LeftPanel.css b/src/skins/vector/css/organisms/LeftPanel.css
index a00184dd22..6643c33f77 100644
--- a/src/skins/vector/css/organisms/LeftPanel.css
+++ b/src/skins/vector/css/organisms/LeftPanel.css
@@ -28,8 +28,16 @@ limitations under the License.
.mx_LeftPanel_hideButton {
position: absolute;
- top: 10px;
- right: 10px;
+ top: 18px;
+ right: 8px;
+ cursor: pointer;
+}
+
+.mx_LeftPanel_showButton {
+ position: absolute;
+ top: 18px;
+ left: 16px;
+ cursor: pointer;
}
.mx_LeftPanel .mx_RoomList {
diff --git a/src/skins/vector/css/organisms/RoomList.css b/src/skins/vector/css/organisms/RoomList.css
index 35978e5be3..21cb781227 100644
--- a/src/skins/vector/css/organisms/RoomList.css
+++ b/src/skins/vector/css/organisms/RoomList.css
@@ -27,4 +27,5 @@ limitations under the License.
.mx_RoomList h2 {
padding-left: 16px;
padding-right: 16px;
+ padding-bottom: 10px;
}
\ No newline at end of file
diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/pages/MatrixChat.css
index 1c02d8cccd..e835b73013 100644
--- a/src/skins/vector/css/pages/MatrixChat.css
+++ b/src/skins/vector/css/pages/MatrixChat.css
@@ -73,6 +73,11 @@ limitations under the License.
flex: 0 0 230px;
}
+.mx_MatrixChat .mx_LeftPanel.collapsed {
+ -webkit-flex: 0 0 60px;
+ flex: 0 0 60px;
+}
+
.mx_MatrixChat .mx_MatrixChat_middlePanel {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
diff --git a/src/skins/vector/img/create-big.png b/src/skins/vector/img/create-big.png
index 9c4627b1a1..247b0030cd 100644
Binary files a/src/skins/vector/img/create-big.png and b/src/skins/vector/img/create-big.png differ
diff --git a/src/skins/vector/img/directory-big.png b/src/skins/vector/img/directory-big.png
index fb2bc388be..bbcb16a4b7 100644
Binary files a/src/skins/vector/img/directory-big.png and b/src/skins/vector/img/directory-big.png differ
diff --git a/src/skins/vector/img/hide.png b/src/skins/vector/img/hide.png
index 3e64618b09..31604589af 100644
Binary files a/src/skins/vector/img/hide.png and b/src/skins/vector/img/hide.png differ
diff --git a/src/skins/vector/img/menu.png b/src/skins/vector/img/menu.png
old mode 100644
new mode 100755
index 3550878bf2..b45f88950f
Binary files a/src/skins/vector/img/menu.png and b/src/skins/vector/img/menu.png differ
diff --git a/src/skins/vector/img/settings-big.png b/src/skins/vector/img/settings-big.png
index 663ca16315..3be13bc712 100644
Binary files a/src/skins/vector/img/settings-big.png and b/src/skins/vector/img/settings-big.png differ
diff --git a/src/skins/vector/views/molecules/BottomLeftMenu.js b/src/skins/vector/views/molecules/BottomLeftMenu.js
index 809da0ee28..2af3bfc723 100644
--- a/src/skins/vector/views/molecules/BottomLeftMenu.js
+++ b/src/skins/vector/views/molecules/BottomLeftMenu.js
@@ -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>
diff --git a/src/skins/vector/views/molecules/RoomHeader.js b/src/skins/vector/views/molecules/RoomHeader.js
index fc097d399b..3518d1dd58 100644
--- a/src/skins/vector/views/molecules/RoomHeader.js
+++ b/src/skins/vector/views/molecules/RoomHeader.js
@@ -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" />
);
}
diff --git a/src/skins/vector/views/molecules/RoomTile.js b/src/skins/vector/views/molecules/RoomTile.js
index 61fa0021b7..f43b00236a 100644
--- a/src/skins/vector/views/molecules/RoomTile.js
+++ b/src/skins/vector/views/molecules/RoomTile.js
@@ -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>
);
}
diff --git a/src/skins/vector/views/organisms/LeftPanel.js b/src/skins/vector/views/organisms/LeftPanel.js
index 15612704a5..fbd5d3c1d1 100644
--- a/src/skins/vector/views/organisms/LeftPanel.js
+++ b/src/skins/vector/views/organisms/LeftPanel.js
@@ -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>
);
diff --git a/src/skins/vector/views/organisms/RoomList.js b/src/skins/vector/views/organisms/RoomList.js
index 779fd1c6ae..2bca90a0b9 100644
--- a/src/skins/vector/views/organisms/RoomList.js
+++ b/src/skins/vector/views/organisms/RoomList.js
@@ -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 } </h2>
<div className="mx_RoomList_recents">
{this.makeRoomTiles()}
</div>