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 e1c9e33055..bd8f66163f 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -566,6 +566,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; @@ -583,19 +604,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); @@ -638,7 +650,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; @@ -787,7 +800,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 @@ -854,6 +866,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, { @@ -1612,19 +1639,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) { @@ -1683,7 +1699,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; }