mirror of https://github.com/vector-im/riot-web
hide explore button when focusing filter field
parent
80dd5a1b0a
commit
da98080859
|
@ -138,8 +138,13 @@ limitations under the License.
|
|||
.mx_LeftPanel_explore {
|
||||
flex: 0 0 40%;
|
||||
overflow: hidden;
|
||||
transition: flex-basis 0.2s;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.mx_LeftPanel_explore_hidden {
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
font-size: 14px;
|
||||
margin: 9px;
|
||||
|
|
|
@ -81,6 +81,9 @@ const LeftPanel = createReactClass({
|
|||
if (this.state.searchFilter !== nextState.searchFilter) {
|
||||
return true;
|
||||
}
|
||||
if (this.state.searchFocused !== nextState.searchFocused) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
@ -209,6 +212,14 @@ const LeftPanel = createReactClass({
|
|||
this._roomList = ref;
|
||||
},
|
||||
|
||||
_onSearchFocus: function() {
|
||||
this.setState({searchFocused: true});
|
||||
},
|
||||
|
||||
_onSearchBlur: function() {
|
||||
this.setState({searchFocused: false});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const RoomList = sdk.getComponent('rooms.RoomList');
|
||||
const RoomBreadcrumbs = sdk.getComponent('rooms.RoomBreadcrumbs');
|
||||
|
@ -255,6 +266,8 @@ const LeftPanel = createReactClass({
|
|||
placeholder={ _t('Filter room names') }
|
||||
onSearch={ this.onSearch }
|
||||
onCleared={ this.onSearchCleared }
|
||||
onFocus={this._onSearchFocus}
|
||||
onBlur={this._onSearchBlur}
|
||||
collapsed={this.props.collapsed} />);
|
||||
|
||||
let breadcrumbs;
|
||||
|
|
|
@ -95,6 +95,15 @@ module.exports = createReactClass({
|
|||
|
||||
_onFocus: function(ev) {
|
||||
ev.target.select();
|
||||
if (this.props.onFocus) {
|
||||
this.props.onFocus(ev);
|
||||
}
|
||||
},
|
||||
|
||||
_onBlur: function(ev) {
|
||||
if (this.props.onBlur) {
|
||||
this.props.onBlur(ev);
|
||||
}
|
||||
},
|
||||
|
||||
_clearSearch: function(source) {
|
||||
|
@ -132,6 +141,7 @@ module.exports = createReactClass({
|
|||
onChange={ this.onChange }
|
||||
onKeyDown={ this._onKeyDown }
|
||||
placeholder={ this.props.placeholder }
|
||||
onBlur={this._onBlur}
|
||||
/>
|
||||
{ clearButton }
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue