take buttons into account that are active over multiple phases when toggling

This commit is contained in:
Bruno Windels 2019-04-11 13:31:21 +02:00
parent 02792132e1
commit 483b7fc14d
3 changed files with 23 additions and 23 deletions

View file

@ -23,6 +23,15 @@ import HeaderButton from './HeaderButton';
import HeaderButtons from './HeaderButtons'; import HeaderButtons from './HeaderButtons';
import RightPanel from '../../structures/RightPanel'; 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 { export default class GroupHeaderButtons extends HeaderButtons {
constructor(props) { constructor(props) {
super(props, RightPanel.Phase.GroupMemberList); super(props, RightPanel.Phase.GroupMemberList);
@ -53,33 +62,24 @@ export default class GroupHeaderButtons extends HeaderButtons {
} }
_onMembersClicked() { _onMembersClicked() {
this.togglePhase(RightPanel.Phase.GroupMemberList); this.togglePhase(RightPanel.Phase.GroupMemberList, GROUP_PHASES);
} }
_onRoomsClicked() { _onRoomsClicked() {
this.togglePhase(RightPanel.Phase.GroupRoomList); this.togglePhase(RightPanel.Phase.GroupRoomList, ROOM_PHASES);
} }
renderButtons() { renderButtons() {
const groupPhases = [
RightPanel.Phase.GroupMemberInfo,
RightPanel.Phase.GroupMemberList,
];
const roomPhases = [
RightPanel.Phase.GroupRoomList,
RightPanel.Phase.GroupRoomInfo,
];
return [ return [
<HeaderButton key="groupMembersButton" name="groupMembersButton" <HeaderButton key="groupMembersButton" name="groupMembersButton"
title={_t('Members')} title={_t('Members')}
isHighlighted={this.isPhase(groupPhases)} isHighlighted={this.isPhase(GROUP_PHASES)}
onClick={this._onMembersClicked} onClick={this._onMembersClicked}
analytics={['Right Panel', 'Group Member List Button', 'click']} analytics={['Right Panel', 'Group Member List Button', 'click']}
/>, />,
<HeaderButton key="roomsButton" name="roomsButton" <HeaderButton key="roomsButton" name="roomsButton"
title={_t('Rooms')} title={_t('Rooms')}
isHighlighted={this.isPhase(roomPhases)} isHighlighted={this.isPhase(ROOM_PHASES)}
onClick={this._onRoomsClicked} onClick={this._onRoomsClicked}
analytics={['Right Panel', 'Group Room List Button', 'click']} analytics={['Right Panel', 'Group Room List Button', 'click']}
/>, />,

View file

@ -60,8 +60,8 @@ export default class HeaderButtons extends React.Component {
}, extras)); }, extras));
} }
togglePhase(phase) { togglePhase(phase, validPhases = [phase]) {
if (this.state.phase === phase) { if (validPhases.includes(this.state.phase)) {
dis.dispatch({ dis.dispatch({
action: 'hide_right_panel', action: 'hide_right_panel',
}); });

View file

@ -23,6 +23,12 @@ import HeaderButton from './HeaderButton';
import HeaderButtons from './HeaderButtons'; import HeaderButtons from './HeaderButtons';
import RightPanel from '../../structures/RightPanel'; import RightPanel from '../../structures/RightPanel';
const MEMBER_PHASES = [
RightPanel.Phase.RoomMemberList,
RightPanel.Phase.RoomMemberInfo,
RightPanel.Phase.Room3pidMemberInfo,
];
export default class RoomHeaderButtons extends HeaderButtons { export default class RoomHeaderButtons extends HeaderButtons {
constructor(props) { constructor(props) {
super(props, RightPanel.Phase.RoomMemberList); super(props, RightPanel.Phase.RoomMemberList);
@ -51,7 +57,7 @@ export default class RoomHeaderButtons extends HeaderButtons {
} }
_onMembersClicked() { _onMembersClicked() {
this.togglePhase(RightPanel.Phase.RoomMemberList); this.togglePhase(RightPanel.Phase.RoomMemberList, MEMBER_PHASES);
} }
_onFilesClicked() { _onFilesClicked() {
@ -63,16 +69,10 @@ export default class RoomHeaderButtons extends HeaderButtons {
} }
renderButtons() { renderButtons() {
const membersPhases = [
RightPanel.Phase.RoomMemberList,
RightPanel.Phase.RoomMemberInfo,
RightPanel.Phase.Room3pidMemberInfo,
];
return [ return [
<HeaderButton key="membersButton" name="membersButton" <HeaderButton key="membersButton" name="membersButton"
title={_t('Members')} title={_t('Members')}
isHighlighted={this.isPhase(membersPhases)} isHighlighted={this.isPhase(MEMBER_PHASES)}
onClick={this._onMembersClicked} onClick={this._onMembersClicked}
analytics={['Right Panel', 'Member List Button', 'click']} analytics={['Right Panel', 'Member List Button', 'click']}
/>, />,