From eed83f982ee1133572b30460cc46d31954e196f8 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 21 Jan 2016 11:41:28 +0000
Subject: [PATCH] Add a suitable overflow tile for the member list

---
 src/components/views/elements/TruncatedList.js |  4 ++++
 src/components/views/rooms/EntityTile.js       | 12 ++++++------
 src/components/views/rooms/MemberList.js       | 17 ++++++++++++++++-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/views/elements/TruncatedList.js b/src/components/views/elements/TruncatedList.js
index c5a16e2ff3..8007b9a428 100644
--- a/src/components/views/elements/TruncatedList.js
+++ b/src/components/views/elements/TruncatedList.js
@@ -19,8 +19,12 @@ module.exports = React.createClass({
     displayName: 'TruncatedList',
 
     propTypes: {
+        // The number of elements to show before truncating
         truncateAt: React.PropTypes.number,
+        // The className to apply to the wrapping div
         className: React.PropTypes.string,
+        // A function which will be invoked when an overflow element is required.
+        // This will be inserted after the children.
         createOverflowElement: React.PropTypes.func
     },
 
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
index ed0e5cbc41..6b320ce3ff 100644
--- a/src/components/views/rooms/EntityTile.js
+++ b/src/components/views/rooms/EntityTile.js
@@ -39,7 +39,8 @@ module.exports = React.createClass({
         presenceActiveAgo: React.PropTypes.number,
         showInviteButton: React.PropTypes.bool,
         shouldComponentUpdate: React.PropTypes.func,
-        onClick: React.PropTypes.func
+        onClick: React.PropTypes.func,
+        suppressOnHover: React.PropTypes.bool
     },
 
     getDefaultProps: function() {
@@ -49,6 +50,7 @@ module.exports = React.createClass({
             presenceState: "offline",
             presenceActiveAgo: -1,
             showInviteButton: false,
+            suppressOnHover: false
         };
     },
 
@@ -75,12 +77,10 @@ module.exports = React.createClass({
         var presenceClass = PRESENCE_CLASS[this.props.presenceState] || "mx_EntityTile_offline";
         var mainClassName = "mx_EntityTile ";
         mainClassName += presenceClass;
-        if (this.state.hover) {
-            mainClassName += " mx_EntityTile_hover";
-        }
-
         var nameEl;
-        if (this.state.hover) {
+
+        if (this.state.hover && !this.props.suppressOnHover) {
+            mainClassName += " mx_EntityTile_hover";
             var PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
             nameEl = (
                 <div className="mx_EntityTile_details">
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index c32cfc868d..57dcfa96d4 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -260,7 +260,21 @@ module.exports = React.createClass({
         return to_display;
     },
 
+    _createOverflowTile: function(overflowCount, totalCount) {
+        // For now we'll pretend this is any entity. It should probably be a separate tile.
+        var EntityTile = sdk.getComponent("rooms.EntityTile");
+        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        return (
+            <EntityTile avatarJsx={
+                <BaseAvatar name="+" width={36} height={36} />
+            } key="overflow" name={`and ${overflowCount} more`} presenceState="online"
+            suppressOnHover={true} onClick={this._showFullMemberList} />
+        );
+    },
 
+    _showFullMemberList: function() {
+        console.log("TODO");
+    },
 
     memberSort: function(userIdA, userIdB) {
         var userA = this.memberDict[userIdA].user;
@@ -373,7 +387,8 @@ module.exports = React.createClass({
             <div className="mx_MemberList">
                     {this.inviteTile()}
                     <GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
-                        <TruncatedList className="mx_MemberList_wrapper">
+                        <TruncatedList className="mx_MemberList_wrapper"
+                                createOverflowElement={this._createOverflowTile}>
                             {this.makeMemberTiles('join', this.state.searchQuery)}
                         </TruncatedList>
                         {invitedSection}