Iterate the spaces face pile design

src/components/views/elements/FacePile.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { HTMLAttributes } from "react";
+import React, { HTMLAttributes, ReactNode, useContext } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { sortBy } from "lodash";
@@ -24,6 +24,7 @@ import { _t } from "../../../languageHandler";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import { useRoomMembers } from "../../../hooks/useRoomMembers";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 const DEFAULT_NUM_FACES = 5;
 
@@ -36,6 +37,7 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
 const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
 
 const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IProps) => {
+    const cli = useContext(MatrixClientContext);
     let members = useRoomMembers(room);
 
     // sort users with an explicit avatar first
@@ -46,21 +48,40 @@ const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, .
         // sort known users first
         iteratees.unshift(member => isKnownMember(member));
     }
-    if (members.length < 1) return null;
 
-    const shownMembers = sortBy(members, iteratees).slice(0, numShown);
+    // exclude ourselves from the shown members list
+    const shownMembers = sortBy(members.filter(m => m.userId !== cli.getUserId()), iteratees).slice(0, numShown);
+    if (shownMembers.length < 1) return null;
+
+    const commaSeparatedMembers = shownMembers.map(m => m.rawDisplayName).reverse().join(", ");
+
+    let tooltip: ReactNode;
+    if (props.onClick) {
+        tooltip = <div>
+            <div className="mx_Tooltip_title">
+                { _t("View all %(count)s members", { count: members.length }) }
+            </div>
+            <div className="mx_Tooltip_sub">
+                { _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers }) }
+            </div>
+        </div>;
+    } else {
+        tooltip = _t("%(count)s members including %(commaSeparatedMembers)s", {
+            count: members.length,
+            commaSeparatedMembers,
+        });
+    }
+
     return <div {...props} className="mx_FacePile">
-        <div className="mx_FacePile_faces">
-            { shownMembers.map(member => {
-                return <TextWithTooltip key={member.userId} tooltip={member.name}>
-                    <MemberAvatar member={member} width={28} height={28} />
-                </TextWithTooltip>;
-            }) }
-        </div>
-        { onlyKnownUsers && <span>
+        <TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
+            { members.length > numShown ? <span className="mx_FacePile_face mx_FacePile_more" /> : null }
+            { shownMembers.map(m =>
+                <MemberAvatar key={m.userId} member={m} width={28} height={28} className="mx_FacePile_face" /> )}
+        </TextWithTooltip>
+        { onlyKnownUsers && <span className="mx_FacePile_summary">
             { _t("%(count)s people you know have already joined", { count: members.length }) }
         </span> }
-    </div>
+    </div>;
 };
 
 export default FacePile;

src/components/views/elements/TextWithTooltip.js

@@ -25,6 +25,7 @@ export default class TextWithTooltip extends React.Component {
         class: PropTypes.string,
         tooltipClass: PropTypes.string,
         tooltip: PropTypes.node.isRequired,
+        tooltipProps: PropTypes.object,
     };
 
     constructor() {
@@ -46,15 +47,17 @@ export default class TextWithTooltip extends React.Component {
     render() {
         const Tooltip = sdk.getComponent("elements.Tooltip");
 
-        const {class: className, children, tooltip, tooltipClass, ...props} = this.props;
+        const {class: className, children, tooltip, tooltipClass, tooltipProps, ...props} = this.props;
 
         return (
             <span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={className}>
                 {children}
                 {this.state.hover && <Tooltip
+                    {...tooltipProps}
                     label={tooltip}
                     tooltipClassName={tooltipClass}
-                    className={"mx_TextWithTooltip_tooltip"} /> }
+                    className={"mx_TextWithTooltip_tooltip"}
+                /> }
             </span>
         );
     }