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 1/5] 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 =
{ formatCount(numMembers) }
; + 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 = [ - Date: Fri, 5 Jan 2018 23:19:43 +0000 Subject: [PATCH 2/5] delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/RightPanel.js | 58 ++++++++++++------------- 1 file changed, 27 insertions(+), 31 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 778c01149f..da1e711741 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 {
{ this.props.badge ? this.props.badge :   }
- - { this.props.isHighlighted ?
:
} + + { this.props.isHighlighted ?
:
} ; } @@ -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) { @@ -267,7 +266,7 @@ module.exports = React.createClass({ let membersBadge; let membersTitle = _t('Members'); - if ((this.state.phase == this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo) + if ((this.state.phase === this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo) && this.props.roomId ) { const cli = this.context.matrixClient; @@ -282,7 +281,7 @@ module.exports = React.createClass({ if (userIsInRoom) { inviteGroup = - +
@@ -293,7 +292,7 @@ module.exports = React.createClass({ const isPhaseGroup = [ this.Phase.GroupMemberInfo, - this.Phase.GroupMemberList + this.Phase.GroupMemberList, ].includes(this.state.phase); let headerButtons = []; @@ -337,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(
- +
, ); } let panel =
; 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 = ; - } else if (this.props.groupId && this.state.phase == this.Phase.GroupMemberList) { + } else if (this.props.groupId && this.state.phase === this.Phase.GroupMemberList) { panel = ; } else if (this.state.phase === this.Phase.GroupRoomList) { panel = ; - } else if (this.state.phase == this.Phase.RoomMemberInfo) { + } else if (this.state.phase === this.Phase.RoomMemberInfo) { panel = ; - } else if (this.state.phase == this.Phase.GroupMemberInfo) { + } else if (this.state.phase === this.Phase.GroupMemberInfo) { panel = ; - } else if (this.state.phase == this.Phase.GroupRoomInfo) { + } else if (this.state.phase === this.Phase.GroupRoomInfo) { panel = ; - } else if (this.state.phase == this.Phase.NotificationPanel) { + } else if (this.state.phase === this.Phase.NotificationPanel) { panel = ; - } else if (this.state.phase == this.Phase.FilePanel) { + } else if (this.state.phase === this.Phase.FilePanel) { panel = ; } } if (!panel) { - panel =
; + panel =
; } if (this.props.groupId && this.state.isUserPrivilegedInGroup) { inviteGroup = isPhaseGroup ? ( - +
{ _t('Invite to this community') }
) : ( - +
@@ -393,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 (