diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 2a19794f..55f588f2 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -24,7 +24,7 @@ import sdk from 'matrix-react-sdk';
import dis from 'matrix-react-sdk/lib/dispatcher';
import { MatrixClient } from 'matrix-js-sdk';
import Analytics from 'matrix-react-sdk/lib/Analytics';
-import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc';
+import RateLimitedFunc from 'matrix-react-sdk/lib/ratelimitedfunc';
import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
import { showGroupInviteDialog, showGroupAddRoomDialog } from 'matrix-react-sdk/lib/GroupAddressPicker';
import GroupStoreCache from 'matrix-react-sdk/lib/stores/GroupStoreCache';
@@ -58,8 +58,8 @@ class HeaderButton extends React.Component {
<div className="mx_RightPanel_headerButton_badge">
{ this.props.badge ? this.props.badge : <span> </span> }
</div>
- <TintableSvg src={this.props.iconSrc} width="25" height="25"/>
- { this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight"></div> : <div/> }
+ <TintableSvg src={this.props.iconSrc} width="25" height="25" />
+ { this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight" /> : <div /> }
</AccessibleButton>;
}
@@ -184,18 +184,17 @@ module.exports = React.createClass({
onRoomStateMember: function(ev, state, member) {
// redraw the badge on the membership list
- if (this.state.phase == this.Phase.RoomMemberList && member.roomId === this.props.roomId) {
+ if (this.state.phase === this.Phase.RoomMemberList && member.roomId === this.props.roomId) {
this._delayedUpdate();
- }
- else if (this.state.phase === this.Phase.RoomMemberInfo && member.roomId === this.props.roomId &&
+ } else if (this.state.phase === this.Phase.RoomMemberInfo && member.roomId === this.props.roomId &&
member.userId === this.state.member.userId) {
// refresh the member info (e.g. new power level)
this._delayedUpdate();
}
},
- _delayedUpdate: new rate_limited_func(function() {
- this.forceUpdate();
+ _delayedUpdate: new RateLimitedFunc(function() {
+ this.forceUpdate(); // eslint-disable-line babel/no-invalid-this
}, 500),
onAction: function(payload) {
@@ -266,22 +265,23 @@ module.exports = React.createClass({
let inviteGroup;
let membersBadge;
- if ((this.state.phase == this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
+ let membersTitle = _t('Members');
+ if ((this.state.phase === this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
&& this.props.roomId
) {
const cli = this.context.matrixClient;
const room = cli.getRoom(this.props.roomId);
- let userIsInRoom;
+ let isUserInRoom;
if (room) {
- membersBadge = formatCount(room.getJoinedMembers().length);
- userIsInRoom = room.hasMembershipState(
- this.context.matrixClient.credentials.userId, 'join',
- );
+ const numMembers = room.getJoinedMembers().length;
+ membersTitle = _t('%(count)s Members', { count: numMembers });
+ membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
+ isUserInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
}
- if (userIsInRoom) {
+ if (isUserInRoom) {
inviteGroup =
- <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+ <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
<div className="mx_RightPanel_icon" >
<TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
</div>
@@ -292,13 +292,13 @@ module.exports = React.createClass({
const isPhaseGroup = [
this.Phase.GroupMemberInfo,
- this.Phase.GroupMemberList
+ this.Phase.GroupMemberList,
].includes(this.state.phase);
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}
@@ -336,54 +336,54 @@ module.exports = React.createClass({
// button on these 2 screens or you won't be able to re-expand the panel.
headerButtons.push(
<div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" key="_minimizeButton"
- title={ _t("Hide panel") } aria-label={ _t("Hide panel") } onClick={ this.onCollapseClick }
+ title={_t("Hide panel")} aria-label={_t("Hide panel")} onClick={this.onCollapseClick}
>
- <TintableSvg src="img/minimise.svg" width="10" height="16"/>
+ <TintableSvg src="img/minimise.svg" width="10" height="16" />
</div>,
);
}
let panel = <div />;
if (!this.props.collapsed) {
- if (this.props.roomId && this.state.phase == this.Phase.RoomMemberList) {
+ if (this.props.roomId && this.state.phase === this.Phase.RoomMemberList) {
panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
- } else if (this.props.groupId && this.state.phase == this.Phase.GroupMemberList) {
+ } else if (this.props.groupId && this.state.phase === this.Phase.GroupMemberList) {
panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
} else if (this.state.phase === this.Phase.GroupRoomList) {
panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
- } else if (this.state.phase == this.Phase.RoomMemberInfo) {
+ } else if (this.state.phase === this.Phase.RoomMemberInfo) {
panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
- } else if (this.state.phase == this.Phase.GroupMemberInfo) {
+ } else if (this.state.phase === this.Phase.GroupMemberInfo) {
panel = <GroupMemberInfo
groupMember={this.state.member}
groupId={this.props.groupId}
key={this.state.member.user_id} />;
- } else if (this.state.phase == this.Phase.GroupRoomInfo) {
+ } else if (this.state.phase === this.Phase.GroupRoomInfo) {
panel = <GroupRoomInfo
groupRoomId={this.state.groupRoomId}
groupId={this.props.groupId}
key={this.state.groupRoomId} />;
- } else if (this.state.phase == this.Phase.NotificationPanel) {
+ } else if (this.state.phase === this.Phase.NotificationPanel) {
panel = <NotificationPanel />;
- } else if (this.state.phase == this.Phase.FilePanel) {
+ } else if (this.state.phase === this.Phase.FilePanel) {
panel = <FilePanel roomId={this.props.roomId} />;
}
}
if (!panel) {
- panel = <div className="mx_RightPanel_blank"></div>;
+ panel = <div className="mx_RightPanel_blank" />;
}
if (this.props.groupId && this.state.isUserPrivilegedInGroup) {
inviteGroup = isPhaseGroup ? (
- <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+ <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
<div className="mx_RightPanel_icon" >
<TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
</div>
<div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
</AccessibleButton>
) : (
- <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+ <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
<div className="mx_RightPanel_icon" >
<TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
</div>
@@ -392,19 +392,16 @@ module.exports = React.createClass({
);
}
- let classes = classNames(
- "mx_RightPanel", "mx_fadable",
- {
- "collapsed": this.props.collapsed,
- "mx_fadable_faded": this.props.disabled,
- }
- );
+ const classes = classNames("mx_RightPanel", "mx_fadable", {
+ "collapsed": this.props.collapsed,
+ "mx_fadable_faded": this.props.disabled,
+ });
return (
<aside className={classes}>
<div className="mx_RightPanel_header">
<div className="mx_RightPanel_headerButtonGroup">
- {headerButtons}
+ { headerButtons }
</div>
</div>
{ panel }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index e3db4e76..819c0cfa 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -158,6 +158,8 @@
"Register": "Register",
"Invite to this room": "Invite to this room",
"Members": "Members",
+ "%(count)s Members|other": "%(count)s Members",
+ "%(count)s Members|one": "%(count)s Member",
"Files": "Files",
"Notifications": "Notifications",
"Rooms": "Rooms",