OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

add gemini-scrollbar to the main roomview

pull/351/head
Matthew Hodgson 2015-11-10 02:04:21 +00:00
parent cb887c699e
commit 2ca64d9c15
2 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/controllers/organisms/RoomView.js
View File

@ -17,6 +17,7 @@ limitations under the License.
var Matrix = require("matrix-js-sdk");
var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
var React = require("react");
var ReactDOM = require("react-dom");
var q = require("q");
var ContentMessages = require("matrix-react-sdk/lib//ContentMessages");
var WhoIsTyping = require("matrix-react-sdk/lib/WhoIsTyping");
@ -60,7 +61,7 @@ module.exports = {
componentWillUnmount: function() {
if (this.refs.messageWrapper) {
var messageWrapper = this.refs.messageWrapper;
var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper);
messageWrapper.removeEventListener('drop', this.onDrop);
messageWrapper.removeEventListener('dragover', this.onDragOver);
messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd);
@ -99,7 +100,8 @@ module.exports = {
// scroll to bottom
var messageWrapper = this.refs.messageWrapper;
if (messageWrapper) {
messageWrapper.scrollTop = messageWrapper.scrollHeight;
var messageWrapperScroll = ReactDOM.findDOMNode(messageWrapper).children[2];
messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
}
}
@ -125,7 +127,7 @@ module.exports = {
onRoomTimeline: function(ev, room, toStartOfTimeline) {
if (!this.isMounted()) return;
// ignore anything that comes in whilst pagingating: we get one
// ignore anything that comes in whilst paginating: we get one
// event for each new matrix event so this would cause a huge
// number of UI updates. Just update the UI when the paginate
// call returns.
@ -137,10 +139,10 @@ module.exports = {
if (room.roomId != this.props.roomId) return;
if (this.refs.messageWrapper) {
var messageWrapper = this.refs.messageWrapper;
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
this.atBottom = (
messageWrapper.scrollHeight - messageWrapper.scrollTop <=
(messageWrapper.clientHeight + 150)
messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <=
(messageWrapperScroll.clientHeight + 150)
);
}
@ -224,14 +226,16 @@ module.exports = {
componentDidMount: function() {
if (this.refs.messageWrapper) {
var messageWrapper = this.refs.messageWrapper;
var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper);
messageWrapper.addEventListener('drop', this.onDrop);
messageWrapper.addEventListener('dragover', this.onDragOver);
messageWrapper.addEventListener('dragleave', this.onDragLeaveOrEnd);
messageWrapper.addEventListener('dragend', this.onDragLeaveOrEnd);
messageWrapper.scrollTop = messageWrapper.scrollHeight;
var messageWrapperScroll = messageWrapper.children[2];
messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
this.fillSpace();
}
@ -242,17 +246,17 @@ module.exports = {
componentDidUpdate: function() {
if (!this.refs.messageWrapper) return;
var messageWrapper = this.refs.messageWrapper;
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
if (this.state.paginating && !this.waiting_for_paginate) {
var heightGained = messageWrapper.scrollHeight - this.oldScrollHeight;
messageWrapper.scrollTop += heightGained;
var heightGained = messageWrapperScroll.scrollHeight - this.oldScrollHeight;
messageWrapperScroll.scrollTop += heightGained;
this.oldScrollHeight = undefined;
if (!this.fillSpace()) {
this.setState({paginating: false});
}
} else if (this.atBottom) {
messageWrapper.scrollTop = messageWrapper.scrollHeight;
messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
if (this.state.numUnreadMessages !== 0) {
this.setState({numUnreadMessages: 0});
}
@ -261,11 +265,11 @@ module.exports = {
fillSpace: function() {
if (!this.refs.messageWrapper) return;
var messageWrapper = this.refs.messageWrapper;
if (messageWrapper.scrollTop < messageWrapper.clientHeight && this.state.room.oldState.paginationToken) {
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
if (messageWrapperScroll.scrollTop < messageWrapperScroll.clientHeight && this.state.room.oldState.paginationToken) {
this.setState({paginating: true});
this.oldScrollHeight = messageWrapper.scrollHeight;
this.oldScrollHeight = messageWrapperScroll.scrollHeight;
if (this.state.messageCap < this.state.room.timeline.length) {
this.waiting_for_paginate = false;
@ -319,9 +323,9 @@ module.exports = {
onMessageListScroll: function(ev) {
if (this.refs.messageWrapper) {
var messageWrapper = this.refs.messageWrapper;
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
var wasAtBottom = this.atBottom;
this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight;
this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight;
if (this.atBottom && !wasAtBottom) {
this.forceUpdate(); // remove unread msg count
}

8
src/skins/vector/views/organisms/RoomView.js
View File

@ -17,6 +17,7 @@ limitations under the License.
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var dis = require('matrix-react-sdk/lib/dispatcher');
@ -25,6 +26,7 @@ var sdk = require('matrix-react-sdk')
var classNames = require("classnames");
var filesize = require('filesize');
var GeminiScrollbar = require('react-gemini-scrollbar');
var RoomViewController = require('../../../../controllers/organisms/RoomView')
var Loader = require("react-loader");
@ -103,7 +105,7 @@ module.exports = React.createClass({
scrollToBottom: function() {
if (!this.refs.messageWrapper) return;
var messageWrapper = this.refs.messageWrapper;
var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
messageWrapper.scrollTop = messageWrapper.scrollHeight;
},
@ -298,7 +300,7 @@ module.exports = React.createClass({
{ conferenceCallNotification }
{ aux }
</div>
<div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={ this.onMessageListScroll }>
<GeminiScrollbar autoshow={true} ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={ this.onMessageListScroll }>
<div className="mx_RoomView_messageListWrapper">
{ fileDropTarget }
<ol className="mx_RoomView_MessageList" aria-live="polite">
@ -307,7 +309,7 @@ module.exports = React.createClass({
{this.getEventTiles()}
</ol>
</div>
</div>
</GeminiScrollbar>
<div className="mx_RoomView_statusArea">
<div className="mx_RoomView_statusAreaBox">
<div className="mx_RoomView_statusAreaBox_line"></div>