diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js index ec14331ad2..c112d0195a 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.js @@ -3,6 +3,7 @@ Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd Copyright 2017 New Vector Ltd Copyright 2018 New Vector Ltd +Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -20,21 +21,21 @@ limitations under the License. import React from 'react'; import { _t } from '../../../languageHandler'; import HeaderButton from './HeaderButton'; -import HeaderButtons from './HeaderButtons'; -import RightPanel from '../../structures/RightPanel'; +import HeaderButtons, {HEADER_KIND_GROUP} from './HeaderButtons'; +import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases"; const GROUP_PHASES = [ - RightPanel.Phase.GroupMemberInfo, - RightPanel.Phase.GroupMemberList, + RIGHT_PANEL_PHASES.GroupMemberInfo, + RIGHT_PANEL_PHASES.GroupMemberList, ]; const ROOM_PHASES = [ - RightPanel.Phase.GroupRoomList, - RightPanel.Phase.GroupRoomInfo, + RIGHT_PANEL_PHASES.GroupRoomList, + RIGHT_PANEL_PHASES.GroupRoomInfo, ]; export default class GroupHeaderButtons extends HeaderButtons { constructor(props) { - super(props, RightPanel.Phase.GroupMemberList); + super(props, HEADER_KIND_GROUP); this._onMembersClicked = this._onMembersClicked.bind(this); this._onRoomsClicked = this._onRoomsClicked.bind(this); } @@ -44,29 +45,31 @@ export default class GroupHeaderButtons extends HeaderButtons { if (payload.action === "view_user") { if (payload.member) { - this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member}); + this.setPhase(RIGHT_PANEL_PHASES.RoomMemberInfo, {member: payload.member}); } else { - this.setPhase(RightPanel.Phase.GroupMemberList); + this.setPhase(RIGHT_PANEL_PHASES.GroupMemberList); } } else if (payload.action === "view_group") { - this.setPhase(RightPanel.Phase.GroupMemberList); + this.setPhase(RIGHT_PANEL_PHASES.GroupMemberList); } else if (payload.action === "view_group_room") { - this.setPhase(RightPanel.Phase.GroupRoomInfo, {groupRoomId: payload.groupRoomId, groupId: payload.groupId}); + this.setPhase(RIGHT_PANEL_PHASES.GroupRoomInfo, {groupRoomId: payload.groupRoomId, groupId: payload.groupId}); } else if (payload.action === "view_group_room_list") { - this.setPhase(RightPanel.Phase.GroupRoomList); + this.setPhase(RIGHT_PANEL_PHASES.GroupRoomList); } else if (payload.action === "view_group_member_list") { - this.setPhase(RightPanel.Phase.GroupMemberList); + this.setPhase(RIGHT_PANEL_PHASES.GroupMemberList); } else if (payload.action === "view_group_user") { - this.setPhase(RightPanel.Phase.GroupMemberInfo, {member: payload.member}); + this.setPhase(RIGHT_PANEL_PHASES.GroupMemberInfo, {member: payload.member}); } } _onMembersClicked() { - this.togglePhase(RightPanel.Phase.GroupMemberList, GROUP_PHASES); + // This toggles for us, if needed + this.setPhase(RIGHT_PANEL_PHASES.GroupMemberList); } _onRoomsClicked() { - this.togglePhase(RightPanel.Phase.GroupRoomList, ROOM_PHASES); + // This toggles for us, if needed + this.setPhase(RIGHT_PANEL_PHASES.GroupRoomList); } renderButtons() { diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js index a01b511dc8..c43e8fc47e 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.js @@ -3,6 +3,7 @@ Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd Copyright 2017 New Vector Ltd Copyright 2018 New Vector Ltd +Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -18,62 +19,44 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import dis from '../../../dispatcher'; +import RightPanelStore from "../../../stores/RightPanelStore"; + +export const HEADER_KIND_ROOM = "room"; +export const HEADER_KIND_GROUP = "group"; + +const HEADER_KINDS = [HEADER_KIND_GROUP, HEADER_KIND_ROOM]; export default class HeaderButtons extends React.Component { - constructor(props, initialPhase) { + constructor(props, kind) { super(props); + if (!HEADER_KINDS.includes(kind)) throw new Error(`Invalid header kind: ${kind}`); + + const rps = RightPanelStore.getSharedInstance(); this.state = { - phase: props.collapsedRhs ? null : initialPhase, - isUserPrivilegedInGroup: null, + headerKind: kind, + phase: kind === HEADER_KIND_ROOM ? rps.visibleRoomPanelPhase : rps.visibleGroupPanelPhase, }; - this.onAction = this.onAction.bind(this); } componentWillMount() { - this.dispatcherRef = dis.register(this.onAction); + this._storeToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelUpdate.bind(this)); } componentWillUnmount() { - dis.unregister(this.dispatcherRef); - } - - componentDidUpdate(prevProps) { - if (!prevProps.collapsedRhs && this.props.collapsedRhs) { - this.setState({ - phase: null, - }); - } + if (this._storeToken) this._storeToken.remove(); } setPhase(phase, extras) { - if (this.props.collapsedRhs) { - dis.dispatch({ - action: 'show_right_panel', - }); - } - dis.dispatch(Object.assign({ - action: 'view_right_panel_phase', + dis.dispatch({ + action: 'set_right_panel_phase', phase: phase, - }, extras)); + refireParams: extras, + }); } - togglePhase(phase, validPhases = [phase]) { - if (validPhases.includes(this.state.phase)) { - dis.dispatch({ - action: 'hide_right_panel', - }); - } else { - this.setPhase(phase); - } - } - - isPhase(phases) { - if (this.props.collapsedRhs) { - return false; - } + isPhase(phases: string | string[]) { if (Array.isArray(phases)) { return phases.includes(this.state.phase); } else { @@ -81,22 +64,19 @@ export default class HeaderButtons extends React.Component { } } - onAction(payload) { - if (payload.action === "view_right_panel_phase") { - this.setState({ - phase: payload.phase, - }); + onRightPanelUpdate() { + const rps = RightPanelStore.getSharedInstance(); + if (this.state.headerKind === HEADER_KIND_ROOM) { + this.setState({phase: rps.visibleRoomPanelPhase}); + } else if (this.state.head === HEADER_KIND_GROUP) { + this.setState({phase: rps.visibleGroupPanelPhase}); } } render() { // inline style as this will be swapped around in future commits return
- { this.renderButtons() } + {this.renderButtons()}
; } } - -HeaderButtons.propTypes = { - collapsedRhs: PropTypes.bool, -}; diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index 9ccd94e117..f59159d1d9 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -3,6 +3,7 @@ Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd Copyright 2017 New Vector Ltd Copyright 2018 New Vector Ltd +Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -20,18 +21,18 @@ limitations under the License. import React from 'react'; import { _t } from '../../../languageHandler'; import HeaderButton from './HeaderButton'; -import HeaderButtons from './HeaderButtons'; -import RightPanel from '../../structures/RightPanel'; +import HeaderButtons, {HEADER_KIND_ROOM} from './HeaderButtons'; +import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases"; const MEMBER_PHASES = [ - RightPanel.Phase.RoomMemberList, - RightPanel.Phase.RoomMemberInfo, - RightPanel.Phase.Room3pidMemberInfo, + RIGHT_PANEL_PHASES.RoomMemberList, + RIGHT_PANEL_PHASES.RoomMemberInfo, + RIGHT_PANEL_PHASES.Room3pidMemberInfo, ]; export default class RoomHeaderButtons extends HeaderButtons { constructor(props) { - super(props, RightPanel.Phase.RoomMemberList); + super(props, HEADER_KIND_ROOM); this._onMembersClicked = this._onMembersClicked.bind(this); this._onFilesClicked = this._onFilesClicked.bind(this); this._onNotificationsClicked = this._onNotificationsClicked.bind(this); @@ -41,29 +42,32 @@ export default class RoomHeaderButtons extends HeaderButtons { super.onAction(payload); if (payload.action === "view_user") { if (payload.member) { - this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member}); + this.setPhase(RIGHT_PANEL_PHASES.RoomMemberInfo, {member: payload.member}); } else { - this.setPhase(RightPanel.Phase.RoomMemberList); + this.setPhase(RIGHT_PANEL_PHASES.RoomMemberList); } } else if (payload.action === "view_3pid_invite") { if (payload.event) { - this.setPhase(RightPanel.Phase.Room3pidMemberInfo, {event: payload.event}); + this.setPhase(RIGHT_PANEL_PHASES.Room3pidMemberInfo, {event: payload.event}); } else { - this.setPhase(RightPanel.Phase.RoomMemberList); + this.setPhase(RIGHT_PANEL_PHASES.RoomMemberList); } } } _onMembersClicked() { - this.togglePhase(RightPanel.Phase.RoomMemberList, MEMBER_PHASES); + // This toggles for us, if needed + this.setPhase(RIGHT_PANEL_PHASES.RoomMemberList); } _onFilesClicked() { - this.togglePhase(RightPanel.Phase.FilePanel); + // This toggles for us, if needed + this.setPhase(RIGHT_PANEL_PHASES.FilePanel); } _onNotificationsClicked() { - this.togglePhase(RightPanel.Phase.NotificationPanel); + // This toggles for us, if needed + this.setPhase(RIGHT_PANEL_PHASES.NotificationPanel); } renderButtons() { @@ -76,13 +80,13 @@ export default class RoomHeaderButtons extends HeaderButtons { />, , , diff --git a/src/stores/RightPanelStore.js b/src/stores/RightPanelStore.js index 0d66e825ea..8cb0df514a 100644 --- a/src/stores/RightPanelStore.js +++ b/src/stores/RightPanelStore.js @@ -32,6 +32,16 @@ const INITIAL_STATE = { const GROUP_PHASES = Object.keys(RIGHT_PANEL_PHASES).filter(k => k.startsWith("Group")); +// These are the phases that are safe to persist (the ones that don't require additional +// arguments, basically). +const PHASES_TO_PERSIST = [ + RIGHT_PANEL_PHASES.NotificationPanel, + RIGHT_PANEL_PHASES.FilePanel, + RIGHT_PANEL_PHASES.RoomMemberList, + RIGHT_PANEL_PHASES.GroupMemberList, + RIGHT_PANEL_PHASES.GroupRoomList, +]; + /** * A class for tracking the state of the right panel between layouts and * sessions. @@ -62,12 +72,47 @@ export default class RightPanelStore extends Store { return this._state.lastGroupPhase; } + get visibleRoomPanelPhase(): string { + return this.isOpenForRoom ? this.roomPanelPhase : null; + } + + get visibleGroupPanelPhase(): string { + return this.isOpenForGroup ? this.groupPanelPhase : null; + } + _setState(newState) { this._state = Object.assign(this._state, newState); - SettingsStore.setValue("showRightPanelInRoom", null, SettingLevel.DEVICE, this._state.showRoomPanel); - SettingsStore.setValue("showRightPanelInGroup", null, SettingLevel.DEVICE, this._state.showGroupPanel); - SettingsStore.setValue("lastRightPanelPhaseForRoom", null, SettingLevel.DEVICE, this._state.lastRoomPhase); - SettingsStore.setValue("lastRightPanelPhaseForGroup", null, SettingLevel.DEVICE, this._state.lastGroupPhase); + + SettingsStore.setValue( + "showRightPanelInRoom", + null, + SettingLevel.DEVICE, + this._state.showRoomPanel, + ); + SettingsStore.setValue( + "showRightPanelInGroup", + null, + SettingLevel.DEVICE, + this._state.showGroupPanel, + ); + + if (PHASES_TO_PERSIST.includes(this._state.lastRoomPhase)) { + SettingsStore.setValue( + "lastRightPanelPhaseForRoom", + null, + SettingLevel.DEVICE, + this._state.lastRoomPhase, + ); + } + if (PHASES_TO_PERSIST.includes(this._state.lastGroupPhase)) { + SettingsStore.setValue( + "lastRightPanelPhaseForGroup", + null, + SettingLevel.DEVICE, + this._state.lastGroupPhase, + ); + } + this.__emitChange(); } @@ -101,6 +146,13 @@ export default class RightPanelStore extends Store { }); } } + + // Let things like the member info panel actually open to the right member. + dis.dispatch({ + action: 'after_right_panel_phase_change', + phase: targetPhase, + ...(payload.refireParams || {}), + }); } static getSharedInstance(): RightPanelStore {