From 3788fde711d5d5a0f761c9b853000f5d1a4692bb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 5 Jan 2018 23:16:21 +0000
Subject: [PATCH] Add a tooltip to members button and badge with actual count

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/RightPanel.js | 11 ++++++-----
 src/i18n/strings/en_EN.json             |  1 +
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 2a19794fe0..778c01149f 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -266,6 +266,7 @@ module.exports = React.createClass({
         let inviteGroup;
 
         let membersBadge;
+        let membersTitle = _t('Members');
         if ((this.state.phase == this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
             && this.props.roomId
         ) {
@@ -273,10 +274,10 @@ module.exports = React.createClass({
             const room = cli.getRoom(this.props.roomId);
             let userIsInRoom;
             if (room) {
-                membersBadge = formatCount(room.getJoinedMembers().length);
-                userIsInRoom = room.hasMembershipState(
-                    this.context.matrixClient.credentials.userId, 'join',
-                );
+                const numMembers = room.getJoinedMembers().length;
+                membersTitle = _t('%(numMembers)s Members', { numMembers });
+                membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
+                userIsInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
             }
 
             if (userIsInRoom) {
@@ -298,7 +299,7 @@ module.exports = React.createClass({
         let headerButtons = [];
         if (this.props.roomId) {
             headerButtons = [
-                <HeaderButton key="_membersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
+                <HeaderButton key="_membersButton" title={membersTitle} iconSrc="img/icons-people.svg"
                     isHighlighted={[this.Phase.RoomMemberList, this.Phase.RoomMemberInfo].includes(this.state.phase)}
                     clickPhase={this.Phase.RoomMemberList}
                     badge={membersBadge}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index c1857e3149..52244e099e 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -158,6 +158,7 @@
     "Register": "Register",
     "Invite to this room": "Invite to this room",
     "Members": "Members",
+    "%(numMembers)s Members": "%(numMembers)s Members",
     "Files": "Files",
     "Notifications": "Notifications",
     "Rooms": "Rooms",