Add a suitable overflow tile for the member list

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
     },
 

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">

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}