PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

hide search field when left panel is collapsed

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/structures/LeftPanel.js
View file

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

86
src/components/structures/SearchBox.js
View file

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