From cb887c699ee9cae76b241f64cdd21e172c76aa1a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 10 Nov 2015 01:40:08 +0000
Subject: [PATCH] use gemini-scrollbar to provide fake scrollbars for the room
 list

---
 package.json                                 | 1 +
 src/controllers/organisms/RoomList.js        | 3 ++-
 src/skins/vector/css/gemini-scrollbar.css    | 1 +
 src/skins/vector/css/organisms/LeftPanel.css | 5 +++--
 src/skins/vector/views/organisms/RoomList.js | 5 ++++-
 5 files changed, 11 insertions(+), 4 deletions(-)
 create mode 120000 src/skins/vector/css/gemini-scrollbar.css

diff --git a/package.json b/package.json
index 778551db..a532d185 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/controllers/organisms/RoomList.js b/src/controllers/organisms/RoomList.js
index b35febca..37d4a4e4 100644
--- a/src/controllers/organisms/RoomList.js
+++ b/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"; 
         }
     },
 };
diff --git a/src/skins/vector/css/gemini-scrollbar.css b/src/skins/vector/css/gemini-scrollbar.css
new file mode 120000
index 00000000..4e3c83ba
--- /dev/null
+++ b/src/skins/vector/css/gemini-scrollbar.css
@@ -0,0 +1 @@
+../../../../node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css
\ No newline at end of file
diff --git a/src/skins/vector/css/organisms/LeftPanel.css b/src/skins/vector/css/organisms/LeftPanel.css
index 738b0782..37de0f0e 100644
--- a/src/skins/vector/css/organisms/LeftPanel.css
+++ b/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 {
diff --git a/src/skins/vector/views/organisms/RoomList.js b/src/skins/vector/views/organisms/RoomList.js
index ab673683..018cc9b0 100644
--- a/src/skins/vector/views/organisms/RoomList.js
+++ b/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>
         );
     }
 });