From 5fb9276ef303b302f062d062accf0361b387e66b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 10 Apr 2019 13:20:03 +0200 Subject: [PATCH 1/7] add togglePhase method, where we can show the panel if needed without needing to resort to redispatching the original action --- .../views/right_panel/HeaderButtons.js | 49 ++++++++++--------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js index b7155b922f..fb124e8d3f 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.js @@ -40,14 +40,36 @@ export default class HeaderButtons extends React.Component { dis.unregister(this.dispatcherRef); } + componentDidUpdate(prevProps) { + if (!prevProps.collapsedRhs && this.props.collapsedRhs) { + this.setState({ + phase: null, + }); + } + } + setPhase(phase, extras) { - // TODO: delay? + if (this.props.collapsedRhs) { + dis.dispatch({ + action: 'show_right_panel', + }); + } dis.dispatch(Object.assign({ action: 'view_right_panel_phase', phase: phase, }, extras)); } + togglePhase(phase) { + if (this.state.phase === phase) { + dis.dispatch({ + action: 'hide_right_panel', + }); + } else { + this.setPhase(phase); + } + } + isPhase(phases) { if (this.props.collapsedRhs) { return false; @@ -61,28 +83,9 @@ export default class HeaderButtons extends React.Component { onAction(payload) { if (payload.action === "view_right_panel_phase") { - // only actions coming from header buttons should collapse the right panel - if (this.state.phase === payload.phase && payload.fromHeader) { - dis.dispatch({ - action: 'hide_right_panel', - }); - this.setState({ - phase: null, - }); - } else { - if (this.props.collapsedRhs && payload.fromHeader) { - dis.dispatch({ - action: 'show_right_panel', - }); - // emit payload again as the RightPanel didn't exist up - // till show_right_panel, just without the fromHeader flag - // as that would hide the right panel again - dis.dispatch(Object.assign({}, payload, {fromHeader: false})); - } - this.setState({ - phase: payload.phase, - }); - } + this.setState({ + phase: payload.phase, + }); } } From 2b4b6feba2d087c2d0b0245e8b774b1ac6649d6d Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 10 Apr 2019 13:21:07 +0200 Subject: [PATCH 2/7] call togglePhase from header buttons --- src/components/views/right_panel/GroupHeaderButtons.js | 4 ++-- src/components/views/right_panel/HeaderButton.js | 6 +----- src/components/views/right_panel/RoomHeaderButtons.js | 6 +++--- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js index 13379d49e3..494ccb88fa 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.js @@ -68,13 +68,13 @@ export default class GroupHeaderButtons extends HeaderButtons { this.togglePhase(RightPanel.Phase.GroupMemberList)} analytics={['Right Panel', 'Group Member List Button', 'click']} />, this.togglePhase(RightPanel.Phase.GroupRoomList)} analytics={['Right Panel', 'Group Room List Button', 'click']} />, ]; diff --git a/src/components/views/right_panel/HeaderButton.js b/src/components/views/right_panel/HeaderButton.js index cc78373117..decce417d8 100644 --- a/src/components/views/right_panel/HeaderButton.js +++ b/src/components/views/right_panel/HeaderButton.js @@ -32,11 +32,7 @@ export default class HeaderButton extends React.Component { onClick(ev) { Analytics.trackEvent(...this.props.analytics); - dis.dispatch({ - action: 'view_right_panel_phase', - phase: this.props.clickPhase, - fromHeader: true, - }); + this.props.onClick(); } render() { diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index 51e436bfc2..5c64cb799b 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -62,19 +62,19 @@ export default class RoomHeaderButtons extends HeaderButtons { this.togglePhase(RightPanel.Phase.RoomMemberList)} analytics={['Right Panel', 'Member List Button', 'click']} />, this.togglePhase(RightPanel.Phase.FilePanel)} analytics={['Right Panel', 'File List Button', 'click']} />, this.togglePhase(RightPanel.Phase.NotificationPanel)} analytics={['Right Panel', 'Notification List Button', 'click']} />, ]; From fe63b6b5bd3645cf5ef6363463f2e996d0b31b96 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 10 Apr 2019 13:21:42 +0200 Subject: [PATCH 3/7] setPhase can now open the panel, don't open it if closed on view_room --- src/components/views/right_panel/RoomHeaderButtons.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index 5c64cb799b..aff5274cec 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -40,7 +40,7 @@ export default class RoomHeaderButtons extends HeaderButtons { } else { this.setPhase(RightPanel.Phase.RoomMemberList); } - } else if (payload.action === "view_room") { + } else if (payload.action === "view_room" && !this.props.collapsedRhs) { this.setPhase(RightPanel.Phase.RoomMemberList); } else if (payload.action === "view_3pid_invite") { if (payload.event) { From 6ca1a879c966709bf272a7f47865d8ac6f18261c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 10 Apr 2019 13:22:31 +0200 Subject: [PATCH 4/7] remove hacks, now that emitting show_right_panel is centralized --- src/components/structures/MatrixChat.js | 14 -------------- .../views/right_panel/GroupHeaderButtons.js | 3 --- .../views/right_panel/RoomHeaderButtons.js | 3 --- 3 files changed, 20 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 387f2ca69d..fe0deb0d49 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -565,20 +565,6 @@ export default React.createClass({ }, }); break; - case 'view_user': - // FIXME: ugly hack to expand the RightPanel and then re-dispatch. - if (this.state.collapsedRhs) { - setTimeout(()=>{ - dis.dispatch({ - action: 'show_right_panel', - }); - dis.dispatch({ - action: 'view_user', - member: payload.member, - }); - }, 0); - } - break; case 'view_room': // Takes either a room ID or room alias: if switching to a room the client is already // known to be in (eg. user clicks on a room in the recents panel), supply the ID diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js index 494ccb88fa..9bc69de1ab 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.js @@ -33,9 +33,6 @@ export default class GroupHeaderButtons extends HeaderButtons { super.onAction(payload); if (payload.action === "view_user") { - dis.dispatch({ - action: 'show_right_panel', - }); if (payload.member) { this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member}); } else { diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index aff5274cec..cbdc2cd81b 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -32,9 +32,6 @@ export default class RoomHeaderButtons extends HeaderButtons { onAction(payload) { super.onAction(payload); if (payload.action === "view_user") { - dis.dispatch({ - action: 'show_right_panel', - }); if (payload.member) { this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member}); } else { From 49e96dc4047766c759f4abc87a80c5a7c693a80b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 10 Apr 2019 13:31:27 +0200 Subject: [PATCH 5/7] remove unused dispatcher import --- src/components/views/right_panel/GroupHeaderButtons.js | 1 - src/components/views/right_panel/HeaderButton.js | 1 - src/components/views/right_panel/RoomHeaderButtons.js | 1 - 3 files changed, 3 deletions(-) diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js index 9bc69de1ab..e01474f523 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.js @@ -19,7 +19,6 @@ limitations under the License. import React from 'react'; import { _t } from '../../../languageHandler'; -import dis from '../../../dispatcher'; import HeaderButton from './HeaderButton'; import HeaderButtons from './HeaderButtons'; import RightPanel from '../../structures/RightPanel'; diff --git a/src/components/views/right_panel/HeaderButton.js b/src/components/views/right_panel/HeaderButton.js index decce417d8..ffd3d87616 100644 --- a/src/components/views/right_panel/HeaderButton.js +++ b/src/components/views/right_panel/HeaderButton.js @@ -20,7 +20,6 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import dis from '../../../dispatcher'; import Analytics from '../../../Analytics'; import AccessibleButton from '../elements/AccessibleButton'; diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index cbdc2cd81b..f3bc0967a4 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -19,7 +19,6 @@ limitations under the License. import React from 'react'; import { _t } from '../../../languageHandler'; -import dis from '../../../dispatcher'; import HeaderButton from './HeaderButton'; import HeaderButtons from './HeaderButtons'; import RightPanel from '../../structures/RightPanel'; From 02792132e1a8abc73ad5a319c20fff8e9a00f132 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 11 Apr 2019 13:22:47 +0200 Subject: [PATCH 6/7] dont create functions in render --- .../views/right_panel/GroupHeaderButtons.js | 14 +++++++++++-- .../views/right_panel/RoomHeaderButtons.js | 21 ++++++++++++++++--- 2 files changed, 30 insertions(+), 5 deletions(-) diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js index e01474f523..1b8e6a4a46 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.js @@ -26,6 +26,8 @@ import RightPanel from '../../structures/RightPanel'; export default class GroupHeaderButtons extends HeaderButtons { constructor(props) { super(props, RightPanel.Phase.GroupMemberList); + this._onMembersClicked = this._onMembersClicked.bind(this); + this._onRoomsClicked = this._onRoomsClicked.bind(this); } onAction(payload) { @@ -50,6 +52,14 @@ export default class GroupHeaderButtons extends HeaderButtons { } } + _onMembersClicked() { + this.togglePhase(RightPanel.Phase.GroupMemberList); + } + + _onRoomsClicked() { + this.togglePhase(RightPanel.Phase.GroupRoomList); + } + renderButtons() { const groupPhases = [ RightPanel.Phase.GroupMemberInfo, @@ -64,13 +74,13 @@ export default class GroupHeaderButtons extends HeaderButtons { this.togglePhase(RightPanel.Phase.GroupMemberList)} + onClick={this._onMembersClicked} analytics={['Right Panel', 'Group Member List Button', 'click']} />, this.togglePhase(RightPanel.Phase.GroupRoomList)} + onClick={this._onRoomsClicked} analytics={['Right Panel', 'Group Room List Button', 'click']} />, ]; diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index f3bc0967a4..65d74c7a0b 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -26,6 +26,9 @@ import RightPanel from '../../structures/RightPanel'; export default class RoomHeaderButtons extends HeaderButtons { constructor(props) { super(props, RightPanel.Phase.RoomMemberList); + this._onMembersClicked = this._onMembersClicked.bind(this); + this._onFilesClicked = this._onFilesClicked.bind(this); + this._onNotificationsClicked = this._onNotificationsClicked.bind(this); } onAction(payload) { @@ -47,6 +50,18 @@ export default class RoomHeaderButtons extends HeaderButtons { } } + _onMembersClicked() { + this.togglePhase(RightPanel.Phase.RoomMemberList); + } + + _onFilesClicked() { + this.togglePhase(RightPanel.Phase.FilePanel); + } + + _onNotificationsClicked() { + this.togglePhase(RightPanel.Phase.NotificationPanel); + } + renderButtons() { const membersPhases = [ RightPanel.Phase.RoomMemberList, @@ -58,19 +73,19 @@ export default class RoomHeaderButtons extends HeaderButtons { this.togglePhase(RightPanel.Phase.RoomMemberList)} + onClick={this._onMembersClicked} analytics={['Right Panel', 'Member List Button', 'click']} />, this.togglePhase(RightPanel.Phase.FilePanel)} + onClick={this._onFilesClicked} analytics={['Right Panel', 'File List Button', 'click']} />, this.togglePhase(RightPanel.Phase.NotificationPanel)} + onClick={this._onNotificationsClicked} analytics={['Right Panel', 'Notification List Button', 'click']} />, ]; From 483b7fc14d0eccced2cb21c3b7769adf96964501 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 11 Apr 2019 13:31:21 +0200 Subject: [PATCH 7/7] take buttons into account that are active over multiple phases when toggling --- .../views/right_panel/GroupHeaderButtons.js | 26 +++++++++---------- .../views/right_panel/HeaderButtons.js | 4 +-- .../views/right_panel/RoomHeaderButtons.js | 16 ++++++------ 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js index 1b8e6a4a46..ec14331ad2 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.js @@ -23,6 +23,15 @@ import HeaderButton from './HeaderButton'; import HeaderButtons from './HeaderButtons'; import RightPanel from '../../structures/RightPanel'; +const GROUP_PHASES = [ + RightPanel.Phase.GroupMemberInfo, + RightPanel.Phase.GroupMemberList, +]; +const ROOM_PHASES = [ + RightPanel.Phase.GroupRoomList, + RightPanel.Phase.GroupRoomInfo, +]; + export default class GroupHeaderButtons extends HeaderButtons { constructor(props) { super(props, RightPanel.Phase.GroupMemberList); @@ -53,33 +62,24 @@ export default class GroupHeaderButtons extends HeaderButtons { } _onMembersClicked() { - this.togglePhase(RightPanel.Phase.GroupMemberList); + this.togglePhase(RightPanel.Phase.GroupMemberList, GROUP_PHASES); } _onRoomsClicked() { - this.togglePhase(RightPanel.Phase.GroupRoomList); + this.togglePhase(RightPanel.Phase.GroupRoomList, ROOM_PHASES); } renderButtons() { - const groupPhases = [ - RightPanel.Phase.GroupMemberInfo, - RightPanel.Phase.GroupMemberList, - ]; - const roomPhases = [ - RightPanel.Phase.GroupRoomList, - RightPanel.Phase.GroupRoomInfo, - ]; - return [ , , diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js index fb124e8d3f..2fa9935ab8 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.js @@ -60,8 +60,8 @@ export default class HeaderButtons extends React.Component { }, extras)); } - togglePhase(phase) { - if (this.state.phase === phase) { + togglePhase(phase, validPhases = [phase]) { + if (validPhases.includes(this.state.phase)) { dis.dispatch({ action: 'hide_right_panel', }); diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index 65d74c7a0b..950fa30e38 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -23,6 +23,12 @@ import HeaderButton from './HeaderButton'; import HeaderButtons from './HeaderButtons'; import RightPanel from '../../structures/RightPanel'; +const MEMBER_PHASES = [ + RightPanel.Phase.RoomMemberList, + RightPanel.Phase.RoomMemberInfo, + RightPanel.Phase.Room3pidMemberInfo, +]; + export default class RoomHeaderButtons extends HeaderButtons { constructor(props) { super(props, RightPanel.Phase.RoomMemberList); @@ -51,7 +57,7 @@ export default class RoomHeaderButtons extends HeaderButtons { } _onMembersClicked() { - this.togglePhase(RightPanel.Phase.RoomMemberList); + this.togglePhase(RightPanel.Phase.RoomMemberList, MEMBER_PHASES); } _onFilesClicked() { @@ -63,16 +69,10 @@ export default class RoomHeaderButtons extends HeaderButtons { } renderButtons() { - const membersPhases = [ - RightPanel.Phase.RoomMemberList, - RightPanel.Phase.RoomMemberInfo, - RightPanel.Phase.Room3pidMemberInfo, - ]; - return [ ,