Browse Source

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

pull/351/head
Matthew Hodgson 7 years ago
parent
commit
cb887c699e
  1. 1
      package.json
  2. 3
      src/controllers/organisms/RoomList.js
  3. 1
      src/skins/vector/css/gemini-scrollbar.css
  4. 5
      src/skins/vector/css/organisms/LeftPanel.css
  5. 5
      src/skins/vector/views/organisms/RoomList.js

1
package.json

@ -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"
},

3
src/controllers/organisms/RoomList.js

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

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

5
src/skins/vector/css/organisms/LeftPanel.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 {

5
src/skins/vector/views/organisms/RoomList.js

@ -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…
Cancel
Save