mirror of
https://github.com/element-hq/element-web
synced 2024-11-22 17:25:50 +03:00
use gemini-scrollbar to provide fake scrollbars for the room list
This commit is contained in:
parent
2ccd881665
commit
cb887c699e
5 changed files with 11 additions and 4 deletions
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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";
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
1
src/skins/vector/css/gemini-scrollbar.css
Symbolic link
1
src/skins/vector/css/gemini-scrollbar.css
Symbolic link
|
@ -0,0 +1 @@
|
|||
../../../../node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue