diff --git a/src/skins/vector/css/organisms/MemberList.css b/src/skins/vector/css/organisms/MemberList.css index 4c323da9f6..df699e6490 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 a3aa8e23f3..2a8f486b59 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 d3c48a0644..9dc3f54093 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 =
{ room.getJoinedMembers().length }
; + } + if (this.props.roomId) { buttonGroup =
+
+ Members + { membersBadge } + { membersHighlight } +
Files { filesHighlight }
-
- Members - { membersHighlight } -
; if (!this.props.collapsed && this.state.phase == this.Phase.MemberList) {