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.
pull/21833/head
Luke Barnard 2018-05-29 13:16:39 +01:00
parent b2c26e6984
commit da9fe9917b
5 changed files with 100 additions and 48 deletions

View File

@ -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) {

View File

@ -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 = <UserSettings
onClose={this.props.onUserSettingsClose}
onClose={this.props.onCloseAllSettings}
brand={this.props.config.brand}
referralBaseUrl={this.props.config.referralBaseUrl}
teamToken={this.props.teamToken}
@ -380,7 +396,7 @@ const LoggedInView = React.createClass({
}
return (
<div className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers}>
<div className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers} onClick={this._onClick}>
{ topBar }
<DragDropContext onDragEnd={this._onDragEnd}>
<div className={bodyClasses}>

View File

@ -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 (
<LoggedInView ref={this._collectLoggedInView} matrixClient={MatrixClientPeg.get()}
onRoomCreated={this.onRoomCreated}
onUserSettingsClose={this.onUserSettingsClose}
onCloseAllSettings={this.onCloseAllSettings}
onRegistered={this.onRegistered}
currentRoomId={this.state.currentRoomId}
teamToken={this._teamToken}

View File

@ -182,6 +182,7 @@ module.exports = React.createClass({
isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
forwardingEvent: RoomViewStore.getForwardingEvent(),
shouldPeek: RoomViewStore.shouldPeek(),
editingRoomSettings: RoomViewStore.isEditingSettings(),
};
// Temporary logging to diagnose https://github.com/vector-im/riot-web/issues/4307
@ -1139,7 +1140,7 @@ module.exports = React.createClass({
},
onSettingsClick: function() {
this.showSettings(true);
dis.dispatch({ action: 'open_room_settings' });
},
onSettingsSaveClick: function() {
@ -1172,24 +1173,20 @@ module.exports = React.createClass({
});
// still editing room settings
} else {
this.setState({
editingRoomSettings: false,
});
dis.dispatch({ action: 'close_settings' });
}
}).finally(() => {
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.
*

View File

@ -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;
}