From eea9e366b8121c33cc35fe987cddbfc8cdcdd064 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 16 Sep 2016 10:38:54 +0100
Subject: [PATCH] un-revert 5282796d8437e46b605a56b9e97d1d3a6725fcbe as it
 wasn't to blame

---
 src/components/structures/RoomSubList.js | 71 ++++++++++--------------
 1 file changed, 29 insertions(+), 42 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 7684b344e..fb4d897ed 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -128,41 +128,13 @@ var RoomSubList = React.createClass({
 
     onClick: function(ev) {
         if (this.isCollapsableOnClick()) {
-            // The header iscCollapsable, so the click is to be interpreted as collapse and truncation logic
-            var isHidden = false;
-            var isTruncatable = this.props.list.length > TRUNCATE_AT;
+            // The header isCollapsable, so the click is to be interpreted as collapse and truncation logic
+            var isHidden = !this.state.hidden;
+            this.setState({ hidden : isHidden });
 
-            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 (isHidden) {
+                // as good a way as any to reset the truncate state
+                this.setState({ truncateAt : TRUNCATE_AT });
             }
 
             this.props.onShowMoreRooms();
@@ -396,16 +368,11 @@ var RoomSubList = React.createClass({
         var subListNotifHighlight = subListNotifications[1];
 
         var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
-        var isTruncatable = this.props.list.length > TRUNCATE_AT;
-        if (!this.state.hidden && this.state.capTruncate && isTruncatable) {
-            roomCount = TRUNCATE_AT + " of " + roomCount;
-        }
 
         var chevronClasses = classNames({
             'mx_RoomSubList_chevron': true,
-            'mx_RoomSubList_chevronUp': this.state.hidden,
-            'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
-            'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate,
+            'mx_RoomSubList_chevronRight': this.state.hidden,
+            'mx_RoomSubList_chevronDown': !this.state.hidden,
         });
 
         var badgeClasses = classNames({
@@ -455,7 +422,27 @@ var RoomSubList = React.createClass({
         );
     },
 
-    _createOverflowTile: function() {}, // NOP
+    _createOverflowTile: function(overflowCount, totalCount) {
+        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        // XXX: this is duplicated from RoomTile - factor it out
+        return (
+            <div className="mx_RoomTile mx_RoomTile_ellipsis" onClick={this._showFullMemberList}>
+                <div className="mx_RoomTile_avatar">
+                    <BaseAvatar url="img/ellipsis.svg" name="..." width={24} height={24} />
+                </div>
+                <div className="mx_RoomTile_name">and { overflowCount } others...</div>
+            </div>
+        );
+    },
+
+    _showFullMemberList: function() {
+        this.setState({
+            truncateAt: -1
+        });
+
+        this.props.onShowMoreRooms();
+        this.props.onHeaderClick(false);
+    },
 
     // Fix any undefined order elements of a room in a manual ordered list
     //     room.tag[tagname].order