Skip to content

Commit 93de230

Browse files
ara4nara4n
committed
improve collapsed LHS implementation - split the tooltip into its own component; position it with javascript as overflow-y + position absolute = clipping hell; preserve the collapse state between MatrixChat re-renders; fix positioning of the 'show' button; switch to dispatcher for show/hide LHS; remove errant scrollbars
1 parent 8bdb5c0 commit 93de230

File tree

12 files changed

+128
-62
lines changed

12 files changed

+128
-62
lines changed

‎src/controllers/organisms/RoomList.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,11 @@ module.exports = {
5252
case 'call_state':
5353
this._recheckCallElement(this.props.selectedRoom);
5454
break;
55+
case 'view_tooltip':
56+
this.tooltip = payload.tooltip;
57+
this._repositionTooltip();
58+
if (this.tooltip) this.tooltip.style.display = 'block';
59+
break
5560
}
5661
},
5762

@@ -150,6 +155,13 @@ module.exports = {
150155
});
151156
},
152157

158+
_repositionTooltip: function(e) {
159+
if (this.tooltip && this.tooltip.parentElement) {
160+
var scroll = this.getDOMNode();
161+
this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.scrollTop) + "px";
162+
}
163+
},
164+
153165
makeRoomTiles: function() {
154166
var self = this;
155167
var RoomTile = sdk.getComponent("molecules.RoomTile");

‎src/skins/vector/css/molecules/RoomTile.css‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ limitations under the License.
1616

1717
.mx_RoomTile {
1818
cursor: pointer;
19-
display: table-row;
19+
/* display: table-row; */
2020
color: #818794;
2121
}
2222

@@ -45,27 +45,6 @@ limitations under the License.
4545
padding-right: 16px;
4646
}
4747

48-
.mx_RoomTile_tooltip {
49-
border: 1px solid #a9dbf4;
50-
border-radius: 8px;
51-
background-color: #fff;
52-
position: absolute;
53-
z-index: 1000;
54-
margin-top: 6px;
55-
left: 64px;
56-
padding: 6px;
57-
}
58-
59-
.mx_RoomTile_chevron {
60-
position: absolute;
61-
left: -9px;
62-
top: 8px;
63-
}
64-
65-
.mx_RoomTile_tooltip {
66-
position: absolute;
67-
}
68-
6948
.collapsed .mx_RoomTile_name {
7049
display: none;
7150
}

‎src/skins/vector/css/molecules/RoomTooltip.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
Copyright 2015 OpenMarket Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_RoomTooltip {
18+
display: none;
19+
position: fixed;
20+
border: 1px solid #a9dbf4;
21+
border-radius: 8px;
22+
background-color: #fff;
23+
z-index: 1000;
24+
margin-top: 6px;
25+
left: 64px;
26+
padding: 6px;
27+
}
28+
29+
.mx_RoomTooltip_chevron {
30+
position: absolute;
31+
left: -9px;
32+
top: 8px;
33+
}

‎src/skins/vector/css/organisms/LeftPanel.css‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,14 @@ limitations under the License.
3333
cursor: pointer;
3434
}
3535

36-
.mx_LeftPanel_showButton {
37-
position: absolute;
38-
top: 18px;
39-
left: 16px;
40-
cursor: pointer;
41-
}
42-
4336
.mx_LeftPanel .mx_RoomList {
4437
-webkit-box-ordinal-group: 1;
4538
-moz-box-ordinal-group: 1;
4639
-ms-flex-order: 1;
4740
-webkit-order: 1;
4841
order: 1;
4942

50-
overflow-y: scroll;
43+
overflow-y: auto;
5144
-webkit-flex: 1 1 0;
5245
flex: 1 1 0;
5346
}
@@ -69,10 +62,6 @@ limitations under the License.
6962
color: #378bb4;
7063
}
7164

72-
.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile_avatar {
73-
padding-left: 14px;
74-
}
75-
7665
.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
7766
margin-top: 12px;
7867
width: 100%;

‎src/skins/vector/css/organisms/RoomDirectory.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ limitations under the License.
5757
}
5858

5959
.mx_RoomDirectory_tableWrapper {
60-
overflow-y: scroll;
60+
overflow-y: auto;
6161
-webkit-flex: 1 1 0;
6262
flex: 1 1 0;
6363
}

‎src/skins/vector/css/organisms/RoomView.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ limitations under the License.
109109
margin-top: 18px;
110110
margin-bottom: 18px;
111111

112-
overflow-y: scroll;
112+
overflow-y: auto;
113113
}
114114

115115
.mx_RoomView_messageListWrapper {

‎src/skins/vector/skindex.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ skin['molecules.RoomDropTarget'] = require('./views/molecules/RoomDropTarget');
5757
skin['molecules.RoomHeader'] = require('./views/molecules/RoomHeader');
5858
skin['molecules.RoomSettings'] = require('./views/molecules/RoomSettings');
5959
skin['molecules.RoomTile'] = require('./views/molecules/RoomTile');
60+
skin['molecules.RoomTooltip'] = require('./views/molecules/RoomTooltip');
6061
skin['molecules.SenderProfile'] = require('./views/molecules/SenderProfile');
6162
skin['molecules.ServerConfig'] = require('./views/molecules/ServerConfig');
6263
skin['molecules.UnknownMessageTile'] = require('./views/molecules/UnknownMessageTile');

‎src/skins/vector/views/molecules/RoomTile.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,13 @@ module.exports = React.createClass({
7171
}
7272
*/
7373

74-
var nameElement;
74+
var label;
7575
if (!this.props.collapsed) {
76-
nameElement = <div className="mx_RoomTile_name">{name}</div>;
76+
label = <div className="mx_RoomTile_name">{name}</div>;
7777
}
7878
else if (this.state.hover) {
79-
nameElement = <div className="mx_RoomTile_tooltip">
80-
<img className="mx_RoomTile_chevron" src="img/chevron-left.png" width="9" height="16"/>
81-
{ name }
82-
</div>;
79+
var RoomTooltip = sdk.getComponent("molecules.RoomTooltip");
80+
label = <RoomTooltip room={this.props.room} ref="roomTooltip"/>;
8381
}
8482

8583
var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');
@@ -89,7 +87,7 @@ module.exports = React.createClass({
8987
<RoomAvatar room={this.props.room} />
9088
{ badge }
9189
</div>
92-
{ nameElement }
90+
{ label }
9391
</div>
9492
);
9593
}

‎src/skins/vector/views/molecules/RoomTooltip.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/*
2+
Copyright 2015 OpenMarket Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
'use strict';
18+
19+
var React = require('react');
20+
var classNames = require('classnames');
21+
22+
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
23+
24+
var sdk = require('matrix-react-sdk')
25+
var dis = require('matrix-react-sdk/lib/dispatcher');
26+
27+
module.exports = React.createClass({
28+
displayName: 'RoomTooltip',
29+
30+
componentDidMount: function() {
31+
// tell the roomlist about us
32+
dis.dispatch({
33+
action: 'view_tooltip',
34+
tooltip: this.getDOMNode(),
35+
});
36+
},
37+
38+
componentDidUnmount: function() {
39+
dis.dispatch({
40+
action: 'view_tooltip',
41+
tooltip: null,
42+
});
43+
},
44+
45+
render: function() {
46+
return (
47+
<div className="mx_RoomTooltip">
48+
<img className="mx_RoomTooltip_chevron" src="img/chevron-left.png" width="9" height="16"/>
49+
{ this.props.room.name }
50+
</div>
51+
);
52+
}
53+
});

‎src/skins/vector/views/organisms/LeftPanel.js‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,15 @@ limitations under the License.
1818

1919
var React = require('react');
2020
var sdk = require('matrix-react-sdk')
21+
var dis = require('matrix-react-sdk/lib/dispatcher');
2122

2223
module.exports = React.createClass({
2324
displayName: 'LeftPanel',
2425

25-
getInitialState: function() {
26-
return {
27-
collapsed: false,
28-
};
29-
},
30-
31-
onShowClick: function() {
32-
this.setState({ collapsed : false });
33-
},
34-
3526
onHideClick: function() {
36-
this.setState({ collapsed : true });
27+
dis.dispatch({
28+
action: 'hide_left_panel',
29+
});
3730
},
3831

3932
render: function() {
@@ -43,9 +36,8 @@ module.exports = React.createClass({
4336

4437
var collapseButton;
4538
var classes = "mx_LeftPanel";
46-
if (this.state.collapsed) {
39+
if (this.props.collapsed) {
4740
classes += " collapsed";
48-
collapseButton = <img className="mx_LeftPanel_showButton" onClick={ this.onShowClick } src="img/menu.png" width="27" height="20" alt=">"/>
4941
}
5042
else {
5143
collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>
@@ -55,7 +47,7 @@ module.exports = React.createClass({
5547
<aside className={classes}>
5648
{ collapseButton }
5749
<IncomingCallBox />
58-
<RoomList selectedRoom={this.props.selectedRoom} collapsed={this.state.collapsed}/>
50+
<RoomList selectedRoom={this.props.selectedRoom} collapsed={this.props.collapsed}/>
5951
<BottomLeftMenu />
6052
</aside>
6153
);

0 commit comments

Comments
 (0)