diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index f867cd32fd..ff83e3c9cc 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -17,17 +17,56 @@ limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import { _t } from 'matrix-react-sdk/lib/languageHandler'; import sdk from 'matrix-react-sdk'; -import Matrix from "matrix-js-sdk"; import dis from 'matrix-react-sdk/lib/dispatcher'; import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg'; import Analytics from 'matrix-react-sdk/lib/Analytics'; import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc'; -import Modal from 'matrix-react-sdk/lib/Modal'; import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton'; import { showGroupInviteDialog } from 'matrix-react-sdk/lib/GroupInvite'; +class HeaderButton extends React.Component { + constructor() { + super(); + this.onClick = this.onClick.bind(this); + } + + onClick(ev) { + dis.dispatch({ + action: 'view_right_panel_phase', + phase: this.props.clickPhase, + }); + } + + render() { + const TintableSvg = sdk.getComponent("elements.TintableSvg"); + const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); + const isHighlighted = this.props.phases.includes(this.props.currentPhase); + + return +
+ { this.props.badge ? this.props.badge :  } +
+ + { isHighlighted ?
:
} + ; + } +} + +HeaderButton.propTypes = { + phases: PropTypes.arrayOf(PropTypes.string).isRequired, + currentPhase: PropTypes.string.isRequired, + clickPhase: PropTypes.string.isRequired, + iconSrc: PropTypes.string.isRequired, + badge: PropTypes.node, +}; + module.exports = React.createClass({ displayName: 'RightPanel', @@ -140,7 +179,7 @@ module.exports = React.createClass({ } else { if (this.props.roomId) { this.setState({ - phase: this.Phase.RoomMemberList + phase: this.Phase.RoomMemberList, }); } else if (this.props.groupId) { this.setState({ @@ -164,7 +203,11 @@ module.exports = React.createClass({ }); } else if (payload.action === "view_room") { this.setState({ - phase: this.Phase.RoomMemberList + phase: this.Phase.RoomMemberList, + }); + } else if (payload.action === "view_right_panel_phase") { + this.setState({ + phase: payload.phase, }); } }, @@ -176,36 +219,22 @@ module.exports = React.createClass({ const FilePanel = sdk.getComponent('structures.FilePanel'); const TintableSvg = sdk.getComponent("elements.TintableSvg"); let inviteGroup; - let panel; - - let filesHighlight; - let membersHighlight; - let notificationsHighlight; - if (!this.props.collapsed) { - if (this.state.phase == this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo) { - membersHighlight =
; - } - else if (this.state.phase == this.Phase.FilePanel) { - filesHighlight =
; - } - else if (this.state.phase == this.Phase.NotificationPanel) { - notificationsHighlight =
; - } - } let membersBadge; - if ((this.state.phase == this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo) && this.props.roomId) { + if ((this.state.phase == this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo) + && this.props.roomId + ) { const cli = MatrixClientPeg.get(); const room = cli.getRoom(this.props.roomId); - let user_is_in_room; + let userIsInRoom; if (room) { membersBadge = room.getJoinedMembers().length; - user_is_in_room = room.hasMembershipState( - MatrixClientPeg.get().credentials.userId, 'join' + userIsInRoom = room.hasMembershipState( + MatrixClientPeg.get().credentials.userId, 'join', ); } - if (user_is_in_room) { + if (userIsInRoom) { inviteGroup =
@@ -214,37 +243,28 @@ module.exports = React.createClass({
{ _t('Invite to this room') }
; } - } let headerButtons = []; if (this.props.roomId) { - headerButtons.push( - -
{ membersBadge ? membersBadge :  }
- - { membersHighlight } -
- ); - headerButtons.push( - -
 
- - { filesHighlight } -
- ); - headerButtons.push( - -
 
- - { notificationsHighlight } -
- ); + headerButtons = [ + , + , + , + ]; } if (this.props.roomId || this.props.groupId) { @@ -256,13 +276,14 @@ module.exports = React.createClass({ title={ _t("Hide panel") } onClick={ this.onCollapseClick } > -
+
, ); } + let panel =
; if (!this.props.collapsed) { if (this.props.roomId && this.state.phase == this.Phase.RoomMemberList) { - panel = + panel = ; } else if (this.props.groupId && this.state.phase == this.Phase.GroupMemberList) { panel = ; inviteGroup = ( @@ -275,10 +296,13 @@ module.exports = React.createClass({ ); } else if (this.state.phase == this.Phase.RoomMemberInfo) { const MemberInfo = sdk.getComponent('rooms.MemberInfo'); - panel = + panel = ; } else if (this.state.phase == this.Phase.GroupMemberInfo) { const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo'); - panel = ; + panel = ; } else if (this.state.phase == this.Phase.NotificationPanel) { panel = ; } else if (this.state.phase == this.Phase.FilePanel) { @@ -308,5 +332,5 @@ module.exports = React.createClass({
); - } + }, });