Skip to content

Commit bb59e92

Browse files
dbkrdbkr
committed
Merge remote-tracking branch 'origin/develop' into read_receipts
2 parents d6b8659 + bf91155 commit bb59e92

32 files changed

+250
-147
lines changed

‎package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,8 @@
3737
"react-dnd-html5-backend": "^2.0.0",
3838
"react-dom": "^0.14.2",
3939
"react-gemini-scrollbar": "^2.0.1",
40-
"react-loader": "^1.4.0",
41-
"sanitize-html": "^1.0.0",
4240
"velocity-animate": "^1.2.3"
41+
"sanitize-html": "^1.0.0"
4342
},
4443
"devDependencies": {
4544
"babel": "^5.8.23",

‎src/controllers/organisms/RoomView.js

Lines changed: 38 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,12 @@ module.exports = {
6161
},
6262

6363
componentWillUnmount: function() {
64-
if (this.refs.messageWrapper) {
65-
var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper);
66-
messageWrapper.removeEventListener('drop', this.onDrop);
67-
messageWrapper.removeEventListener('dragover', this.onDragOver);
68-
messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd);
69-
messageWrapper.removeEventListener('dragend', this.onDragLeaveOrEnd);
64+
if (this.refs.messagePanel) {
65+
var messagePanel = ReactDOM.findDOMNode(this.refs.messagePanel);
66+
messagePanel.removeEventListener('drop', this.onDrop);
67+
messagePanel.removeEventListener('dragover', this.onDragOver);
68+
messagePanel.removeEventListener('dragleave', this.onDragLeaveOrEnd);
69+
messagePanel.removeEventListener('dragend', this.onDragLeaveOrEnd);
7070
}
7171
dis.unregister(this.dispatcherRef);
7272
if (MatrixClientPeg.get()) {
@@ -100,10 +100,9 @@ module.exports = {
100100
// Call state has changed so we may be loading video elements
101101
// which will obscure the message log.
102102
// scroll to bottom
103-
var messageWrapper = this.refs.messageWrapper;
104-
if (messageWrapper) {
105-
var messageWrapperScroll = ReactDOM.findDOMNode(messageWrapper).children[2];
106-
messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
103+
var scrollNode = this._getScrollNode();
104+
if (scrollNode) {
105+
scrollNode.scrollTop = scrollNode.scrollHeight;
107106
}
108107
}
109108

@@ -117,6 +116,17 @@ module.exports = {
117116
}
118117
},
119118

119+
_getScrollNode: function() {
120+
var panel = ReactDOM.findDOMNode(this.refs.messagePanel);
121+
if (!panel) return null;
122+
123+
if (panel.classList.contains('gm-prevented')) {
124+
return panel;
125+
} else {
126+
return panel.children[2]; // XXX: Fragile!
127+
}
128+
},
129+
120130
onSyncStateChange: function(state) {
121131
this.setState({
122132
syncState: state
@@ -143,11 +153,11 @@ module.exports = {
143153
if (this.state.joining) return;
144154
if (room.roomId != this.props.roomId) return;
145155

146-
if (this.refs.messageWrapper) {
147-
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
156+
var scrollNode = this._getScrollNode();
157+
if (scrollNode) {
148158
this.atBottom = (
149-
messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <=
150-
(messageWrapperScroll.clientHeight + 150)
159+
scrollNode.scrollHeight - scrollNode.scrollTop <=
160+
(scrollNode.clientHeight + 150) // 150?
151161
);
152162
}
153163

@@ -236,15 +246,15 @@ module.exports = {
236246
},
237247

238248
componentDidMount: function() {
239-
if (this.refs.messageWrapper) {
240-
var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper);
249+
if (this.refs.messagePanel) {
250+
var messagePanel = ReactDOM.findDOMNode(this.refs.messagePanel);
241251

242-
messageWrapper.addEventListener('drop', this.onDrop);
243-
messageWrapper.addEventListener('dragover', this.onDragOver);
244-
messageWrapper.addEventListener('dragleave', this.onDragLeaveOrEnd);
245-
messageWrapper.addEventListener('dragend', this.onDragLeaveOrEnd);
252+
messagePanel.addEventListener('drop', this.onDrop);
253+
messagePanel.addEventListener('dragover', this.onDragOver);
254+
messagePanel.addEventListener('dragleave', this.onDragLeaveOrEnd);
255+
messagePanel.addEventListener('dragend', this.onDragLeaveOrEnd);
246256

247-
var messageWrapperScroll = messageWrapper.children[2];
257+
var messageWrapperScroll = this._getScrollNode();
248258

249259
messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
250260

@@ -257,9 +267,9 @@ module.exports = {
257267
},
258268

259269
componentDidUpdate: function() {
260-
if (!this.refs.messageWrapper) return;
270+
if (!this.refs.messagePanel) return;
261271

262-
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
272+
var messageWrapperScroll = this._getScrollNode();
263273

264274
if (this.state.paginating && !this.waiting_for_paginate) {
265275
var heightGained = messageWrapperScroll.scrollHeight - this.oldScrollHeight;
@@ -277,8 +287,8 @@ module.exports = {
277287
},
278288

279289
fillSpace: function() {
280-
if (!this.refs.messageWrapper) return;
281-
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
290+
if (!this.refs.messagePanel) return;
291+
var messageWrapperScroll = this._getScrollNode();
282292
if (messageWrapperScroll.scrollTop < messageWrapperScroll.clientHeight && this.state.room.oldState.paginationToken) {
283293
this.setState({paginating: true});
284294

@@ -335,10 +345,10 @@ module.exports = {
335345
},
336346

337347
onMessageListScroll: function(ev) {
338-
if (this.refs.messageWrapper) {
339-
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
348+
if (this.refs.messagePanel) {
349+
var messageWrapperScroll = this._getScrollNode();
340350
var wasAtBottom = this.atBottom;
341-
this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight;
351+
this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight + 1;
342352
if (this.atBottom && !wasAtBottom) {
343353
this.forceUpdate(); // remove unread msg count
344354
}

‎src/skins/vector/css/atoms/MemberAvatar.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@ limitations under the License.
1717
.mx_MemberAvatar_image {
1818
z-index: 20;
1919
border-radius: 20px;
20+
position: relative;
2021
}
2122

2223
.mx_MemberAvatar_initial {
2324
position: absolute;
2425
color: #fff;
2526
text-align: center;
27+
speak: none;
2628
}
2729

2830
.mx_MemberAvatar {

‎src/skins/vector/css/atoms/RoomAvatar.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ limitations under the License.
2222
color: #fff;
2323
text-align: center;
2424
font-weight: normal ! important;
25+
speak: none;
2526
}

‎src/skins/vector/css/atoms/Spinner.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,12 @@ limitations under the License.
2121
-webkit-justify-content: center;
2222
align-items: center;
2323
justify-content: center;
24+
width: 100%;
2425
height: 100%;
26+
flex: 1;
27+
-webkit-flex: 1;
28+
}
29+
30+
.mx_MatrixChat_middlePanel .mx_Spinner {
31+
height: auto;
2532
}

‎src/skins/vector/css/common.css

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,14 @@ a:visited {
4747
color: #76cfa6;
4848
}
4949

50+
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
51+
Stop the scrollbar view from pushing out the container's overall sizing, which causes
52+
flexbox to adapt to the new size and cause the view to keep growing.
53+
*/
54+
.gm-scrollbar-container .gm-scroll-view {
55+
position: absolute;
56+
}
57+
5058
.mx_ContextualMenu_background {
5159
position: fixed;
5260
top: 0;
@@ -99,7 +107,7 @@ a:visited {
99107
height: 100%;
100108
background-color: #000;
101109
opacity: 0.2;
102-
z-index: 2000;
110+
z-index: 4000;
103111
}
104112

105113
.mx_Dialog_wrapper {
@@ -124,7 +132,7 @@ a:visited {
124132
background-color: #fff;
125133
color: #747474;
126134
text-align: center;
127-
z-index: 2010;
135+
z-index: 4010;
128136
font-weight: 300;
129137
font-size: 16px;
130138
position: relative;

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

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,25 @@ limitations under the License.
1616

1717
.mx_MessageComposer_wrapper {
1818
max-width: 960px;
19-
height: 70px;
2019
vertical-align: middle;
2120
margin: auto;
22-
background-color: #fff;
2321
border-top: 2px solid #e1dddd;
2422
}
2523

2624
.mx_MessageComposer_row {
2725
display: table-row;
2826
width: 100%;
29-
height: 70px;
3027
}
3128

3229
.mx_MessageComposer .mx_MessageComposer_avatar {
3330
display: table-cell;
3431
padding-left: 10px;
3532
padding-right: 28px;
36-
height: 70px;
33+
vertical-align: middle;
3734
}
3835

39-
.mx_MessageComposer .mx_MessageComposer_avatar img {
40-
margin-top: 18px;
41-
border-radius: 20px;
36+
.mx_MessageComposer .mx_MessageComposer_avatar .mx_MemberAvatar {
37+
display: block;
4238
}
4339

4440
.mx_MessageComposer_input {
@@ -49,17 +45,18 @@ limitations under the License.
4945
}
5046

5147
.mx_MessageComposer_input textarea {
48+
display: block;
5249
font-size: 15px;
5350
width: 100%;
54-
height: 1.2em;
55-
padding-top: 0.7em;
56-
padding-bottom: 0.7em;
51+
padding: 0px;
52+
margin-top: 6px;
53+
margin-bottom: 6px;
5754
border: 0px;
5855
resize: none;
5956
outline: none;
6057
-webkit-box-shadow: none;
6158
-moz-box-shadow: none;
62-
box-shadow: none;
59+
box-shadow: none;
6360

6461
/* needed for FF */
6562
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,9 @@ limitations under the License.
9090

9191
.mx_RoomHeader_simpleHeader {
9292
line-height: 83px;
93-
color: #76cfa6;
94-
font-weight: 400;
95-
font-size: 20px;
93+
color: #454545;
94+
font-size: 24px;
95+
font-weight: bold;
9696
overflow: hidden;
9797
text-overflow: ellipsis;
9898
}
@@ -102,7 +102,7 @@ limitations under the License.
102102
vertical-align: middle;
103103
height: 28px;
104104
color: #454545;
105-
font-weight: 800;
105+
font-weight: bold;
106106
font-size: 24px;
107107
padding-left: 19px;
108108
padding-right: 16px;

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,9 +104,7 @@ limitations under the License.
104104
}
105105

106106
.mx_RoomTile_unread,
107-
.mx_RoomTile_highlight,
108-
.mx_RoomTile_selected
109-
{
107+
.mx_RoomTile_highlight {
110108
font-weight: bold;
111109
}
112110

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -236,8 +236,8 @@ limitations under the License.
236236
order: 5;
237237

238238
width: 100%;
239-
-webkit-flex: 0 0 70px;
240-
flex: 0 0 70px;
239+
-webkit-flex: 0;
240+
flex: 0;
241241
margin-right: 2px;
242242
}
243243

‎src/skins/vector/css/pages/MatrixChat.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,8 @@ limitations under the License.
9797
/* XXX: Hack: apparently if you try to nest a flex-box
9898
* within a non-flex-box within a flex-box, the height
9999
* of the innermost element gets miscalculated if the
100-
* parents are both auto.
100+
* parents are both auto. Height has to be auto here
101+
* for RoomView to correctly fit when the Toolbar is shown.
101102
* Ideally we'd launch straight into the RoomView at this
102103
* point, but instead we fudge it and make the middlePanel
103104
* flex itself.

‎src/skins/vector/css/templates/Login.css

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,18 @@ limitations under the License.
1717
.mx_Login {
1818
width: 100%;
1919
height: 100%;
20+
21+
display: -webkit-box;
22+
display: -moz-box;
23+
display: -ms-flexbox;
24+
display: -webkit-flex;
25+
display: flex;
26+
-webkit-align-items: center;
27+
align-items: center;
28+
-webkit-justify-content: center;
29+
justify-content: center;
30+
31+
overflow: auto;
2032
}
2133

2234
.mx_Login h2 {
@@ -28,8 +40,10 @@ limitations under the License.
2840

2941
.mx_Login_box {
3042
width: 300px;
43+
min-height: 450px;
44+
padding-top: 50px;
45+
padding-bottom: 50px;
3146
margin: auto;
32-
padding-top: 100px;
3347
}
3448

3549
.mx_Login_logo {

‎src/skins/vector/views/atoms/MemberAvatar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ module.exports = React.createClass({
5050

5151
return (
5252
<span className="mx_MemberAvatar" {...this.props}>
53-
<span className="mx_MemberAvatar_initial"
53+
<span className="mx_MemberAvatar_initial" aria-hidden="true"
5454
style={{ fontSize: (this.props.width * 0.75) + "px",
5555
width: this.props.width + "px",
5656
lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>

‎src/skins/vector/views/atoms/RoomAvatar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ module.exports = React.createClass({
5757

5858
return (
5959
<span>
60-
<span className="mx_RoomAvatar_initial"
60+
<span className="mx_RoomAvatar_initial" aria-hidden="true"
6161
style={{ fontSize: (this.props.width * 0.75) + "px",
6262
width: this.props.width + "px",
6363
lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,6 @@ var React = require('react');
2121
var sdk = require('matrix-react-sdk')
2222
var ChangeAvatarController = require('matrix-react-sdk/lib/controllers/molecules/ChangeAvatar')
2323

24-
var Loader = require("react-loader");
25-
26-
2724
module.exports = React.createClass({
2825
displayName: 'ChangeAvatar',
2926
mixins: [ChangeAvatarController],
@@ -70,6 +67,7 @@ module.exports = React.createClass({
7067
</div>
7168
);
7269
case this.Phases.Uploading:
70+
var Loader = sdk.getComponent("atoms.Spinner");
7371
return (
7472
<Loader />
7573
);

0 commit comments

Comments
 (0)