From 5467fd89d87d209f65fc3c8f60b2bd690a141736 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 26 Aug 2016 14:35:40 +0100
Subject: [PATCH] Getting click to not collapse expand when header stuck

---
 src/components/structures/RoomSubList.js      | 85 ++++++++++---------
 .../css/vector-web/structures/LeftPanel.css   |  1 +
 .../css/vector-web/structures/RoomSubList.css |  3 +-
 3 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index e1c65c98..f3122dec 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var ReactDOM = require('react-dom');
 var classNames = require('classnames');
 var DropTarget = require('react-dnd').DropTarget;
 var sdk = require('matrix-react-sdk')
@@ -114,46 +115,54 @@ var RoomSubList = React.createClass({
         });
     },
 
+    isHeaderStuck: function() {
+        var stuck = this.refs.header.dataset.stuck;
+        return stuck !== undefined && (stuck === "top" || stuck === "bottom");
+    },
+
     onClick: function(ev) {
-        // Collapse and truncation logic
-        var isHidden = false;
-        var isTruncatable = this.props.list.length > TRUNCATE_AT;
+        if (!this.isHeaderStuck()) {
+            // Collapse and truncation logic
+            var isHidden = false;
+            var isTruncatable = this.props.list.length > TRUNCATE_AT;
 
-        if (this.state.hidden && (this.state.capTruncate && isTruncatable)) {
-            isHidden = false;
-            this.setState({
-                hidden : isHidden,
-                capTruncate : true,
-                truncateAt : TRUNCATE_AT
-            });
-        } else if ((!this.state.hidden && this.state.capTruncate)
-                    || (this.state.hidden && (this.state.capTruncate && !isTruncatable)))
-        {
-            isHidden = false;
-            this.setState({
-                hidden : isHidden,
-                capTruncate : false,
-                truncateAt : -1
-            });
-        } else if (!this.state.hidden && !this.state.capTruncate) {
-            isHidden = true;
-            this.setState({
-                hidden : isHidden,
-                capTruncate : true,
-                truncateAt : TRUNCATE_AT
-            });
-        } else {
-            // Catch any weird states the system gets into
-            isHidden = false;
-            this.setState({
-                hidden : isHidden,
-                capTruncate : true,
-                truncateAt : TRUNCATE_AT
-            });
+            if (this.state.hidden && (this.state.capTruncate && isTruncatable)) {
+                isHidden = false;
+                this.setState({
+                    hidden : isHidden,
+                    capTruncate : true,
+                    truncateAt : TRUNCATE_AT
+                });
+            } else if ((!this.state.hidden && this.state.capTruncate)
+                        || (this.state.hidden && (this.state.capTruncate && !isTruncatable)))
+            {
+                isHidden = false;
+                this.setState({
+                    hidden : isHidden,
+                    capTruncate : false,
+                    truncateAt : -1
+                });
+            } else if (!this.state.hidden && !this.state.capTruncate) {
+                isHidden = true;
+                this.setState({
+                    hidden : isHidden,
+                    capTruncate : true,
+                    truncateAt : TRUNCATE_AT
+                });
+            } else {
+                // Catch any weird states the system gets into
+                isHidden = false;
+                this.setState({
+                    hidden : isHidden,
+                    capTruncate : true,
+                    truncateAt : TRUNCATE_AT
+                });
+            }
+
+            this.props.onShowMoreRooms();
         }
-
-        this.props.onShowMoreRooms();
-        this.props.onHeaderClick(isHidden);
+        ev.persist();
+        this.props.onHeaderClick(ev, isHidden);
     },
 
     tsOfNewestEvent: function(room) {
@@ -406,7 +415,7 @@ var RoomSubList = React.createClass({
         }
 
         return (
-            <div className="mx_RoomSubList_labelContainer">
+            <div className="mx_RoomSubList_labelContainer" ref="header">
                 <div onClick={ this.onClick } className="mx_RoomSubList_label">
                     { this.props.collapsed ? '' : this.props.label }
                     <div className="mx_RoomSubList_roomCount">{roomCount}</div>
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index 316246cb..e97746cb 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -49,6 +49,7 @@ limitations under the License.
     flex: 1 1 0;
 
     overflow-y: auto;
+    z-index: 3;
 }
 
 .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index bc7f15e6..0751921d 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -40,14 +40,13 @@ limitations under the License.
     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;
+    /* pointer-events: none; */
 }
 
 .collapsed .mx_RoomSubList_label {