use gemini-scrollbar to provide fake scrollbars for the room list

This commit is contained in:
Matthew Hodgson 2015-11-10 01:40:08 +00:00
parent 2ccd881665
commit cb887c699e
5 changed files with 11 additions and 4 deletions

View File

@ -36,6 +36,7 @@
"react-dnd": "^2.0.2", "react-dnd": "^2.0.2",
"react-dnd-html5-backend": "^2.0.0", "react-dnd-html5-backend": "^2.0.0",
"react-dom": "^0.14.2", "react-dom": "^0.14.2",
"react-gemini-scrollbar": "^2.0.1",
"react-loader": "^1.4.0", "react-loader": "^1.4.0",
"sanitize-html": "^1.0.0" "sanitize-html": "^1.0.0"
}, },

View File

@ -18,6 +18,7 @@ limitations under the License.
var React = require("react"); var React = require("react");
var ReactDOM = require("react-dom"); var ReactDOM = require("react-dom");
var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg"); var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
var RoomListSorter = require("matrix-react-sdk/lib/RoomListSorter"); var RoomListSorter = require("matrix-react-sdk/lib/RoomListSorter");
var dis = require("matrix-react-sdk/lib/dispatcher"); var dis = require("matrix-react-sdk/lib/dispatcher");
@ -194,7 +195,7 @@ module.exports = {
_repositionTooltip: function(e) { _repositionTooltip: function(e) {
if (this.tooltip && this.tooltip.parentElement) { if (this.tooltip && this.tooltip.parentElement) {
var scroll = ReactDOM.findDOMNode(this); var scroll = ReactDOM.findDOMNode(this);
this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.scrollTop) + "px"; this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.children[2].scrollTop) + "px";
} }
}, },
}; };

View File

@ -0,0 +1 @@
../../../../node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css

View File

@ -38,16 +38,17 @@ limitations under the License.
} }
.mx_LeftPanel .mx_RoomList { .mx_LeftPanel .mx_RoomList_scrollbar {
-webkit-box-ordinal-group: 1; -webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1; -moz-box-ordinal-group: 1;
-ms-flex-order: 1; -ms-flex-order: 1;
-webkit-order: 1; -webkit-order: 1;
order: 1; order: 1;
overflow-y: auto;
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;
overflow-y: auto;
} }
.mx_LeftPanel .mx_BottomLeftMenu { .mx_LeftPanel .mx_BottomLeftMenu {

View File

@ -20,6 +20,7 @@ var React = require('react');
var sdk = require('matrix-react-sdk') var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher'); var dis = require('matrix-react-sdk/lib/dispatcher');
var GeminiScrollbar = require('react-gemini-scrollbar');
var RoomListController = require('../../../../controllers/organisms/RoomList') var RoomListController = require('../../../../controllers/organisms/RoomList')
module.exports = React.createClass({ module.exports = React.createClass({
@ -41,7 +42,8 @@ module.exports = React.createClass({
var self = this; var self = this;
return ( return (
<div className="mx_RoomList" onScroll={self._repositionTooltip}> <GeminiScrollbar className="mx_RoomList_scrollbar" autoshow={true} onScroll={self._repositionTooltip}>
<div className="mx_RoomList">
{ expandButton } { expandButton }
<RoomSubList list={ self.state.lists['m.invite'] } <RoomSubList list={ self.state.lists['m.invite'] }
@ -107,6 +109,7 @@ module.exports = React.createClass({
selectedRoom={ self.props.selectedRoom } selectedRoom={ self.props.selectedRoom }
collapsed={ self.props.collapsed } /> collapsed={ self.props.collapsed } />
</div> </div>
</GeminiScrollbar>
); );
} }
}); });