mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

add gemini-scrollbar to the main roomview

Browse source
This commit is contained in:
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 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
} }

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

@ -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>