Merge branch 'develop' of github.com:vector-im/riot-web into t3chguy/highlight_things

This commit is contained in:
Michael Telatynski 2018-01-23 20:19:27 +00:00
commit 9d1a3c9011
3 changed files with 38 additions and 39 deletions

View File

@ -128,7 +128,7 @@ You can configure the app by copying `config.sample.json` to
1. `cross_origin_renderer_url`: URL to a static HTML page hosting code to help display 1. `cross_origin_renderer_url`: URL to a static HTML page hosting code to help display
encrypted file attachments. This MUST be hosted on a completely separate domain to encrypted file attachments. This MUST be hosted on a completely separate domain to
anything else since it is used to isolate the privileges of file attachments to this anything else since it is used to isolate the privileges of file attachments to this
domain. Default: `usercontent.riot.im`. This needs to contain v1.html from domain. Default: `https://usercontent.riot.im/v1.html`. This needs to contain v1.html from
https://github.com/matrix-org/usercontent/blob/master/v1.html https://github.com/matrix-org/usercontent/blob/master/v1.html
1. `piwik`: an object containing the following properties: 1. `piwik`: an object containing the following properties:
1. `url`: The URL of the Piwik instance to use for collecting Analytics 1. `url`: The URL of the Piwik instance to use for collecting Analytics

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}>

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",