hide search field when left panel is collapsed

also remove collapse/expand button in search field
This commit is contained in:
Bruno Windels 2018-11-02 15:29:18 +01:00
parent e29227db4e
commit 1fbfddfa8a
2 changed files with 32 additions and 60 deletions

View file

@ -194,12 +194,16 @@ const LeftPanel = React.createClass({
},
);
const searchBox = !this.props.collapsed ?
<SearchBox onSearch={ this.onSearch } /> :
undefined;
return (
<div className={containerClasses}>
{ tagPanel }
<aside className={"mx_LeftPanel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
<TopLeftMenuButton collapsed={ this.props.collapsed }/>
<SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />
{ searchBox }
<CallPreview ConferenceHandler={VectorConferenceHandler} />
<RoomList
ref={this.collectRoomList}

View file

@ -28,7 +28,6 @@ module.exports = React.createClass({
displayName: 'SearchBox',
propTypes: {
collapsed: React.PropTypes.bool,
onSearch: React.PropTypes.func,
},
@ -75,18 +74,6 @@ module.exports = React.createClass({
100,
),
onToggleCollapse: function(show) {
if (show) {
dis.dispatch({
action: 'show_left_panel',
});
} else {
dis.dispatch({
action: 'hide_left_panel',
});
}
},
_onKeyDown: function(ev) {
switch (ev.keyCode) {
case KeyCode.ESCAPE:
@ -104,24 +91,7 @@ module.exports = React.createClass({
render: function() {
const TintableSvg = sdk.getComponent('elements.TintableSvg');
const collapseTabIndex = this.refs.search && this.refs.search.value !== "" ? "-1" : "0";
let toggleCollapse;
if (this.props.collapsed) {
toggleCollapse =
<AccessibleButton className="mx_SearchBox_maximise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, true) }>
<TintableSvg src="img/maximise.svg" width="10" height="16" alt={ _t("Expand panel") } />
</AccessibleButton>;
} else {
toggleCollapse =
<AccessibleButton className="mx_SearchBox_minimise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, false) }>
<TintableSvg src="img/minimise.svg" width="10" height="16" alt={ _t("Collapse panel") } />
</AccessibleButton>;
}
let searchControls;
if (!this.props.collapsed) {
searchControls = [
const searchControls = [
this.state.searchTerm.length > 0 ?
<AccessibleButton key="button"
className="mx_SearchBox_closeButton"
@ -148,13 +118,11 @@ module.exports = React.createClass({
placeholder={ _t('Filter room names') }
/>,
];
}
const self = this;
return (
<div className="mx_SearchBox">
{ searchControls }
{ toggleCollapse }
</div>
);
},