From 4cb1f8a2264ea440037f63945c83f523c05743b6 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 25 Aug 2016 19:46:15 +0100
Subject: [PATCH] Initial pass at sticky headers for the LHS panel section
 labels

---
 src/components/structures/RoomSubList.js          | 13 ++++++++-----
 .../css/vector-web/structures/RoomSubList.css     | 15 +++++++++++++++
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index e79f612d..3a6fecec 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -79,6 +79,7 @@ var RoomSubList = React.createClass({
         incomingCall: React.PropTypes.object,
         onShowMoreRooms: React.PropTypes.func,
         searchFilter: React.PropTypes.string,
+        headerStack: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -406,11 +407,13 @@ var RoomSubList = React.createClass({
         }
 
         return (
-            <div onClick={ this.onClick } className="mx_RoomSubList_label">
-                { this.props.collapsed ? '' : this.props.label }
-                <div className="mx_RoomSubList_roomCount">{roomCount}</div>
-                <div className={chevronClasses}></div>
-                {badge}
+            <div className="mx_RoomSubList_stickyContainer">
+                <div onClick={ this.onClick } className="mx_RoomSubList_label">
+                    { this.props.collapsed ? '' : this.props.label }
+                    <div className="mx_RoomSubList_roomCount">{roomCount}</div>
+                    <div className={chevronClasses}></div>
+                    {badge}
+                </div>
             </div>
         );
     },
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index a5ea7d14..cb80a8f7 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -20,18 +20,33 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_RoomSubList_stickyContainer {
+    height: 29px;
+    position: relative;
+}
+
 .mx_RoomSubList_label {
     position: relative;
     text-transform: uppercase;
     color: #3d3b39;
     font-weight: 600;
     font-size: 12px;
+    width: 203px; /* padding + width = LHS Panel width */
+    height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */
     padding-left: 16px; /* gutter */
     padding-right: 16px; /* gutter */
     padding-top: 6px;
     padding-bottom: 6px;
     cursor: pointer;
     background-color: rgba(118, 207, 166, 0.2);
+    z-index: 3;
+}
+
+.mx_RoomSubList_label.mx_RoomSubList_fixed {
+    position: fixed;
+    top: 0;
+    z-index: 2;
+    pointer-events: none;
 }
 
 .collapsed .mx_RoomSubList_label {