From da9fe9917bfeff2f670296648c6a5b76fb71224b Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 29 May 2018 13:16:39 +0100 Subject: [PATCH 1/2] 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; } From 404c071f2aa94796098608d74df8dd7a787ff581 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 29 May 2018 13:19:56 +0100 Subject: [PATCH 2/2] Remove lie from docs --- src/components/structures/MatrixChat.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index c1c757a65a..0b2396ddff 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -794,7 +794,6 @@ export default React.createClass({ // @param {string=} roomInfo.room_id ID of the room to join. One of room_id or room_alias must be given. // @param {string=} roomInfo.room_alias Alias of the room to join. One of room_id or room_alias must be given. // @param {boolean=} roomInfo.auto_join If true, automatically attempt to join the room if not already a member. - // @param {boolean=} roomInfo.show_settings Makes RoomView show the room settings dialog. // @param {string=} roomInfo.event_id ID of the event in this room to show: this will cause a switch to the // context of that particular event. // @param {boolean=} roomInfo.highlighted If true, add event_id to the hash of the URL