From f4d21f883a50f2d0206b25d338f2574c9ba519f8 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Oct 2015 20:47:48 +0100
Subject: [PATCH] Add on a membership badge

---
 src/skins/vector/css/organisms/MemberList.css  |  2 +-
 src/skins/vector/css/organisms/RightPanel.css  | 15 +++++++++++++++
 src/skins/vector/views/organisms/RightPanel.js | 18 ++++++++++++++----
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/skins/vector/css/organisms/MemberList.css b/src/skins/vector/css/organisms/MemberList.css
index 4c323da9..df699e64 100644
--- a/src/skins/vector/css/organisms/MemberList.css
+++ b/src/skins/vector/css/organisms/MemberList.css
@@ -52,7 +52,7 @@ limitations under the License.
     color: #454545;
     margin-left: 3px;
     font-size: 16px;
-    margin-bottom: 6px;
+    margin-bottom: 8px;
     width: 180px;
 }
 
diff --git a/src/skins/vector/css/organisms/RightPanel.css b/src/skins/vector/css/organisms/RightPanel.css
index a3aa8e23..2a8f486b 100644
--- a/src/skins/vector/css/organisms/RightPanel.css
+++ b/src/skins/vector/css/organisms/RightPanel.css
@@ -52,6 +52,7 @@ limitations under the License.
     vertical-align: middle;    
     padding-left: 8px;
     padding-right: 8px;
+    position: relative;
 }
 
 .mx_RightPanel_headerButton_highlight {
@@ -63,6 +64,20 @@ limitations under the License.
     background-color: #76cfa6;
 }
 
+.mx_RightPanel_headerButton_badge {
+    position: absolute;
+    top: 5px;
+    left: 21px;
+    font-size: 12px;    
+    background-color: #76cfa6;
+    color: #fff;
+    font-weight: bold;
+    border-radius: 20px;
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 2px;
+}
+
 .mx_RightPanel .mx_MemberList {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
diff --git a/src/skins/vector/views/organisms/RightPanel.js b/src/skins/vector/views/organisms/RightPanel.js
index d3c48a06..9dc3f540 100644
--- a/src/skins/vector/views/organisms/RightPanel.js
+++ b/src/skins/vector/views/organisms/RightPanel.js
@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
+var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
 
 module.exports = React.createClass({
     displayName: 'RightPanel',
@@ -64,17 +65,26 @@ module.exports = React.createClass({
             }
         }
 
+        var membersBadge;
+        if (this.state.phase == this.Phase.MemberList) {
+            var cli = MatrixClientPeg.get();
+            var room = cli.getRoom(this.props.roomId);
+            // FIXME: presumably we need to subscribe to some event to refresh this count when it changes?
+            membersBadge = <div className="mx_RightPanel_headerButton_badge">{ room.getJoinedMembers().length }</div>;
+        }
+
         if (this.props.roomId) {
             buttonGroup =
                     <div className="mx_RightPanel_headerButtonGroup">
+                        <div className="mx_RightPanel_headerButton" onClick={ this.onMemberListButtonClick }>
+                            <img src="img/members.png" width="17" height="22" title="Members" alt="Members"/>
+                            { membersBadge }
+                            { membersHighlight }
+                        </div>
                         <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton">
                             <img src="img/file.png" width="17" height="22" title="Files" alt="Files"/>
                             { filesHighlight }
                         </div>
-                        <div className="mx_RightPanel_headerButton" onClick={ this.onMemberListButtonClick }>
-                            <img src="img/members.png" width="17" height="22" title="Members" alt="Members"/>
-                            { membersHighlight }
-                        </div>
                     </div>;
 
             if (!this.props.collapsed && this.state.phase == this.Phase.MemberList) {