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-html5-backend": "^2.0.0",
"react-dom": "^0.14.2",
"react-gemini-scrollbar": "^2.0.1",
"react-loader": "^1.4.0",
"sanitize-html": "^1.0.0"
},

View file

@ -18,6 +18,7 @@ limitations under the License.
var React = require("react");
var ReactDOM = require("react-dom");
var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
var RoomListSorter = require("matrix-react-sdk/lib/RoomListSorter");
var dis = require("matrix-react-sdk/lib/dispatcher");
@ -194,7 +195,7 @@ module.exports = {
_repositionTooltip: function(e) {
if (this.tooltip && this.tooltip.parentElement) {
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;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
overflow-y: auto;
-webkit-flex: 1 1 0;
flex: 1 1 0;
overflow-y: auto;
}
.mx_LeftPanel .mx_BottomLeftMenu {

View file

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