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 branch 'develop' of github.com:vector-im/riot-web into t3chguy/highlight_things

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
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

73
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';
@ -58,8 +58,8 @@ class HeaderButton extends React.Component {
<div className="mx_RightPanel_headerButton_badge"> <div className="mx_RightPanel_headerButton_badge">
{ 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,22 +265,23 @@ 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" >
<TintableSvg src="img/icon-invite-people.svg" width="35" height="35" /> <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
</div> </div>
@ -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}
@ -336,54 +336,54 @@ module.exports = React.createClass({
// button on these 2 screens or you won't be able to re-expand the panel. // button on these 2 screens or you won't be able to re-expand the panel.
headerButtons.push( headerButtons.push(
<div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" key="_minimizeButton" <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>, </div>,
); );
} }
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) {
inviteGroup = isPhaseGroup ? ( inviteGroup = isPhaseGroup ? (
<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" >
<TintableSvg src="img/icon-invite-people.svg" width="35" height="35" /> <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
</div> </div>
<div className="mx_RightPanel_message">{ _t('Invite to this community') }</div> <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
</AccessibleButton> </AccessibleButton>
) : ( ) : (
<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" >
<TintableSvg src="img/icons-room-add.svg" width="35" height="35" /> <TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
</div> </div>
@ -392,19 +392,16 @@ module.exports = React.createClass({
); );
} }
let classes = classNames( const classes = classNames("mx_RightPanel", "mx_fadable", {
"mx_RightPanel", "mx_fadable", "collapsed": this.props.collapsed,
{ "mx_fadable_faded": this.props.disabled,
"collapsed": this.props.collapsed, });
"mx_fadable_faded": this.props.disabled,
}
);
return ( return (
<aside className={classes}> <aside className={classes}>
<div className="mx_RightPanel_header"> <div className="mx_RightPanel_header">
<div className="mx_RightPanel_headerButtonGroup"> <div className="mx_RightPanel_headerButtonGroup">
{headerButtons} { headerButtons }
</div> </div>
</div> </div>
{ panel } { panel }

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