From 0ee1892a0b9837c695e1cb95323a13c7c188707a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 22 Jan 2016 15:31:42 +0000
Subject: [PATCH 1/3] truncate room list

---
 src/components/structures/RoomSubList.js      | 37 +++++++++++++++++--
 .../matrix-react-sdk/views/rooms/RoomTile.css |  5 +++
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index c49a43db9c..ebd8373ce6 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -78,6 +78,7 @@ var RoomSubList = React.createClass({
     getInitialState: function() {
         return {
             hidden: this.props.startAsHidden || false,
+            truncateAt: 20,
             sortedList: [],
         };
     },
@@ -96,6 +97,10 @@ var RoomSubList = React.createClass({
         // order the room list appropriately before we re-render
         //if (debug) console.log("received new props, list = " + newProps.list);
         this.sortList(newProps.list, newProps.order);
+
+        if (newProps.collapsed) { // as good a way as any to reset the truncate state
+            this.setState({ truncateAt : 20 });
+        }
     },
 
     onClick: function(ev) {
@@ -272,9 +277,32 @@ var RoomSubList = React.createClass({
         );
     },
 
+    _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
+        });
+        // kick gemini in the balls to get it to wake up
+        // XXX: uuuuuuugh.
+        this.props.list.forceUpdate();
+    },
+
     render: function() {
         var connectDropTarget = this.props.connectDropTarget;
         var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');
+        var TruncatedList = sdk.getComponent('elements.TruncatedList');
 
         var label = this.props.collapsed ? null : this.props.label;
 
@@ -290,14 +318,15 @@ var RoomSubList = React.createClass({
             var classes = "mx_RoomSubList";
 
             if (!this.state.hidden) {
-                subList = <div className={ classes }>
+                subList = <TruncatedList className={ classes } truncateAt={this.state.truncateAt}
+                                         createOverflowElement={this._createOverflowTile} >
                                 { target }
                                 { this.makeRoomTiles() }
-                          </div>;
+                          </TruncatedList>;
             }
             else {
-                subList = <div className={ classes }>
-                          </div>;                
+                subList = <TruncatedList className={ classes }>
+                          </TruncatedList>;                
             }
 
             return connectDropTarget(
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
index 44b884e859..3a7756135b 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -43,6 +43,11 @@ limitations under the License.
     color: rgba(69, 69, 69, 0.8);
 }
 
+.mx_RoomTile_ellipsis .mx_RoomTile_name {
+    font-style: italic;
+    color: #454545;
+}
+
 .mx_RoomTile_invite {
 /*    color: rgba(69, 69, 69, 0.5);
 */

From 302c63058b765288b94588a9fe9a8db4f319f0ae Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 22 Jan 2016 15:46:58 +0000
Subject: [PATCH 2/3] Invoke onShowMoreRooms to allow parents to kick their
 scrollbars..

---
 src/components/structures/RoomSubList.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index ebd8373ce6..244c7c8b1d 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -72,7 +72,8 @@ var RoomSubList = React.createClass({
         collapsed: React.PropTypes.bool.isRequired,
         onHeaderClick: React.PropTypes.func,
         alwaysShowHeader: React.PropTypes.bool,
-        incomingCall: React.PropTypes.object
+        incomingCall: React.PropTypes.object,
+        onShowMoreRooms: React.PropTypes.func
     },
 
     getInitialState: function() {
@@ -85,7 +86,8 @@ var RoomSubList = React.createClass({
 
     getDefaultProps: function() {
         return {
-            onHeaderClick: function() {} // NOP
+            onHeaderClick: function() {}, // NOP
+            onShowMoreRooms: function() {} // NOP
         };
     },
 
@@ -294,9 +296,7 @@ var RoomSubList = React.createClass({
         this.setState({
             truncateAt: -1
         });
-        // kick gemini in the balls to get it to wake up
-        // XXX: uuuuuuugh.
-        this.props.list.forceUpdate();
+        this.props.onShowMoreRooms();
     },
 
     render: function() {

From 0a32874b39357933f530b7f2362eac09e005a545 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 22 Jan 2016 16:09:06 +0000
Subject: [PATCH 3/3] oops, reset truncate state on hide, not collapse

---
 src/components/structures/RoomSubList.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 244c7c8b1d..f18b149fd1 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -99,15 +99,18 @@ var RoomSubList = React.createClass({
         // order the room list appropriately before we re-render
         //if (debug) console.log("received new props, list = " + newProps.list);
         this.sortList(newProps.list, newProps.order);
-
-        if (newProps.collapsed) { // as good a way as any to reset the truncate state
-            this.setState({ truncateAt : 20 });
-        }
     },
 
     onClick: function(ev) {
         var isHidden = !this.state.hidden;
         this.setState({ hidden : isHidden });
+
+        if (isHidden) {
+            // as good a way as any to reset the truncate state
+            this.setState({ truncateAt : 20 });
+            this.props.onShowMoreRooms();
+        }
+
         this.props.onHeaderClick(isHidden);
     },