mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
add gemini-scrollbar to the main roomview
This commit is contained in:
parent
cb887c699e
commit
2ca64d9c15
@ -17,6 +17,7 @@ limitations under the License.
|
|||||||
var Matrix = require("matrix-js-sdk");
|
var Matrix = require("matrix-js-sdk");
|
||||||
var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
|
var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
|
||||||
var React = require("react");
|
var React = require("react");
|
||||||
|
var ReactDOM = require("react-dom");
|
||||||
var q = require("q");
|
var q = require("q");
|
||||||
var ContentMessages = require("matrix-react-sdk/lib//ContentMessages");
|
var ContentMessages = require("matrix-react-sdk/lib//ContentMessages");
|
||||||
var WhoIsTyping = require("matrix-react-sdk/lib/WhoIsTyping");
|
var WhoIsTyping = require("matrix-react-sdk/lib/WhoIsTyping");
|
||||||
@ -60,7 +61,7 @@ module.exports = {
|
|||||||
|
|
||||||
componentWillUnmount: function() {
|
componentWillUnmount: function() {
|
||||||
if (this.refs.messageWrapper) {
|
if (this.refs.messageWrapper) {
|
||||||
var messageWrapper = this.refs.messageWrapper;
|
var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper);
|
||||||
messageWrapper.removeEventListener('drop', this.onDrop);
|
messageWrapper.removeEventListener('drop', this.onDrop);
|
||||||
messageWrapper.removeEventListener('dragover', this.onDragOver);
|
messageWrapper.removeEventListener('dragover', this.onDragOver);
|
||||||
messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd);
|
messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd);
|
||||||
@ -99,7 +100,8 @@ module.exports = {
|
|||||||
// scroll to bottom
|
// scroll to bottom
|
||||||
var messageWrapper = this.refs.messageWrapper;
|
var messageWrapper = this.refs.messageWrapper;
|
||||||
if (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) {
|
onRoomTimeline: function(ev, room, toStartOfTimeline) {
|
||||||
if (!this.isMounted()) return;
|
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
|
// event for each new matrix event so this would cause a huge
|
||||||
// number of UI updates. Just update the UI when the paginate
|
// number of UI updates. Just update the UI when the paginate
|
||||||
// call returns.
|
// call returns.
|
||||||
@ -137,10 +139,10 @@ module.exports = {
|
|||||||
if (room.roomId != this.props.roomId) return;
|
if (room.roomId != this.props.roomId) return;
|
||||||
|
|
||||||
if (this.refs.messageWrapper) {
|
if (this.refs.messageWrapper) {
|
||||||
var messageWrapper = this.refs.messageWrapper;
|
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
|
||||||
this.atBottom = (
|
this.atBottom = (
|
||||||
messageWrapper.scrollHeight - messageWrapper.scrollTop <=
|
messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <=
|
||||||
(messageWrapper.clientHeight + 150)
|
(messageWrapperScroll.clientHeight + 150)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -224,14 +226,16 @@ module.exports = {
|
|||||||
|
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
if (this.refs.messageWrapper) {
|
if (this.refs.messageWrapper) {
|
||||||
var messageWrapper = this.refs.messageWrapper;
|
var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper);
|
||||||
|
|
||||||
messageWrapper.addEventListener('drop', this.onDrop);
|
messageWrapper.addEventListener('drop', this.onDrop);
|
||||||
messageWrapper.addEventListener('dragover', this.onDragOver);
|
messageWrapper.addEventListener('dragover', this.onDragOver);
|
||||||
messageWrapper.addEventListener('dragleave', this.onDragLeaveOrEnd);
|
messageWrapper.addEventListener('dragleave', this.onDragLeaveOrEnd);
|
||||||
messageWrapper.addEventListener('dragend', this.onDragLeaveOrEnd);
|
messageWrapper.addEventListener('dragend', this.onDragLeaveOrEnd);
|
||||||
|
|
||||||
messageWrapper.scrollTop = messageWrapper.scrollHeight;
|
var messageWrapperScroll = messageWrapper.children[2];
|
||||||
|
|
||||||
|
messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
|
||||||
|
|
||||||
this.fillSpace();
|
this.fillSpace();
|
||||||
}
|
}
|
||||||
@ -242,17 +246,17 @@ module.exports = {
|
|||||||
componentDidUpdate: function() {
|
componentDidUpdate: function() {
|
||||||
if (!this.refs.messageWrapper) return;
|
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) {
|
if (this.state.paginating && !this.waiting_for_paginate) {
|
||||||
var heightGained = messageWrapper.scrollHeight - this.oldScrollHeight;
|
var heightGained = messageWrapperScroll.scrollHeight - this.oldScrollHeight;
|
||||||
messageWrapper.scrollTop += heightGained;
|
messageWrapperScroll.scrollTop += heightGained;
|
||||||
this.oldScrollHeight = undefined;
|
this.oldScrollHeight = undefined;
|
||||||
if (!this.fillSpace()) {
|
if (!this.fillSpace()) {
|
||||||
this.setState({paginating: false});
|
this.setState({paginating: false});
|
||||||
}
|
}
|
||||||
} else if (this.atBottom) {
|
} else if (this.atBottom) {
|
||||||
messageWrapper.scrollTop = messageWrapper.scrollHeight;
|
messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
|
||||||
if (this.state.numUnreadMessages !== 0) {
|
if (this.state.numUnreadMessages !== 0) {
|
||||||
this.setState({numUnreadMessages: 0});
|
this.setState({numUnreadMessages: 0});
|
||||||
}
|
}
|
||||||
@ -261,11 +265,11 @@ module.exports = {
|
|||||||
|
|
||||||
fillSpace: function() {
|
fillSpace: function() {
|
||||||
if (!this.refs.messageWrapper) return;
|
if (!this.refs.messageWrapper) return;
|
||||||
var messageWrapper = this.refs.messageWrapper;
|
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
|
||||||
if (messageWrapper.scrollTop < messageWrapper.clientHeight && this.state.room.oldState.paginationToken) {
|
if (messageWrapperScroll.scrollTop < messageWrapperScroll.clientHeight && this.state.room.oldState.paginationToken) {
|
||||||
this.setState({paginating: true});
|
this.setState({paginating: true});
|
||||||
|
|
||||||
this.oldScrollHeight = messageWrapper.scrollHeight;
|
this.oldScrollHeight = messageWrapperScroll.scrollHeight;
|
||||||
|
|
||||||
if (this.state.messageCap < this.state.room.timeline.length) {
|
if (this.state.messageCap < this.state.room.timeline.length) {
|
||||||
this.waiting_for_paginate = false;
|
this.waiting_for_paginate = false;
|
||||||
@ -319,9 +323,9 @@ module.exports = {
|
|||||||
|
|
||||||
onMessageListScroll: function(ev) {
|
onMessageListScroll: function(ev) {
|
||||||
if (this.refs.messageWrapper) {
|
if (this.refs.messageWrapper) {
|
||||||
var messageWrapper = this.refs.messageWrapper;
|
var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
|
||||||
var wasAtBottom = this.atBottom;
|
var wasAtBottom = this.atBottom;
|
||||||
this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight;
|
this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight;
|
||||||
if (this.atBottom && !wasAtBottom) {
|
if (this.atBottom && !wasAtBottom) {
|
||||||
this.forceUpdate(); // remove unread msg count
|
this.forceUpdate(); // remove unread msg count
|
||||||
}
|
}
|
||||||
|
@ -17,6 +17,7 @@ limitations under the License.
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
|
var ReactDOM = require('react-dom');
|
||||||
|
|
||||||
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
||||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
var dis = require('matrix-react-sdk/lib/dispatcher');
|
||||||
@ -25,6 +26,7 @@ var sdk = require('matrix-react-sdk')
|
|||||||
var classNames = require("classnames");
|
var classNames = require("classnames");
|
||||||
var filesize = require('filesize');
|
var filesize = require('filesize');
|
||||||
|
|
||||||
|
var GeminiScrollbar = require('react-gemini-scrollbar');
|
||||||
var RoomViewController = require('../../../../controllers/organisms/RoomView')
|
var RoomViewController = require('../../../../controllers/organisms/RoomView')
|
||||||
|
|
||||||
var Loader = require("react-loader");
|
var Loader = require("react-loader");
|
||||||
@ -103,7 +105,7 @@ module.exports = React.createClass({
|
|||||||
|
|
||||||
scrollToBottom: function() {
|
scrollToBottom: function() {
|
||||||
if (!this.refs.messageWrapper) return;
|
if (!this.refs.messageWrapper) return;
|
||||||
var messageWrapper = this.refs.messageWrapper;
|
var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2];
|
||||||
messageWrapper.scrollTop = messageWrapper.scrollHeight;
|
messageWrapper.scrollTop = messageWrapper.scrollHeight;
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -298,7 +300,7 @@ module.exports = React.createClass({
|
|||||||
{ conferenceCallNotification }
|
{ conferenceCallNotification }
|
||||||
{ aux }
|
{ aux }
|
||||||
</div>
|
</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">
|
<div className="mx_RoomView_messageListWrapper">
|
||||||
{ fileDropTarget }
|
{ fileDropTarget }
|
||||||
<ol className="mx_RoomView_MessageList" aria-live="polite">
|
<ol className="mx_RoomView_MessageList" aria-live="polite">
|
||||||
@ -307,7 +309,7 @@ module.exports = React.createClass({
|
|||||||
{this.getEventTiles()}
|
{this.getEventTiles()}
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</GeminiScrollbar>
|
||||||
<div className="mx_RoomView_statusArea">
|
<div className="mx_RoomView_statusArea">
|
||||||
<div className="mx_RoomView_statusAreaBox">
|
<div className="mx_RoomView_statusAreaBox">
|
||||||
<div className="mx_RoomView_statusAreaBox_line"></div>
|
<div className="mx_RoomView_statusAreaBox_line"></div>
|
||||||
|
Loading…
Reference in New Issue
Block a user