From 5253f2992898fe3359657b768f8c318f598ecc9a Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 15:31:01 -0700 Subject: [PATCH 01/20] Build out a store for the right panel state machine This should make it easier to funnel the expected behaviour through a central block of code. --- src/components/structures/RightPanel.js | 17 +-- src/settings/Settings.js | 19 +++ .../handlers/DeviceSettingsHandler.js | 26 ++++ src/stores/RightPanelStore.js | 126 ++++++++++++++++++ 4 files changed, 175 insertions(+), 13 deletions(-) create mode 100644 src/stores/RightPanelStore.js diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 895f6ae57e..fb0924848f 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -1,9 +1,9 @@ /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd -Copyright 2017 New Vector Ltd -Copyright 2018 New Vector Ltd +Copyright 2017, 2018 New Vector Ltd Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> +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. @@ -28,6 +28,7 @@ import RateLimitedFunc from '../../ratelimitedfunc'; import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker'; import GroupStore from '../../stores/GroupStore'; import SettingsStore from "../../settings/SettingsStore"; +import {RIGHT_PANEL_PHASES} from "../../stores/RightPanelStore"; export default class RightPanel extends React.Component { static get propTypes() { @@ -44,17 +45,7 @@ export default class RightPanel extends React.Component { }; } - static Phase = Object.freeze({ - RoomMemberList: 'RoomMemberList', - GroupMemberList: 'GroupMemberList', - GroupRoomList: 'GroupRoomList', - GroupRoomInfo: 'GroupRoomInfo', - FilePanel: 'FilePanel', - NotificationPanel: 'NotificationPanel', - RoomMemberInfo: 'RoomMemberInfo', - Room3pidMemberInfo: 'Room3pidMemberInfo', - GroupMemberInfo: 'GroupMemberInfo', - }); + static Phase = RIGHT_PANEL_PHASES; constructor(props, context) { super(props, context); diff --git a/src/settings/Settings.js b/src/settings/Settings.js index b02ab82400..53a95c9c6d 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -1,6 +1,7 @@ /* Copyright 2017 Travis Ralston Copyright 2018, 2019 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. @@ -24,6 +25,8 @@ import { import CustomStatusController from "./controllers/CustomStatusController"; import ThemeController from './controllers/ThemeController'; import ReloadOnChangeController from "./controllers/ReloadOnChangeController"; +import RightPanel from "../components/structures/RightPanel"; +import {RIGHT_PANEL_PHASES} from "../stores/RightPanelStore"; // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times const LEVELS_ROOM_SETTINGS = ['device', 'room-device', 'room-account', 'account', 'config']; @@ -463,4 +466,20 @@ export const SETTINGS = { displayName: _td("Show previews/thumbnails for images"), default: true, }, + "showRightPanelInRoom": { + supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, + default: false, + }, + "showRightPanelInGroup": { + supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, + default: false, + }, + "lastRightPanelPhaseForRoom": { + supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, + default: RIGHT_PANEL_PHASES.RoomMemberInfo, + }, + "lastRightPanelPhaseForGroup": { + supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, + default: RIGHT_PANEL_PHASES.GroupMemberList, + }, }; diff --git a/src/settings/handlers/DeviceSettingsHandler.js b/src/settings/handlers/DeviceSettingsHandler.js index 76c518b97b..ed61e9f3be 100644 --- a/src/settings/handlers/DeviceSettingsHandler.js +++ b/src/settings/handlers/DeviceSettingsHandler.js @@ -1,6 +1,7 @@ /* Copyright 2017 Travis Ralston Copyright 2019 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. @@ -56,6 +57,17 @@ export default class DeviceSettingsHandler extends SettingsHandler { return null; // wrong type or otherwise not set } + // Special case the right panel - see `setValue` for rationale. + if ([ + "showRightPanelInRoom", + "showRightPanelInGroup", + "lastRightPanelPhaseForRoom", + "lastRightPanelPhaseForGroup", + ].includes(settingName)) { + const val = JSON.parse(localStorage.getItem(`mx_${settingName}`) || "{}"); + return val['value']; + } + const settings = this._getSettings() || {}; return settings[settingName]; } @@ -81,6 +93,20 @@ export default class DeviceSettingsHandler extends SettingsHandler { return Promise.resolve(); } + // Special case the right panel because we want to be able to update these all + // concurrently without stomping on one another. We could use async/await, though + // that introduces just enough latency to be annoying. + if ([ + "showRightPanelInRoom", + "showRightPanelInGroup", + "lastRightPanelPhaseForRoom", + "lastRightPanelPhaseForGroup", + ].includes(settingName)) { + localStorage.setItem(`mx_${settingName}`, JSON.stringify({value: newValue})); + this._watchers.notifyUpdate(settingName, null, SettingLevel.DEVICE, newValue); + return Promise.resolve(); + } + const settings = this._getSettings() || {}; settings[settingName] = newValue; localStorage.setItem("mx_local_settings", JSON.stringify(settings)); diff --git a/src/stores/RightPanelStore.js b/src/stores/RightPanelStore.js new file mode 100644 index 0000000000..fe4be81fd6 --- /dev/null +++ b/src/stores/RightPanelStore.js @@ -0,0 +1,126 @@ +/* +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. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import dis from '../dispatcher'; +import {Store} from 'flux/utils'; +import SettingsStore, {SettingLevel} from "../settings/SettingsStore"; + +const INITIAL_STATE = { + // Whether or not to show the right panel at all. We split out rooms and groups + // because they're different flows for the user to follow. + showRoomPanel: SettingsStore.getValue("showRightPanelInRoom"), + showGroupPanel: SettingsStore.getValue("showRightPanelInGroup"), + + // The last phase (screen) the right panel was showing + lastRoomPhase: SettingsStore.getValue("lastRightPanelPhaseForRoom"), + lastGroupPhase: SettingsStore.getValue("lastRightPanelPhaseForGroup"), +}; + +export const RIGHT_PANEL_PHASES = Object.freeze({ + // Room stuff + RoomMemberList: 'RoomMemberList', + FilePanel: 'FilePanel', + NotificationPanel: 'NotificationPanel', + RoomMemberInfo: 'RoomMemberInfo', + Room3pidMemberInfo: 'Room3pidMemberInfo', + + // Group stuff + GroupMemberList: 'GroupMemberList', + GroupRoomList: 'GroupRoomList', + GroupRoomInfo: 'GroupRoomInfo', + GroupMemberInfo: 'GroupMemberInfo', +}); + +const GROUP_PHASES = Object.keys(RIGHT_PANEL_PHASES).filter(k => k.startsWith("Group")); + +/** + * A class for tracking the state of the right panel between layouts and + * sessions. + */ +export default class RightPanelStore extends Store { + static _instance; + + constructor() { + super(dis); + + // Initialise state + this._state = INITIAL_STATE; + } + + get isOpenForRoom(): boolean { + return this._state.showRoomPanel; + } + + get isOpenForGroup(): boolean { + return this._state.showGroupPanel; + } + + get roomPanelPhase(): string { + return this._state.lastRoomPhase; + } + + get groupPanelPhase(): string { + return this._state.lastGroupPhase; + } + + _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); + this.__emitChange(); + } + + __onDispatch(payload) { + if (payload.action !== 'set_right_panel_phase') return; + + const targetPhase = payload.phase; + if (!RIGHT_PANEL_PHASES[targetPhase]) { + console.warn(`Tried to switch right panel to unknown phase: ${targetPhase}`); + return; + } + + if (GROUP_PHASES.includes(targetPhase)) { + if (targetPhase === this._state.lastGroupPhase) { + this._setState({ + showGroupPanel: !this._state.showGroupPanel, + }); + } else { + this._setState({ + lastGroupPhase: targetPhase, + }); + } + } else { + if (targetPhase === this._state.lastRoomPhase) { + this._setState({ + showRoomPanel: !this._state.showRoomPanel, + }); + } else { + this._setState({ + lastRoomPhase: targetPhase, + }); + } + } + } + + static getSharedInstance(): RightPanelStore { + if (!RightPanelStore._instance) { + RightPanelStore._instance = new RightPanelStore(); + } + return RightPanelStore._instance; + } +} From 6e882251bd6845893210bc37f555d33d93389f33 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 17:47:18 -0700 Subject: [PATCH 02/20] Break the right panel completely This lays a foundation for redirecting all the traffic through the new store, but for now the core parts of the app need to stop caring if the right panel is open. --- src/components/structures/GroupView.js | 9 ++++-- src/components/structures/LoggedInView.js | 3 -- src/components/structures/MainSplit.js | 4 ++- src/components/structures/MatrixChat.js | 15 --------- src/components/structures/RightPanel.js | 2 +- src/components/structures/RoomView.js | 18 +++++------ .../views/right_panel/RoomHeaderButtons.js | 2 -- src/components/views/rooms/RoomHeader.js | 3 +- src/settings/Settings.js | 3 +- src/stores/RightPanelStore.js | 16 +--------- src/stores/RightPanelStorePhases.js | 31 +++++++++++++++++++ 11 files changed, 52 insertions(+), 54 deletions(-) create mode 100644 src/stores/RightPanelStorePhases.js diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index a0aa36803f..65f8a832d7 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -38,6 +38,7 @@ import { showGroupAddRoomDialog } from '../../GroupAddressPicker'; import {makeGroupPermalink, makeUserPermalink} from "../../utils/permalinks/Permalinks"; import {Group} from "matrix-js-sdk"; import {allSettled, sleep} from "../../utils/promise"; +import RightPanelStore from "../../stores/RightPanelStore"; const LONG_DESC_PLACEHOLDER = _td( `

HTML for your community's page

@@ -1298,7 +1299,9 @@ export default createReactClass({ ); } - const rightPanel = !this.props.collapsedRhs ? : undefined; + const rightPanel = !RightPanelStore.getSharedInstance().isOpenForGroup + ? + : undefined; const headerClasses = { "mx_GroupView_header": true, @@ -1326,9 +1329,9 @@ export default createReactClass({
{ rightButtons }
- + - + { this._getMembershipSection() } { this._getGroupSection() } diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index ae71af1a85..8bc51f1d32 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -70,7 +70,6 @@ const LoggedInView = createReactClass({ // Called with the credentials of a registered user (if they were a ROU that // transitioned to PWLU) onRegistered: PropTypes.func, - collapsedRhs: PropTypes.bool, // Used by the RoomView to handle joining rooms viaServers: PropTypes.arrayOf(PropTypes.string), @@ -552,7 +551,6 @@ const LoggedInView = createReactClass({ eventPixelOffset={this.props.initialEventPixelOffset} key={this.props.currentRoomId || 'roomview'} disabled={this.props.middleDisabled} - collapsedRhs={this.props.collapsedRhs} ConferenceHandler={this.props.ConferenceHandler} resizeNotifier={this.props.resizeNotifier} />; @@ -583,7 +581,6 @@ const LoggedInView = createReactClass({ pageElement = ; break; } diff --git a/src/components/structures/MainSplit.js b/src/components/structures/MainSplit.js index 163755ff1a..8cf6765de4 100644 --- a/src/components/structures/MainSplit.js +++ b/src/components/structures/MainSplit.js @@ -62,7 +62,7 @@ export default class MainSplit extends React.Component { } componentDidMount() { - if (this.props.panel && !this.props.collapsedRhs) { + if (this.props.panel) { this._createResizer(); } } @@ -80,6 +80,8 @@ export default class MainSplit extends React.Component { const wasPanelSet = this.props.panel && !prevProps.panel; const wasPanelCleared = !this.props.panel && prevProps.panel; + // TODO: TravisR - fix this logic + if (this.resizeContainer && (wasExpanded || wasPanelSet)) { // The resizer can only be created when **both** expanded and the panel is // set. Once both are true, the container ref will mount, which is required diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 585499ddeb..0b56ffc27a 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -175,7 +175,6 @@ export default createReactClass({ viewUserId: null, // this is persisted as mx_lhs_size, loaded in LoggedInView collapseLhs: false, - collapsedRhs: window.localStorage.getItem("mx_rhs_collapsed") === "true", leftDisabled: false, middleDisabled: false, rightDisabled: false, @@ -657,18 +656,6 @@ export default createReactClass({ collapseLhs: false, }); break; - case 'hide_right_panel': - window.localStorage.setItem("mx_rhs_collapsed", true); - this.setState({ - collapsedRhs: true, - }); - break; - case 'show_right_panel': - window.localStorage.setItem("mx_rhs_collapsed", false); - this.setState({ - collapsedRhs: false, - }); - break; case 'panel_disable': { this.setState({ leftDisabled: payload.leftDisabled || payload.sideDisabled || false, @@ -1245,7 +1232,6 @@ export default createReactClass({ view: VIEWS.LOGIN, ready: false, collapseLhs: false, - collapsedRhs: false, currentRoomId: null, }); this.subTitleStatus = ''; @@ -1261,7 +1247,6 @@ export default createReactClass({ view: VIEWS.SOFT_LOGOUT, ready: false, collapseLhs: false, - collapsedRhs: false, currentRoomId: null, }); this.subTitleStatus = ''; diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index fb0924848f..73e3e8ecdd 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -28,7 +28,7 @@ import RateLimitedFunc from '../../ratelimitedfunc'; import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker'; import GroupStore from '../../stores/GroupStore'; import SettingsStore from "../../settings/SettingsStore"; -import {RIGHT_PANEL_PHASES} from "../../stores/RightPanelStore"; +import {RIGHT_PANEL_PHASES} from "../../stores/RightPanelStorePhases"; export default class RightPanel extends React.Component { static get propTypes() { diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 5cc1e2b765..f4900139ec 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -54,6 +54,7 @@ import WidgetEchoStore from '../../stores/WidgetEchoStore'; import SettingsStore, {SettingLevel} from "../../settings/SettingsStore"; import WidgetUtils from '../../utils/WidgetUtils'; import AccessibleButton from "../views/elements/AccessibleButton"; +import RightPanelStore from "../../stores/RightPanelStore"; const DEBUG = false; let debuglog = function() {}; @@ -98,9 +99,6 @@ module.exports = createReactClass({ // * invited us to the room oobData: PropTypes.object, - // is the RightPanel collapsed? - collapsedRhs: PropTypes.bool, - // Servers the RoomView can use to try and assist joins viaServers: PropTypes.arrayOf(PropTypes.string), }, @@ -1714,7 +1712,7 @@ module.exports = createReactClass({ let aux = null; let previewBar; let hideCancel = false; - let hideRightPanel = false; + let forceHideRightPanel = false; if (this.state.forwardingEvent !== null) { aux = ; } else if (this.state.searching) { @@ -1760,7 +1758,7 @@ module.exports = createReactClass({ ); } else { - hideRightPanel = true; + forceHideRightPanel = true; } } else if (hiddenHighlightCount > 0) { aux = ( @@ -1947,9 +1945,11 @@ module.exports = createReactClass({ }, ); - const rightPanel = !hideRightPanel && this.state.room && - ; - const collapsedRhs = hideRightPanel || this.props.collapsedRhs; + const showRightPanel = !forceHideRightPanel && this.state.room + && RightPanelStore.getSharedInstance().isOpenForRoom; + const rightPanel = showRightPanel + ? + : null; return (
@@ -1957,7 +1957,6 @@ module.exports = createReactClass({
diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index 950fa30e38..9ccd94e117 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -45,8 +45,6 @@ export default class RoomHeaderButtons extends HeaderButtons { } else { this.setPhase(RightPanel.Phase.RoomMemberList); } - } else if (payload.action === "view_room" && !this.props.collapsedRhs) { - this.setPhase(RightPanel.Phase.RoomMemberList); } else if (payload.action === "view_3pid_invite") { if (payload.event) { this.setPhase(RightPanel.Phase.Room3pidMemberInfo, {event: payload.event}); diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 5b6c0f6d2d..7c74717ed3 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -39,7 +39,6 @@ module.exports = createReactClass({ room: PropTypes.object, oobData: PropTypes.object, inRoom: PropTypes.bool, - collapsedRhs: PropTypes.bool, onSettingsClick: PropTypes.func, onPinnedClick: PropTypes.func, onSearchClick: PropTypes.func, @@ -304,7 +303,7 @@ module.exports = createReactClass({ { topicElement } { cancelButton } { rightRow } - +
); diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 53a95c9c6d..82dd639819 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -25,8 +25,7 @@ import { import CustomStatusController from "./controllers/CustomStatusController"; import ThemeController from './controllers/ThemeController'; import ReloadOnChangeController from "./controllers/ReloadOnChangeController"; -import RightPanel from "../components/structures/RightPanel"; -import {RIGHT_PANEL_PHASES} from "../stores/RightPanelStore"; +import {RIGHT_PANEL_PHASES} from "../stores/RightPanelStorePhases"; // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times const LEVELS_ROOM_SETTINGS = ['device', 'room-device', 'room-account', 'account', 'config']; diff --git a/src/stores/RightPanelStore.js b/src/stores/RightPanelStore.js index fe4be81fd6..0d66e825ea 100644 --- a/src/stores/RightPanelStore.js +++ b/src/stores/RightPanelStore.js @@ -17,6 +17,7 @@ limitations under the License. import dis from '../dispatcher'; import {Store} from 'flux/utils'; import SettingsStore, {SettingLevel} from "../settings/SettingsStore"; +import {RIGHT_PANEL_PHASES} from "./RightPanelStorePhases"; const INITIAL_STATE = { // Whether or not to show the right panel at all. We split out rooms and groups @@ -29,21 +30,6 @@ const INITIAL_STATE = { lastGroupPhase: SettingsStore.getValue("lastRightPanelPhaseForGroup"), }; -export const RIGHT_PANEL_PHASES = Object.freeze({ - // Room stuff - RoomMemberList: 'RoomMemberList', - FilePanel: 'FilePanel', - NotificationPanel: 'NotificationPanel', - RoomMemberInfo: 'RoomMemberInfo', - Room3pidMemberInfo: 'Room3pidMemberInfo', - - // Group stuff - GroupMemberList: 'GroupMemberList', - GroupRoomList: 'GroupRoomList', - GroupRoomInfo: 'GroupRoomInfo', - GroupMemberInfo: 'GroupMemberInfo', -}); - const GROUP_PHASES = Object.keys(RIGHT_PANEL_PHASES).filter(k => k.startsWith("Group")); /** diff --git a/src/stores/RightPanelStorePhases.js b/src/stores/RightPanelStorePhases.js new file mode 100644 index 0000000000..83a6d97345 --- /dev/null +++ b/src/stores/RightPanelStorePhases.js @@ -0,0 +1,31 @@ +/* +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. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +// These are in their own file because of circular imports being a problem. +export const RIGHT_PANEL_PHASES = Object.freeze({ + // Room stuff + RoomMemberList: 'RoomMemberList', + FilePanel: 'FilePanel', + NotificationPanel: 'NotificationPanel', + RoomMemberInfo: 'RoomMemberInfo', + Room3pidMemberInfo: 'Room3pidMemberInfo', + + // Group stuff + GroupMemberList: 'GroupMemberList', + GroupRoomList: 'GroupRoomList', + GroupRoomInfo: 'GroupRoomInfo', + GroupMemberInfo: 'GroupMemberInfo', +}); From ca0c393783f6980b8372f264cb2dd45fe4cfe46c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 23:28:06 -0700 Subject: [PATCH 03/20] Use new right panel store for header buttons This introduces a new dispatch action (unused, so far) and routes the buttons towards the RightPanelStore for processing. --- .../views/right_panel/GroupHeaderButtons.js | 35 +++++---- .../views/right_panel/HeaderButtons.js | 74 +++++++------------ .../views/right_panel/RoomHeaderButtons.js | 34 +++++---- src/stores/RightPanelStore.js | 60 ++++++++++++++- 4 files changed, 121 insertions(+), 82 deletions(-) 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 { From 8b492fdaa5470b3519d64565408a8956800d5ef1 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 23:29:43 -0700 Subject: [PATCH 04/20] Remove dead code from GroupView This was for a caret that is no longer in the app. Instead, the header buttons act as a toggle. --- src/components/structures/GroupView.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 65f8a832d7..3571e0e89a 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -543,10 +543,6 @@ export default createReactClass({ }); }, - _onShowRhsClick: function(ev) { - dis.dispatch({ action: 'show_right_panel' }); - }, - _onEditClick: function() { this.setState({ editing: true, From d8d8e590021abd2e60e530f6572fc49c6655313b Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 23:30:13 -0700 Subject: [PATCH 05/20] Don't show/hide the right panel depending on window size Fixes https://github.com/vector-im/riot-web/issues/8772 --- src/components/structures/MatrixChat.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 0b56ffc27a..16a7061a63 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -1699,12 +1699,6 @@ export default createReactClass({ if (this._windowWidth <= showLhsThreshold && window.innerWidth > showLhsThreshold) { dis.dispatch({ action: 'show_left_panel' }); } - if (this._windowWidth > hideRhsThreshold && window.innerWidth <= hideRhsThreshold) { - dis.dispatch({ action: 'hide_right_panel' }); - } - if (this._windowWidth <= showRhsThreshold && window.innerWidth > showRhsThreshold) { - dis.dispatch({ action: 'show_right_panel' }); - } this.state.resizeNotifier.notifyWindowResized(); this._windowWidth = window.innerWidth; From eda712ece84ac931b2c773c217cf28eec764c99f Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 23:30:26 -0700 Subject: [PATCH 06/20] Update sticker picker handling for new right panel actions --- src/components/views/rooms/Stickerpicker.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index 8a00725718..24f256e706 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -181,8 +181,7 @@ export default class Stickerpicker extends React.Component { case "stickerpicker_close": this.setState({showStickers: false}); break; - case "show_right_panel": - case "hide_right_panel": + case "after_right_panel_phase_change": case "show_left_panel": case "hide_left_panel": this.setState({showStickers: false}); From 756cf3a88bda2b27dcad2c1d33cfbbbcb7466cc7 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 23:34:44 -0700 Subject: [PATCH 07/20] Convert the GroupMemberList actions to the new RightPanelStore --- src/components/views/groups/GroupMemberList.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js index 433625419d..3228a862ce 100644 --- a/src/components/views/groups/GroupMemberList.js +++ b/src/components/views/groups/GroupMemberList.js @@ -1,6 +1,7 @@ /* Copyright 2017 Vector Creations Ltd. Copyright 2017 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. @@ -24,7 +25,7 @@ import PropTypes from 'prop-types'; import { showGroupInviteDialog } from '../../../GroupAddressPicker'; import AccessibleButton from '../elements/AccessibleButton'; import TintableSvg from '../elements/TintableSvg'; -import RightPanel from '../../structures/RightPanel'; +import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases"; const INITIAL_LOAD_NUM_MEMBERS = 30; @@ -163,8 +164,8 @@ export default createReactClass({ onInviteToGroupButtonClick() { showGroupInviteDialog(this.props.groupId).then(() => { dis.dispatch({ - action: 'view_right_panel_phase', - phase: RightPanel.Phase.GroupMemberList, + action: 'set_right_panel_phase', + phase: RIGHT_PANEL_PHASES.GroupMemberList, groupId: this.props.groupId, }); }); From 42898ec41431457265d9abbe2678271edc599569 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 23:35:12 -0700 Subject: [PATCH 08/20] Rid ourselves of RightPanel.Phases completely --- src/components/structures/RightPanel.js | 32 ++++++++++++------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 73e3e8ecdd..76a6076892 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -45,8 +45,6 @@ export default class RightPanel extends React.Component { }; } - static Phase = RIGHT_PANEL_PHASES; - constructor(props, context) { super(props, context); this.state = { @@ -66,11 +64,11 @@ export default class RightPanel extends React.Component { _getPhaseFromProps() { if (this.props.groupId) { - return RightPanel.Phase.GroupMemberList; + return RIGHT_PANEL_PHASES.GroupMemberList; } else if (this.props.user) { - return RightPanel.Phase.RoomMemberInfo; + return RIGHT_PANEL_PHASES.RoomMemberInfo; } else { - return RightPanel.Phase.RoomMemberList; + return RIGHT_PANEL_PHASES.RoomMemberList; } } @@ -117,7 +115,7 @@ export default class RightPanel extends React.Component { onInviteToGroupButtonClick() { showGroupInviteDialog(this.props.groupId).then(() => { this.setState({ - phase: RightPanel.Phase.GroupMemberList, + phase: RIGHT_PANEL_PHASES.GroupMemberList, }); }); } @@ -133,9 +131,9 @@ export default class RightPanel extends React.Component { return; } // redraw the badge on the membership list - if (this.state.phase === RightPanel.Phase.RoomMemberList && member.roomId === this.props.roomId) { + if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberList && member.roomId === this.props.roomId) { this._delayedUpdate(); - } else if (this.state.phase === RightPanel.Phase.RoomMemberInfo && member.roomId === this.props.roomId && + } else if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberInfo && member.roomId === this.props.roomId && member.userId === this.state.member.userId) { // refresh the member info (e.g. new power level) this._delayedUpdate(); @@ -169,13 +167,13 @@ export default class RightPanel extends React.Component { let panel =
; - if (this.props.roomId && this.state.phase === RightPanel.Phase.RoomMemberList) { + if (this.props.roomId && this.state.phase === RIGHT_PANEL_PHASES.RoomMemberList) { panel = ; - } else if (this.props.groupId && this.state.phase === RightPanel.Phase.GroupMemberList) { + } else if (this.props.groupId && this.state.phase === RIGHT_PANEL_PHASES.GroupMemberList) { panel = ; - } else if (this.state.phase === RightPanel.Phase.GroupRoomList) { + } else if (this.state.phase === RIGHT_PANEL_PHASES.GroupRoomList) { panel = ; - } else if (this.state.phase === RightPanel.Phase.RoomMemberInfo) { + } else if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberInfo) { if (SettingsStore.isFeatureEnabled("feature_dm_verification")) { const onClose = () => { dis.dispatch({ @@ -192,9 +190,9 @@ export default class RightPanel extends React.Component { } else { panel = ; } - } else if (this.state.phase === RightPanel.Phase.Room3pidMemberInfo) { + } else if (this.state.phase === RIGHT_PANEL_PHASES.Room3pidMemberInfo) { panel = ; - } else if (this.state.phase === RightPanel.Phase.GroupMemberInfo) { + } else if (this.state.phase === RIGHT_PANEL_PHASES.GroupMemberInfo) { if (SettingsStore.isFeatureEnabled("feature_dm_verification")) { const onClose = () => { dis.dispatch({ @@ -216,14 +214,14 @@ export default class RightPanel extends React.Component { /> ); } - } else if (this.state.phase === RightPanel.Phase.GroupRoomInfo) { + } else if (this.state.phase === RIGHT_PANEL_PHASES.GroupRoomInfo) { panel = ; - } else if (this.state.phase === RightPanel.Phase.NotificationPanel) { + } else if (this.state.phase === RIGHT_PANEL_PHASES.NotificationPanel) { panel = ; - } else if (this.state.phase === RightPanel.Phase.FilePanel) { + } else if (this.state.phase === RIGHT_PANEL_PHASES.FilePanel) { panel = ; } From bbdff701b4cf0f7926a69e401cc75a403da711ed Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 23:40:18 -0700 Subject: [PATCH 09/20] Actually render the right panel in the new system --- src/components/structures/GroupView.js | 4 ++++ src/components/structures/RightPanel.js | 2 +- src/components/structures/RoomView.js | 4 ++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 3571e0e89a..1bbd561027 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -580,6 +580,10 @@ export default createReactClass({ profileForm: null, }); break; + case 'after_right_panel_phase_change': + // We don't keep state on the right panel, so just re-render to update + this.forceUpdate(); + break; default: break; } diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 76a6076892..39aff9be8d 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -141,7 +141,7 @@ export default class RightPanel extends React.Component { } onAction(payload) { - if (payload.action === "view_right_panel_phase") { + if (payload.action === "after_right_panel_phase_change") { this.setState({ phase: payload.phase, groupRoomId: payload.groupRoomId, diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index f4900139ec..53ff1fb760 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -582,6 +582,10 @@ module.exports = createReactClass({ onAction: function(payload) { switch (payload.action) { + case 'after_right_panel_phase_change': + // We don't keep state on the right panel, so just re-render to update + this.forceUpdate(); + break; case 'message_send_failed': case 'message_sent': this._checkIfAlone(this.state.room); From 4873b526df86d5d9f10454d16f05013d158283f8 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 23:48:05 -0700 Subject: [PATCH 10/20] Ensure the right panel stays the same between room changes if possible Fixes https://github.com/vector-im/riot-web/issues/10149 --- src/components/structures/RightPanel.js | 16 +++++++++++++--- src/stores/RightPanelStore.js | 16 +++------------- src/stores/RightPanelStorePhases.js | 10 ++++++++++ 3 files changed, 26 insertions(+), 16 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 39aff9be8d..9f78e09c6e 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -28,7 +28,8 @@ import RateLimitedFunc from '../../ratelimitedfunc'; import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker'; import GroupStore from '../../stores/GroupStore'; import SettingsStore from "../../settings/SettingsStore"; -import {RIGHT_PANEL_PHASES} from "../../stores/RightPanelStorePhases"; +import {RIGHT_PANEL_PHASES, RIGHT_PANEL_PHASES_NO_ARGS} from "../../stores/RightPanelStorePhases"; +import RightPanelStore from "../../stores/RightPanelStore"; export default class RightPanel extends React.Component { static get propTypes() { @@ -63,12 +64,21 @@ export default class RightPanel extends React.Component { } _getPhaseFromProps() { + const rps = RightPanelStore.getSharedInstance(); if (this.props.groupId) { - return RIGHT_PANEL_PHASES.GroupMemberList; + if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.groupPanelPhase)) { + rps.setPhase(RIGHT_PANEL_PHASES.GroupMemberList); + return RIGHT_PANEL_PHASES.GroupMemberList; + } + return rps.groupPanelPhase; } else if (this.props.user) { return RIGHT_PANEL_PHASES.RoomMemberInfo; } else { - return RIGHT_PANEL_PHASES.RoomMemberList; + if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.roomPanelPhase)) { + rps.setPhase(RIGHT_PANEL_PHASES.RoomMemberList); + return RIGHT_PANEL_PHASES.RoomMemberList; + } + return rps.roomPanelPhase; } } diff --git a/src/stores/RightPanelStore.js b/src/stores/RightPanelStore.js index 8cb0df514a..520a458755 100644 --- a/src/stores/RightPanelStore.js +++ b/src/stores/RightPanelStore.js @@ -17,7 +17,7 @@ limitations under the License. import dis from '../dispatcher'; import {Store} from 'flux/utils'; import SettingsStore, {SettingLevel} from "../settings/SettingsStore"; -import {RIGHT_PANEL_PHASES} from "./RightPanelStorePhases"; +import {RIGHT_PANEL_PHASES, RIGHT_PANEL_PHASES_NO_ARGS} from "./RightPanelStorePhases"; const INITIAL_STATE = { // Whether or not to show the right panel at all. We split out rooms and groups @@ -32,16 +32,6 @@ 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. @@ -96,7 +86,7 @@ export default class RightPanelStore extends Store { this._state.showGroupPanel, ); - if (PHASES_TO_PERSIST.includes(this._state.lastRoomPhase)) { + if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this._state.lastRoomPhase)) { SettingsStore.setValue( "lastRightPanelPhaseForRoom", null, @@ -104,7 +94,7 @@ export default class RightPanelStore extends Store { this._state.lastRoomPhase, ); } - if (PHASES_TO_PERSIST.includes(this._state.lastGroupPhase)) { + if (RIGHT_PANEL_PHASES_NO_ARGS.includes(this._state.lastGroupPhase)) { SettingsStore.setValue( "lastRightPanelPhaseForGroup", null, diff --git a/src/stores/RightPanelStorePhases.js b/src/stores/RightPanelStorePhases.js index 83a6d97345..96807ebf5b 100644 --- a/src/stores/RightPanelStorePhases.js +++ b/src/stores/RightPanelStorePhases.js @@ -29,3 +29,13 @@ export const RIGHT_PANEL_PHASES = Object.freeze({ GroupRoomInfo: 'GroupRoomInfo', GroupMemberInfo: 'GroupMemberInfo', }); + +// These are the phases that are safe to persist (the ones that don't require additional +// arguments). +export const RIGHT_PANEL_PHASES_NO_ARGS = [ + RIGHT_PANEL_PHASES.NotificationPanel, + RIGHT_PANEL_PHASES.FilePanel, + RIGHT_PANEL_PHASES.RoomMemberList, + RIGHT_PANEL_PHASES.GroupMemberList, + RIGHT_PANEL_PHASES.GroupRoomList, +]; From 75c32a2f025408681a43f226f281154f99d8d5ac Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 23:50:19 -0700 Subject: [PATCH 11/20] Fix a bug where the icons need to be clicked twice after reload Clicking on the member icon was fine, but clicking on the file panel wouldn't bring it up - it had to be clicked a second time to actually show the panel. --- src/stores/RightPanelStore.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/stores/RightPanelStore.js b/src/stores/RightPanelStore.js index 520a458755..2ad18fe521 100644 --- a/src/stores/RightPanelStore.js +++ b/src/stores/RightPanelStore.js @@ -123,6 +123,7 @@ export default class RightPanelStore extends Store { } else { this._setState({ lastGroupPhase: targetPhase, + showGroupPanel: true, }); } } else { @@ -133,6 +134,7 @@ export default class RightPanelStore extends Store { } else { this._setState({ lastRoomPhase: targetPhase, + showRoomPanel: true, }); } } From a24bbdffd0ecf76cddadaa1550f299923fcee321 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 5 Dec 2019 23:58:19 -0700 Subject: [PATCH 12/20] Appease the linter Mid-PR cleanup. --- src/components/structures/MatrixChat.js | 2 -- src/components/views/right_panel/GroupHeaderButtons.js | 5 ++++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 16a7061a63..5b602fd058 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -1690,8 +1690,6 @@ export default createReactClass({ handleResize: function(e) { const hideLhsThreshold = 1000; const showLhsThreshold = 1000; - const hideRhsThreshold = 820; - const showRhsThreshold = 820; if (this._windowWidth > hideLhsThreshold && window.innerWidth <= hideLhsThreshold) { dis.dispatch({ action: 'hide_left_panel' }); diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js index c112d0195a..c134a5d237 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.js @@ -52,7 +52,10 @@ export default class GroupHeaderButtons extends HeaderButtons { } else if (payload.action === "view_group") { this.setPhase(RIGHT_PANEL_PHASES.GroupMemberList); } else if (payload.action === "view_group_room") { - this.setPhase(RIGHT_PANEL_PHASES.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(RIGHT_PANEL_PHASES.GroupRoomList); } else if (payload.action === "view_group_member_list") { From 814c408e2328e5d81224d502a169a449438337d5 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 6 Dec 2019 14:18:18 -0700 Subject: [PATCH 13/20] Disable the right panel when the app asks us to Currently this is only used in the GroupView and for forwarding messages. --- src/components/structures/MatrixChat.js | 4 ++-- src/components/structures/RoomDirectory.js | 11 ----------- src/stores/RightPanelStore.js | 9 ++++++++- 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 5b602fd058..b4e6ee52f2 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -177,7 +177,7 @@ export default createReactClass({ collapseLhs: false, leftDisabled: false, middleDisabled: false, - rightDisabled: false, + // the right panel's disabled state is tracked in its store. version: null, newVersion: null, @@ -660,7 +660,7 @@ export default createReactClass({ this.setState({ leftDisabled: payload.leftDisabled || payload.sideDisabled || false, middleDisabled: payload.middleDisabled || false, - rightDisabled: payload.rightDisabled || payload.sideDisabled || false, + // We don't track the right panel being disabled here - it's tracked in the store. }); break; } diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index efca8d12a8..715bbc5f42 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -108,20 +108,9 @@ module.exports = createReactClass({ ), }); }); - - // dis.dispatch({ - // action: 'panel_disable', - // sideDisabled: true, - // middleDisabled: true, - // }); }, componentWillUnmount: function() { - // dis.dispatch({ - // action: 'panel_disable', - // sideDisabled: false, - // middleDisabled: false, - // }); if (this.filterTimeout) { clearTimeout(this.filterTimeout); } diff --git a/src/stores/RightPanelStore.js b/src/stores/RightPanelStore.js index 2ad18fe521..39a65e2810 100644 --- a/src/stores/RightPanelStore.js +++ b/src/stores/RightPanelStore.js @@ -39,6 +39,8 @@ const GROUP_PHASES = Object.keys(RIGHT_PANEL_PHASES).filter(k => k.startsWith("G export default class RightPanelStore extends Store { static _instance; + _inhibitUpdates = false; + constructor() { super(dis); @@ -107,7 +109,12 @@ export default class RightPanelStore extends Store { } __onDispatch(payload) { - if (payload.action !== 'set_right_panel_phase') return; + if (payload.action === 'panel_disable') { + this._inhibitUpdates = payload.rightDisabled || payload.sideDisabled || false; + return; + } + + if (payload.action !== 'set_right_panel_phase' || this._inhibitUpdates) return; const targetPhase = payload.phase; if (!RIGHT_PANEL_PHASES[targetPhase]) { From 185830e4f395b9eaf471e187c7d3565d9d377331 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 6 Dec 2019 14:22:27 -0700 Subject: [PATCH 14/20] Fix end-to-end tests The right panel needs to be opened manually now. --- test/end-to-end-tests/src/usecases/invite.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/end-to-end-tests/src/usecases/invite.js b/test/end-to-end-tests/src/usecases/invite.js index d7e02a38d8..838b632ddd 100644 --- a/test/end-to-end-tests/src/usecases/invite.js +++ b/test/end-to-end-tests/src/usecases/invite.js @@ -17,6 +17,8 @@ limitations under the License. module.exports = async function invite(session, userId) { session.log.step(`invites "${userId}" to room`); await session.delay(1000); + const memberPanelButton = await session.query(".mx_RightPanel_membersButton"); + await memberPanelButton.click(); const inviteButton = await session.query(".mx_MemberList_invite"); await inviteButton.click(); const inviteTextArea = await session.query(".mx_AddressPickerDialog textarea"); From 4bcf99f65e2ebb62104dde8d46fc7e6d28b8285f Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 6 Dec 2019 14:50:56 -0700 Subject: [PATCH 15/20] Fix member info not opening The subclasses listen for view_user and similar dispatches, which then start up the RightPanel. We weren't registering a listener though because we changed to using the RightPanelStore for most of our logic. --- src/components/views/right_panel/HeaderButtons.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js index c43e8fc47e..ebe1f5f915 100644 --- a/src/components/views/right_panel/HeaderButtons.js +++ b/src/components/views/right_panel/HeaderButtons.js @@ -42,10 +42,16 @@ export default class HeaderButtons extends React.Component { componentWillMount() { this._storeToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelUpdate.bind(this)); + this._dispatcherRef = dis.register(this.onAction.bind(this)); // used by subclasses } componentWillUnmount() { if (this._storeToken) this._storeToken.remove(); + if (this._dispatcherRef) dis.unregister(this._dispatcherRef); + } + + onAction(payload) { + // Ignore - intended to be overridden by subclasses } setPhase(phase, extras) { From 78ce801c25d44b35367bfba1ebad5b0b316fe94c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 6 Dec 2019 14:52:31 -0700 Subject: [PATCH 16/20] Fix incorrect function call into RightPanelStore We dispatch to open, not call directly into the store. --- src/components/structures/RightPanel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 9f78e09c6e..7497ecd8b9 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -67,7 +67,7 @@ export default class RightPanel extends React.Component { const rps = RightPanelStore.getSharedInstance(); if (this.props.groupId) { if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.groupPanelPhase)) { - rps.setPhase(RIGHT_PANEL_PHASES.GroupMemberList); + dis.dispatch({action: "set_right_panel_phase", phase: RIGHT_PANEL_PHASES.GroupMemberList}); return RIGHT_PANEL_PHASES.GroupMemberList; } return rps.groupPanelPhase; @@ -75,7 +75,7 @@ export default class RightPanel extends React.Component { return RIGHT_PANEL_PHASES.RoomMemberInfo; } else { if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.roomPanelPhase)) { - rps.setPhase(RIGHT_PANEL_PHASES.RoomMemberList); + dis.dispatch({action: "set_right_panel_phase", phase: RIGHT_PANEL_PHASES.RoomMemberList}); return RIGHT_PANEL_PHASES.RoomMemberList; } return rps.roomPanelPhase; From 94ae06db4d964b22b568105f644d2ba57fdeef65 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 6 Dec 2019 15:04:44 -0700 Subject: [PATCH 17/20] Fix cold open of the RightPanel directly to MemberInfo This requires us to track some of the phase's state in the RightPanelStore, which is not great - trying to get it through the app is a bit difficult. --- src/components/structures/RightPanel.js | 16 +++++++++++----- src/stores/RightPanelStore.js | 8 ++++++++ 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 7497ecd8b9..1745c9d7dc 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -36,7 +36,7 @@ export default class RightPanel extends React.Component { return { roomId: PropTypes.string, // if showing panels for a given room, this is set groupId: PropTypes.string, // if showing panels for a given group, this is set - user: PropTypes.object, + user: PropTypes.object, // used if we know the user ahead of opening the panel }; } @@ -51,6 +51,7 @@ export default class RightPanel extends React.Component { this.state = { phase: this._getPhaseFromProps(), isUserPrivilegedInGroup: null, + member: this._getUserForPanel(), }; this.onAction = this.onAction.bind(this); this.onRoomStateMember = this.onRoomStateMember.bind(this); @@ -63,6 +64,14 @@ export default class RightPanel extends React.Component { }, 500); } + // Helper function to split out the logic for _getPhaseFromProps() and the constructor + // as both are called at the same time in the constructor. + _getUserForPanel() { + if (this.state && this.state.member) return this.state.member; + const lastParams = RightPanelStore.getSharedInstance().roomPanelPhaseParams; + return this.props.user || lastParams['member']; + } + _getPhaseFromProps() { const rps = RightPanelStore.getSharedInstance(); if (this.props.groupId) { @@ -71,7 +80,7 @@ export default class RightPanel extends React.Component { return RIGHT_PANEL_PHASES.GroupMemberList; } return rps.groupPanelPhase; - } else if (this.props.user) { + } else if (this._getUserForPanel()) { return RIGHT_PANEL_PHASES.RoomMemberInfo; } else { if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.roomPanelPhase)) { @@ -87,9 +96,6 @@ export default class RightPanel extends React.Component { const cli = this.context.matrixClient; cli.on("RoomState.members", this.onRoomStateMember); this._initGroupStore(this.props.groupId); - if (this.props.user) { - this.setState({member: this.props.user}); - } } componentWillUnmount() { diff --git a/src/stores/RightPanelStore.js b/src/stores/RightPanelStore.js index 39a65e2810..4542902ae8 100644 --- a/src/stores/RightPanelStore.js +++ b/src/stores/RightPanelStore.js @@ -28,6 +28,9 @@ const INITIAL_STATE = { // The last phase (screen) the right panel was showing lastRoomPhase: SettingsStore.getValue("lastRightPanelPhaseForRoom"), lastGroupPhase: SettingsStore.getValue("lastRightPanelPhaseForGroup"), + + // Extra information about the last phase + lastRoomPhaseParams: {}, }; const GROUP_PHASES = Object.keys(RIGHT_PANEL_PHASES).filter(k => k.startsWith("Group")); @@ -72,6 +75,10 @@ export default class RightPanelStore extends Store { return this.isOpenForGroup ? this.groupPanelPhase : null; } + get roomPanelPhaseParams(): any { + return this._state.lastRoomPhaseParams || {}; + } + _setState(newState) { this._state = Object.assign(this._state, newState); @@ -142,6 +149,7 @@ export default class RightPanelStore extends Store { this._setState({ lastRoomPhase: targetPhase, showRoomPanel: true, + lastRoomPhaseParams: payload.refireParams || {}, }); } } From 405b3f6be62bee8992fa78d66cae583d49b72a51 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 6 Dec 2019 15:17:31 -0700 Subject: [PATCH 18/20] Fix member list not being open for end-to-end tests --- test/end-to-end-tests/src/usecases/invite.js | 11 ++++++++++- test/end-to-end-tests/src/usecases/memberlist.js | 11 +++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/test/end-to-end-tests/src/usecases/invite.js b/test/end-to-end-tests/src/usecases/invite.js index 838b632ddd..814ecd30a6 100644 --- a/test/end-to-end-tests/src/usecases/invite.js +++ b/test/end-to-end-tests/src/usecases/invite.js @@ -18,7 +18,16 @@ module.exports = async function invite(session, userId) { session.log.step(`invites "${userId}" to room`); await session.delay(1000); const memberPanelButton = await session.query(".mx_RightPanel_membersButton"); - await memberPanelButton.click(); + try { + await session.query(".mx_RightPanel_headerButton_highlight", 500); + // Right panel is open - toggle it to ensure it's the member list + // Sometimes our tests have this opened to MemberInfo + await memberPanelButton.click(); + await memberPanelButton.click(); + } catch (e) { + // Member list is closed - open it + await memberPanelButton.click(); + } const inviteButton = await session.query(".mx_MemberList_invite"); await inviteButton.click(); const inviteTextArea = await session.query(".mx_AddressPickerDialog textarea"); diff --git a/test/end-to-end-tests/src/usecases/memberlist.js b/test/end-to-end-tests/src/usecases/memberlist.js index f6b07b3500..42601b6610 100644 --- a/test/end-to-end-tests/src/usecases/memberlist.js +++ b/test/end-to-end-tests/src/usecases/memberlist.js @@ -62,6 +62,17 @@ module.exports.verifyDeviceForUser = async function(session, name, expectedDevic }; async function getMembersInMemberlist(session) { + const memberPanelButton = await session.query(".mx_RightPanel_membersButton"); + try { + await session.query(".mx_RightPanel_headerButton_highlight", 500); + // Right panel is open - toggle it to ensure it's the member list + // Sometimes our tests have this opened to MemberInfo + await memberPanelButton.click(); + await memberPanelButton.click(); + } catch (e) { + // Member list is closed - open it + await memberPanelButton.click(); + } const memberNameElements = await session.queryAll(".mx_MemberList .mx_EntityTile_name"); return Promise.all(memberNameElements.map(async (el) => { return {label: el, displayName: await session.innerText(el)}; From b93cadf4d1189b83aac804bd55714c886e9c469f Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 10 Dec 2019 09:58:44 -0700 Subject: [PATCH 19/20] Reset the right panel when changing rooms/groups This is to prevent the member info from staying open, which could explode if the user isn't in the room you're switching to. --- src/stores/RightPanelStore.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/stores/RightPanelStore.js b/src/stores/RightPanelStore.js index 4542902ae8..37e7498141 100644 --- a/src/stores/RightPanelStore.js +++ b/src/stores/RightPanelStore.js @@ -121,6 +121,19 @@ export default class RightPanelStore extends Store { return; } + if (payload.action === 'view_room' || payload.action === 'view_group') { + // Reset to the member list if we're viewing member info + const memberInfoPhases = [RIGHT_PANEL_PHASES.RoomMemberInfo, RIGHT_PANEL_PHASES.Room3pidMemberInfo]; + if (memberInfoPhases.includes(this._state.lastRoomPhase)) { + this._setState({lastRoomPhase: RIGHT_PANEL_PHASES.RoomMemberList, lastRoomPhaseParams: {}}); + } + + // Do the same for groups + if (this._state.lastGroupPhase === RIGHT_PANEL_PHASES.GroupMemberInfo) { + this._setState({lastGroupPhase: RIGHT_PANEL_PHASES.GroupMemberList}); + } + } + if (payload.action !== 'set_right_panel_phase' || this._inhibitUpdates) return; const targetPhase = payload.phase; From c8c344804ed035d5212d82a4236d87847717cc63 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 10 Dec 2019 10:01:45 -0700 Subject: [PATCH 20/20] Remove special case RHS resizer logic It doesn't seem to affect anything by being removed. --- src/components/structures/MainSplit.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/components/structures/MainSplit.js b/src/components/structures/MainSplit.js index 8cf6765de4..bd7bfd8780 100644 --- a/src/components/structures/MainSplit.js +++ b/src/components/structures/MainSplit.js @@ -74,25 +74,6 @@ export default class MainSplit extends React.Component { } } - componentDidUpdate(prevProps) { - const wasExpanded = !this.props.collapsedRhs && prevProps.collapsedRhs; - const wasCollapsed = this.props.collapsedRhs && !prevProps.collapsedRhs; - const wasPanelSet = this.props.panel && !prevProps.panel; - const wasPanelCleared = !this.props.panel && prevProps.panel; - - // TODO: TravisR - fix this logic - - if (this.resizeContainer && (wasExpanded || wasPanelSet)) { - // The resizer can only be created when **both** expanded and the panel is - // set. Once both are true, the container ref will mount, which is required - // for the resizer to work. - this._createResizer(); - } else if (this.resizer && (wasCollapsed || wasPanelCleared)) { - this.resizer.detach(); - this.resizer = null; - } - } - render() { const bodyView = React.Children.only(this.props.children); const panelView = this.props.panel;