Merge pull request #2361 from matrix-org/bwindels/collapserhs

Redesign: allow to hide the right panel when clicking already active button & persist
This commit is contained in:
Bruno Windels 2018-12-18 09:46:30 +00:00 committed by GitHub
commit 0676c1b8ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 38 additions and 24 deletions

View file

@ -36,6 +36,7 @@ export default class HeaderButton extends React.Component {
dis.dispatch({
action: 'view_right_panel_phase',
phase: this.props.clickPhase,
fromHeader: true,
});
}

View file

@ -18,6 +18,7 @@ limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import dis from '../../../dispatcher';
export default class HeaderButtons extends React.Component {
@ -25,7 +26,7 @@ export default class HeaderButtons extends React.Component {
super(props);
this.state = {
phase: initialPhase,
phase: props.collapsedRhs ? null : initialPhase,
isUserPrivilegedInGroup: null,
};
this.onAction = this.onAction.bind(this);
@ -49,9 +50,24 @@ export default class HeaderButtons extends React.Component {
onAction(payload) {
if (payload.action === "view_right_panel_phase") {
this.setState({
phase: payload.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) {
dis.dispatch({
action: 'show_right_panel',
});
}
this.setState({
phase: payload.phase,
});
}
}
}
@ -62,3 +78,7 @@ export default class HeaderButtons extends React.Component {
</div>;
}
}
HeaderButtons.propTypes = {
collapsedRhs: PropTypes.bool,
};

View file

@ -394,14 +394,6 @@ module.exports = React.createClass({
</AccessibleButton>;
}
let rightPanelButtons;
if (this.props.collapsedRhs) {
rightPanelButtons =
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_showPanel" onClick={this.onShowRhsClick} title={_t('Show panel')}>
<TintableSvg src="img/maximise.svg" width="10" height="16" />
</AccessibleButton>;
}
let rightRow;
let manageIntegsButton;
if (this.props.room && this.props.room.roomId && this.props.inRoom) {
@ -419,7 +411,6 @@ module.exports = React.createClass({
{ manageIntegsButton }
{ forgetButton }
{ searchButton }
{ rightPanelButtons }
</div>;
}
@ -433,7 +424,7 @@ module.exports = React.createClass({
{ saveButton }
{ cancelButton }
{ rightRow }
<RoomHeaderButtons />
<RoomHeaderButtons collapsedRhs={this.props.collapsedRhs} />
</div>
</div>
);