Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5929 from vector-im/t3chguy/num_members_tooltip

Browse Source 
T3chguy/num members tooltip
This commit is contained in:
Luke Barnard 2018-01-22 22:21:50 +00:00 committed by GitHub
commit 9d387c32a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/structures/RightPanel.js
View File

@ -24,7 +24,7 @@ import sdk from 'matrix-react-sdk';
import dis from 'matrix-react-sdk/lib/dispatcher'; import dis from 'matrix-react-sdk/lib/dispatcher';
import { MatrixClient } from 'matrix-js-sdk'; import { MatrixClient } from 'matrix-js-sdk';
import Analytics from 'matrix-react-sdk/lib/Analytics'; 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 AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
import { showGroupInviteDialog, showGroupAddRoomDialog } from 'matrix-react-sdk/lib/GroupAddressPicker'; import { showGroupInviteDialog, showGroupAddRoomDialog } from 'matrix-react-sdk/lib/GroupAddressPicker';
import GroupStoreCache from 'matrix-react-sdk/lib/stores/GroupStoreCache'; import GroupStoreCache from 'matrix-react-sdk/lib/stores/GroupStoreCache';
@ -59,7 +59,7 @@ class HeaderButton extends React.Component {
{ this.props.badge ? this.props.badge : <span>&nbsp;</span> } { this.props.badge ? this.props.badge : <span>&nbsp;</span> }
</div> </div>
<TintableSvg src={this.props.iconSrc} width="25" height="25" /> <TintableSvg src={this.props.iconSrc} width="25" height="25" />
{ this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight"></div> : <div/> } { this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight" /> : <div /> }
</AccessibleButton>; </AccessibleButton>;
} }
@ -184,18 +184,17 @@ module.exports = React.createClass({
onRoomStateMember: function(ev, state, member) { onRoomStateMember: function(ev, state, member) {
// redraw the badge on the membership list // 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(); 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) { member.userId === this.state.member.userId) {
// refresh the member info (e.g. new power level) // refresh the member info (e.g. new power level)
this._delayedUpdate(); this._delayedUpdate();
} }
}, },
_delayedUpdate: new rate_limited_func(function() { _delayedUpdate: new RateLimitedFunc(function() {
this.forceUpdate(); this.forceUpdate(); // eslint-disable-line babel/no-invalid-this
}, 500), }, 500),
onAction: function(payload) { onAction: function(payload) {
@ -266,20 +265,21 @@ module.exports = React.createClass({
let inviteGroup; let inviteGroup;
let membersBadge; 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 && this.props.roomId
) { ) {
const cli = this.context.matrixClient; const cli = this.context.matrixClient;
const room = cli.getRoom(this.props.roomId); const room = cli.getRoom(this.props.roomId);
let userIsInRoom; let isUserInRoom;
if (room) { if (room) {
membersBadge = formatCount(room.getJoinedMembers().length); const numMembers = room.getJoinedMembers().length;
userIsInRoom = room.hasMembershipState( membersTitle = _t('%(count)s Members', { count: numMembers });
this.context.matrixClient.credentials.userId, 'join', membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
); isUserInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
} }
if (userIsInRoom) { if (isUserInRoom) {
inviteGroup = inviteGroup =
<AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}> <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
<div className="mx_RightPanel_icon" > <div className="mx_RightPanel_icon" >
@ -292,13 +292,13 @@ module.exports = React.createClass({
const isPhaseGroup = [ const isPhaseGroup = [
this.Phase.GroupMemberInfo, this.Phase.GroupMemberInfo,
this.Phase.GroupMemberList this.Phase.GroupMemberList,
].includes(this.state.phase); ].includes(this.state.phase);
let headerButtons = []; let headerButtons = [];
if (this.props.roomId) { if (this.props.roomId) {
headerButtons = [ 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)} isHighlighted={[this.Phase.RoomMemberList, this.Phase.RoomMemberInfo].includes(this.state.phase)}
clickPhase={this.Phase.RoomMemberList} clickPhase={this.Phase.RoomMemberList}
badge={membersBadge} badge={membersBadge}
@ -345,33 +345,33 @@ module.exports = React.createClass({
let panel = <div />; let panel = <div />;
if (!this.props.collapsed) { 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} />; 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} />; panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
} else if (this.state.phase === this.Phase.GroupRoomList) { } else if (this.state.phase === this.Phase.GroupRoomList) {
panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />; 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} />; 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 panel = <GroupMemberInfo
groupMember={this.state.member} groupMember={this.state.member}
groupId={this.props.groupId} groupId={this.props.groupId}
key={this.state.member.user_id} />; key={this.state.member.user_id} />;
} else if (this.state.phase == this.Phase.GroupRoomInfo) { } else if (this.state.phase === this.Phase.GroupRoomInfo) {
panel = <GroupRoomInfo panel = <GroupRoomInfo
groupRoomId={this.state.groupRoomId} groupRoomId={this.state.groupRoomId}
groupId={this.props.groupId} groupId={this.props.groupId}
key={this.state.groupRoomId} />; key={this.state.groupRoomId} />;
} else if (this.state.phase == this.Phase.NotificationPanel) { } else if (this.state.phase === this.Phase.NotificationPanel) {
panel = <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} />; panel = <FilePanel roomId={this.props.roomId} />;
} }
} }
if (!panel) { if (!panel) {
panel = <div className="mx_RightPanel_blank"></div>; panel = <div className="mx_RightPanel_blank" />;
} }
if (this.props.groupId && this.state.isUserPrivilegedInGroup) { if (this.props.groupId && this.state.isUserPrivilegedInGroup) {
@ -392,13 +392,10 @@ module.exports = React.createClass({
); );
} }
let classes = classNames( const classes = classNames("mx_RightPanel", "mx_fadable", {
"mx_RightPanel", "mx_fadable",
{
"collapsed": this.props.collapsed, "collapsed": this.props.collapsed,
"mx_fadable_faded": this.props.disabled, "mx_fadable_faded": this.props.disabled,
} });
);
return ( return (
<aside className={classes}> <aside className={classes}>

2
src/i18n/strings/en_EN.json
View File

@ -158,6 +158,8 @@
"Register": "Register", "Register": "Register",
"Invite to this room": "Invite to this room", "Invite to this room": "Invite to this room",
"Members": "Members", "Members": "Members",
"%(count)s Members|other": "%(count)s Members",
"%(count)s Members|one": "%(count)s Member",
"Files": "Files", "Files": "Files",
"Notifications": "Notifications", "Notifications": "Notifications",
"Rooms": "Rooms", "Rooms": "Rooms",