From da9fe9917bfeff2f670296648c6a5b76fb71224b Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 29 May 2018 13:16:39 +0100 Subject: [PATCH] Fix click on faded left/right/middle panel -> close settings - implement generic dispatch to close user/room/group settings - use dispatch to allow clicks on disabled left/right/middle panel to close settings A much more maintainable approach would be to use dedicate routing instead of doing different things depending on what page of the app is currently being viewed. At the very least we could make the concept of a settings page generic. --- src/components/structures/GroupView.js | 23 ++++++-- src/components/structures/LoggedInView.js | 20 ++++++- src/components/structures/MatrixChat.js | 69 ++++++++++++++--------- src/components/structures/RoomView.js | 20 ++----- src/stores/RoomViewStore.js | 16 ++++++ 5 files changed, 100 insertions(+), 48 deletions(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index ce79ccadfa..c7610219f7 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -432,11 +432,14 @@ export default React.createClass({ this._changeAvatarComponent = null; this._initGroupStore(this.props.groupId, true); + + this._dispatcherRef = dis.register(this._onAction); }, componentWillUnmount: function() { this._unmounted = true; this._matrixClient.removeListener("Group.myMembership", this._onGroupMyMembership); + dis.unregister(this._dispatcherRef); }, componentWillReceiveProps: function(newProps) { @@ -563,12 +566,22 @@ export default React.createClass({ this._closeSettings(); }, + _onAction(payload) { + switch (payload.action) { + // NOTE: close_settings is an app-wide dispatch; as it is dispatched from MatrixChat + case 'close_settings': + this.setState({ + editing: false, + profileForm: null, + }); + break; + default: + break; + } + }, + _closeSettings() { - this.setState({ - editing: false, - profileForm: null, - }); - dis.dispatch({action: 'panel_disable'}); + dis.dispatch({action: 'close_settings'}); }, _onNameChange: function(value) { diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 2dd5a75c47..5dca359f32 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -255,6 +255,22 @@ const LoggedInView = React.createClass({ ), true); }, + _onClick: function(ev) { + // When the panels are disabled, clicking on them results in a mouse event + // which bubbles to certain elements in the tree. When this happens, close + // any settings page that is currently open (user/room/group). + if (this.props.leftDisabled && + this.props.rightDisabled && + ( + ev.target.className === 'mx_MatrixChat' || + ev.target.className === 'mx_MatrixChat_middlePanel' || + ev.target.className === 'mx_RoomView' + ) + ) { + dis.dispatch({ action: 'close_settings' }); + } + }, + render: function() { const LeftPanel = sdk.getComponent('structures.LeftPanel'); const RightPanel = sdk.getComponent('structures.RightPanel'); @@ -295,7 +311,7 @@ const LoggedInView = React.createClass({ case PageTypes.UserSettings: page_element = +
{ topBar }
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 46c1113a1d..c1c757a65a 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -560,6 +560,27 @@ export default React.createClass({ this._setPage(PageTypes.UserSettings); this.notifyNewScreen('settings'); break; + case 'close_settings': + this.setState({ + leftDisabled: false, + rightDisabled: false, + middleDisabled: false, + }); + if (this.state.page_type === PageTypes.UserSettings) { + // We do this to get setPage and notifyNewScreen + if (this.state.currentRoomId) { + this._viewRoom({ + room_id: this.state.currentRoomId, + }); + } else if (this.state.currentGroupId) { + this._viewGroup({ + group_id: this.state.currentGroupId, + }); + } else { + this._viewHome(); + } + } + break; case 'view_create_room': this._createRoom(); break; @@ -577,19 +598,10 @@ export default React.createClass({ this.notifyNewScreen('groups'); break; case 'view_group': - { - const groupId = payload.group_id; - this.setState({ - currentGroupId: groupId, - currentGroupIsNew: payload.group_is_new, - }); - this._setPage(PageTypes.GroupView); - this.notifyNewScreen('group/' + groupId); - } + this._viewGroup(payload); break; case 'view_home_page': - this._setPage(PageTypes.HomePage); - this.notifyNewScreen('home'); + this._viewHome(); break; case 'view_set_mxid': this._setMxId(payload); @@ -632,7 +644,8 @@ export default React.createClass({ middleDisabled: payload.middleDisabled || false, rightDisabled: payload.rightDisabled || payload.sideDisabled || false, }); - break; } + break; + } case 'set_theme': this._onSetTheme(payload.value); break; @@ -848,6 +861,21 @@ export default React.createClass({ }); }, + _viewGroup: function(payload) { + const groupId = payload.group_id; + this.setState({ + currentGroupId: groupId, + currentGroupIsNew: payload.group_is_new, + }); + this._setPage(PageTypes.GroupView); + this.notifyNewScreen('group/' + groupId); + }, + + _viewHome: function() { + this._setPage(PageTypes.HomePage); + this.notifyNewScreen('home'); + }, + _setMxId: function(payload) { const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog'); const close = Modal.createTrackedDialog('Set MXID', '', SetMxIdDialog, { @@ -1606,19 +1634,8 @@ export default React.createClass({ this._setPageSubtitle(subtitle); }, - onUserSettingsClose: function() { - // XXX: use browser history instead to find the previous room? - // or maintain a this.state.pageHistory in _setPage()? - if (this.state.currentRoomId) { - dis.dispatch({ - action: 'view_room', - room_id: this.state.currentRoomId, - }); - } else { - dis.dispatch({ - action: 'view_home_page', - }); - } + onCloseAllSettings() { + dis.dispatch({ action: 'close_settings' }); }, onServerConfigChange(config) { @@ -1677,7 +1694,7 @@ export default React.createClass({ return ( { this.setState({ uploadingRoomSettings: false, - editingRoomSettings: false, }); + dis.dispatch({ action: 'close_settings' }); }).done(); }, onCancelClick: function() { console.log("updateTint from onCancelClick"); this.updateTint(); - this.setState({ - editingRoomSettings: false, - }); + dis.dispatch({ action: 'close_settings' }); if (this.state.forwardingEvent) { dis.dispatch({ action: 'forward_event', @@ -1406,13 +1403,6 @@ module.exports = React.createClass({ });*/ }, - showSettings: function(show) { - // XXX: this is a bit naughty; we should be doing this via props - if (show) { - this.setState({editingRoomSettings: true}); - } - }, - /** * called by the parent component when PageUp/Down/etc is pressed. * diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js index 1e7e50eae0..923c073065 100644 --- a/src/stores/RoomViewStore.js +++ b/src/stores/RoomViewStore.js @@ -44,6 +44,8 @@ const INITIAL_STATE = { forwardingEvent: null, quotingEvent: null, + + isEditingSettings: false, }; /** @@ -116,6 +118,16 @@ class RoomViewStore extends Store { replyingToEvent: payload.event, }); break; + case 'open_room_settings': + this._setState({ + isEditingSettings: true, + }); + break; + case 'close_settings': + this._setState({ + isEditingSettings: false, + }); + break; } } @@ -301,6 +313,10 @@ class RoomViewStore extends Store { return this._state.replyingToEvent; } + isEditingSettings() { + return this._state.isEditingSettings; + } + shouldPeek() { return this._state.shouldPeek; }