Skip to content

Commit 2ca64d9

Browse files
ara4nara4n
committed
add gemini-scrollbar to the main roomview
1 parent cb887c6 commit 2ca64d9

File tree

2 files changed

+26
-20
lines changed

2 files changed

+26
-20
lines changed

‎src/controllers/organisms/RoomView.js‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ limitations under the License.
1717
var Matrix = require("matrix-js-sdk");
1818
var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
1919
var React = require("react");
20+
var ReactDOM = require("react-dom");
2021
var q = require("q");
2122
var ContentMessages = require("matrix-react-sdk/lib//ContentMessages");
2223
var WhoIsTyping = require("matrix-react-sdk/lib/WhoIsTyping");
@@ -60,7 +61,7 @@ module.exports = {
6061

6162
componentWillUnmount: function() {
6263
if (this.refs.messageWrapper) {
63-
var messageWrapper = this.refs.messageWrapper;
64+
var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper);
6465
messageWrapper.removeEventListener('drop', this.onDrop);
6566
messageWrapper.removeEventListener('dragover', this.onDragOver);
6667
messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd);
@@ -99,7 +100,8 @@ module.exports = {
99100
// scroll to bottom
100101
var messageWrapper = this.refs.messageWrapper;
101102
if (messageWrapper) {
102-
messageWrapper.scrollTop = messageWrapper.scrollHeight;
103+
var messageWrapperScroll = ReactDOM.findDOMNode(messageWrapper).children[2];
104+
messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
103105
}
104106
}
105107

@@ -125,7 +127,7 @@ module.exports = {
125127
onRoomTimeline: function(ev, room, toStartOfTimeline) {
126128
if (!this.isMounted()) return;
127129

128-
// ignore anything that comes in whilst pagingating: we get one
130+
// ignore anything that comes in whilst paginating: we get one
129131
// event for each new matrix event so this would cause a huge
130132
// number of UI updates. Just update the UI when the paginate
131133
// call returns.
@@ -137,10 +139,10 @@ module.exports = {
137139
if (room.roomId != this.props.roomId) return;
138140

139141
if (this.refs.messageWrapper) {
140-
var messageWrapper = this.refs.messageWrapper;
142+
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
141143
this.atBottom = (
142-
messageWrapper.scrollHeight - messageWrapper.scrollTop <=
143-
(messageWrapper.clientHeight + 150)
144+
messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <=
145+
(messageWrapperScroll.clientHeight + 150)
144146
);
145147
}
146148

@@ -224,14 +226,16 @@ module.exports = {
224226

225227
componentDidMount: function() {
226228
if (this.refs.messageWrapper) {
227-
var messageWrapper = this.refs.messageWrapper;
229+
var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper);
228230

229231
messageWrapper.addEventListener('drop', this.onDrop);
230232
messageWrapper.addEventListener('dragover', this.onDragOver);
231233
messageWrapper.addEventListener('dragleave', this.onDragLeaveOrEnd);
232234
messageWrapper.addEventListener('dragend', this.onDragLeaveOrEnd);
233235

234-
messageWrapper.scrollTop = messageWrapper.scrollHeight;
236+
var messageWrapperScroll = messageWrapper.children[2];
237+
238+
messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
235239

236240
this.fillSpace();
237241
}
@@ -242,17 +246,17 @@ module.exports = {
242246
componentDidUpdate: function() {
243247
if (!this.refs.messageWrapper) return;
244248

245-
var messageWrapper = this.refs.messageWrapper;
249+
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
246250

247251
if (this.state.paginating && !this.waiting_for_paginate) {
248-
var heightGained = messageWrapper.scrollHeight - this.oldScrollHeight;
249-
messageWrapper.scrollTop += heightGained;
252+
var heightGained = messageWrapperScroll.scrollHeight - this.oldScrollHeight;
253+
messageWrapperScroll.scrollTop += heightGained;
250254
this.oldScrollHeight = undefined;
251255
if (!this.fillSpace()) {
252256
this.setState({paginating: false});
253257
}
254258
} else if (this.atBottom) {
255-
messageWrapper.scrollTop = messageWrapper.scrollHeight;
259+
messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
256260
if (this.state.numUnreadMessages !== 0) {
257261
this.setState({numUnreadMessages: 0});
258262
}
@@ -261,11 +265,11 @@ module.exports = {
261265

262266
fillSpace: function() {
263267
if (!this.refs.messageWrapper) return;
264-
var messageWrapper = this.refs.messageWrapper;
265-
if (messageWrapper.scrollTop < messageWrapper.clientHeight && this.state.room.oldState.paginationToken) {
268+
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
269+
if (messageWrapperScroll.scrollTop < messageWrapperScroll.clientHeight && this.state.room.oldState.paginationToken) {
266270
this.setState({paginating: true});
267271

268-
this.oldScrollHeight = messageWrapper.scrollHeight;
272+
this.oldScrollHeight = messageWrapperScroll.scrollHeight;
269273

270274
if (this.state.messageCap < this.state.room.timeline.length) {
271275
this.waiting_for_paginate = false;
@@ -319,9 +323,9 @@ module.exports = {
319323

320324
onMessageListScroll: function(ev) {
321325
if (this.refs.messageWrapper) {
322-
var messageWrapper = this.refs.messageWrapper;
326+
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
323327
var wasAtBottom = this.atBottom;
324-
this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight;
328+
this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight;
325329
if (this.atBottom && !wasAtBottom) {
326330
this.forceUpdate(); // remove unread msg count
327331
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ limitations under the License.
1717
'use strict';
1818

1919
var React = require('react');
20+
var ReactDOM = require('react-dom');
2021

2122
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
2223
var dis = require('matrix-react-sdk/lib/dispatcher');
@@ -25,6 +26,7 @@ var sdk = require('matrix-react-sdk')
2526
var classNames = require("classnames");
2627
var filesize = require('filesize');
2728

29+
var GeminiScrollbar = require('react-gemini-scrollbar');
2830
var RoomViewController = require('../../../../controllers/organisms/RoomView')
2931

3032
var Loader = require("react-loader");
@@ -103,7 +105,7 @@ module.exports = React.createClass({
103105

104106
scrollToBottom: function() {
105107
if (!this.refs.messageWrapper) return;
106-
var messageWrapper = this.refs.messageWrapper;
108+
var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
107109
messageWrapper.scrollTop = messageWrapper.scrollHeight;
108110
},
109111

@@ -298,7 +300,7 @@ module.exports = React.createClass({
298300
{ conferenceCallNotification }
299301
{ aux }
300302
</div>
301-
<div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={ this.onMessageListScroll }>
303+
<GeminiScrollbar autoshow={true} ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={ this.onMessageListScroll }>
302304
<div className="mx_RoomView_messageListWrapper">
303305
{ fileDropTarget }
304306
<ol className="mx_RoomView_MessageList" aria-live="polite">
@@ -307,7 +309,7 @@ module.exports = React.createClass({
307309
{this.getEventTiles()}
308310
</ol>
309311
</div>
310-
</div>
312+
</GeminiScrollbar>
311313
<div className="mx_RoomView_statusArea">
312314
<div className="mx_RoomView_statusAreaBox">
313315
<div className="mx_RoomView_statusAreaBox_line"></div>

0 commit comments

Comments
 (0)