Matrix/element-web
Matrix/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-09-19 11:35:10 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add on a membership badge

Browse source
This commit is contained in:
Matthew Hodgson 2015-10-24 20:47:48 +01:00
parent a74cef0d64
commit f4d21f883a
3 changed files with 30 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/skins/vector/css/organisms/MemberList.css
View file

@ -52,7 +52,7 @@ limitations under the License.
color: #454545;
margin-left: 3px;
font-size: 16px;
margin-bottom: 6px;
margin-bottom: 8px;
width: 180px;
}

15
src/skins/vector/css/organisms/RightPanel.css
View file

@ -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;

18
src/skins/vector/views/organisms/RightPanel.js
View file

@ -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) {