mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-24 11:45:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2906 from matrix-org/bwindels/toggleheaderbutton

Browse source 
Fix having to click the member list button twice to show it after having changed room.
This commit is contained in:
Bruno Windels 2019-04-11 12:43:39 +00:00 committed by GitHub
commit 86a6037a12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 76 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/structures/MatrixChat.js
View file

@ -565,20 +565,6 @@ export default React.createClass({
},
});
break;
case 'view_user':
// FIXME: ugly hack to expand the RightPanel and then re-dispatch.
if (this.state.collapsedRhs) {
setTimeout(()=>{
dis.dispatch({
action: 'show_right_panel',
});
dis.dispatch({
action: 'view_user',
member: payload.member,
});
}, 0);
}
break;
case 'view_room':
// Takes either a room ID or room alias: if switching to a room the client is already
// known to be in (eg. user clicks on a room in the recents panel), supply the ID

40
src/components/views/right_panel/GroupHeaderButtons.js
View file

@ -19,23 +19,30 @@ limitations under the License.
import React from 'react';
import { _t } from '../../../languageHandler';
import dis from '../../../dispatcher';
import HeaderButton from './HeaderButton';
import HeaderButtons from './HeaderButtons';
import RightPanel from '../../structures/RightPanel';
const GROUP_PHASES = [
RightPanel.Phase.GroupMemberInfo,
RightPanel.Phase.GroupMemberList,
];
const ROOM_PHASES = [
RightPanel.Phase.GroupRoomList,
RightPanel.Phase.GroupRoomInfo,
];
export default class GroupHeaderButtons extends HeaderButtons {
constructor(props) {
super(props, RightPanel.Phase.GroupMemberList);
this._onMembersClicked = this._onMembersClicked.bind(this);
this._onRoomsClicked = this._onRoomsClicked.bind(this);
}
onAction(payload) {
super.onAction(payload);
if (payload.action === "view_user") {
dis.dispatch({
action: 'show_right_panel',
});
if (payload.member) {
this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member});
} else {
@ -54,27 +61,26 @@ export default class GroupHeaderButtons extends HeaderButtons {
}
}
renderButtons() {
const groupPhases = [
RightPanel.Phase.GroupMemberInfo,
RightPanel.Phase.GroupMemberList,
];
const roomPhases = [
RightPanel.Phase.GroupRoomList,
RightPanel.Phase.GroupRoomInfo,
];
_onMembersClicked() {
this.togglePhase(RightPanel.Phase.GroupMemberList, GROUP_PHASES);
}
_onRoomsClicked() {
this.togglePhase(RightPanel.Phase.GroupRoomList, ROOM_PHASES);
}
renderButtons() {
return [
<HeaderButton key="groupMembersButton" name="groupMembersButton"
title={_t('Members')}
isHighlighted={this.isPhase(groupPhases)}
clickPhase={RightPanel.Phase.GroupMemberList}
isHighlighted={this.isPhase(GROUP_PHASES)}
onClick={this._onMembersClicked}
analytics={['Right Panel', 'Group Member List Button', 'click']}
/>,
<HeaderButton key="roomsButton" name="roomsButton"
title={_t('Rooms')}
isHighlighted={this.isPhase(roomPhases)}
clickPhase={RightPanel.Phase.GroupRoomList}
isHighlighted={this.isPhase(ROOM_PHASES)}
onClick={this._onRoomsClicked}
analytics={['Right Panel', 'Group Room List Button', 'click']}
/>,
];

7
src/components/views/right_panel/HeaderButton.js
View file

@ -20,7 +20,6 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import dis from '../../../dispatcher';
import Analytics from '../../../Analytics';
import AccessibleButton from '../elements/AccessibleButton';
@ -32,11 +31,7 @@ export default class HeaderButton extends React.Component {
onClick(ev) {
Analytics.trackEvent(...this.props.analytics);
dis.dispatch({
action: 'view_right_panel_phase',
phase: this.props.clickPhase,
fromHeader: true,
});
this.props.onClick();
}
render() {

43
src/components/views/right_panel/HeaderButtons.js
View file

@ -40,14 +40,36 @@ export default class HeaderButtons extends React.Component {
dis.unregister(this.dispatcherRef);
}
componentDidUpdate(prevProps) {
if (!prevProps.collapsedRhs && this.props.collapsedRhs) {
this.setState({
phase: null,
});
}
}
setPhase(phase, extras) {
// TODO: delay?
if (this.props.collapsedRhs) {
dis.dispatch({
action: 'show_right_panel',
});
}
dis.dispatch(Object.assign({
action: 'view_right_panel_phase',
phase: phase,
}, 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;
@ -61,30 +83,11 @@ export default class HeaderButtons extends React.Component {
onAction(payload) {
if (payload.action === "view_right_panel_phase") {
// only actions coming from header buttons should collapse the right panel
if (this.state.phase === payload.phase && payload.fromHeader) {
dis.dispatch({
action: 'hide_right_panel',
});
this.setState({
phase: null,
});
} else {
if (this.props.collapsedRhs && payload.fromHeader) {
dis.dispatch({
action: 'show_right_panel',
});
// emit payload again as the RightPanel didn't exist up
// till show_right_panel, just without the fromHeader flag
// as that would hide the right panel again
dis.dispatch(Object.assign({}, payload, {fromHeader: false}));
}
this.setState({
phase: payload.phase,
});
}
}
}
render() {
// inline style as this will be swapped around in future commits

41
src/components/views/right_panel/RoomHeaderButtons.js
View file

@ -19,28 +19,33 @@ limitations under the License.
import React from 'react';
import { _t } from '../../../languageHandler';
import dis from '../../../dispatcher';
import HeaderButton from './HeaderButton';
import HeaderButtons from './HeaderButtons';
import RightPanel from '../../structures/RightPanel';
const MEMBER_PHASES = [
RightPanel.Phase.RoomMemberList,
RightPanel.Phase.RoomMemberInfo,
RightPanel.Phase.Room3pidMemberInfo,
];
export default class RoomHeaderButtons extends HeaderButtons {
constructor(props) {
super(props, RightPanel.Phase.RoomMemberList);
this._onMembersClicked = this._onMembersClicked.bind(this);
this._onFilesClicked = this._onFilesClicked.bind(this);
this._onNotificationsClicked = this._onNotificationsClicked.bind(this);
}
onAction(payload) {
super.onAction(payload);
if (payload.action === "view_user") {
dis.dispatch({
action: 'show_right_panel',
});
if (payload.member) {
this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member});
} else {
this.setPhase(RightPanel.Phase.RoomMemberList);
}
} else if (payload.action === "view_room") {
} else if (payload.action === "view_room" && !this.props.collapsedRhs) {
this.setPhase(RightPanel.Phase.RoomMemberList);
} else if (payload.action === "view_3pid_invite") {
if (payload.event) {
@ -51,30 +56,36 @@ export default class RoomHeaderButtons extends HeaderButtons {
}
}
renderButtons() {
const membersPhases = [
RightPanel.Phase.RoomMemberList,
RightPanel.Phase.RoomMemberInfo,
RightPanel.Phase.Room3pidMemberInfo,
];
_onMembersClicked() {
this.togglePhase(RightPanel.Phase.RoomMemberList, MEMBER_PHASES);
}
_onFilesClicked() {
this.togglePhase(RightPanel.Phase.FilePanel);
}
_onNotificationsClicked() {
this.togglePhase(RightPanel.Phase.NotificationPanel);
}
renderButtons() {
return [
<HeaderButton key="membersButton" name="membersButton"
title={_t('Members')}
isHighlighted={this.isPhase(membersPhases)}
clickPhase={RightPanel.Phase.RoomMemberList}
isHighlighted={this.isPhase(MEMBER_PHASES)}
onClick={this._onMembersClicked}
analytics={['Right Panel', 'Member List Button', 'click']}
/>,
<HeaderButton key="filesButton" name="filesButton"
title={_t('Files')}
isHighlighted={this.isPhase(RightPanel.Phase.FilePanel)}
clickPhase={RightPanel.Phase.FilePanel}
onClick={this._onFilesClicked}
analytics={['Right Panel', 'File List Button', 'click']}
/>,
<HeaderButton key="notifsButton" name="notifsButton"
title={_t('Notifications')}
isHighlighted={this.isPhase(RightPanel.Phase.NotificationPanel)}
clickPhase={RightPanel.Phase.NotificationPanel}
onClick={this._onNotificationsClicked}
analytics={['Right Panel', 'Notification List Button', 'click']}
/>,
];