Use directory search box component
This commit is contained in:
parent
16c22e07b8
commit
2e77b0a3c7
|
@ -68,6 +68,7 @@ module.exports = React.createClass({
|
|||
this.filterString = null;
|
||||
this.filterTimeout = null;
|
||||
this.scrollPanel = null;
|
||||
this.searchBox = null;
|
||||
|
||||
// dis.dispatch({
|
||||
// action: 'ui_opacity',
|
||||
|
@ -212,9 +213,7 @@ module.exports = React.createClass({
|
|||
return this.getMoreRooms();
|
||||
},
|
||||
|
||||
onFilterChange: function(ev) {
|
||||
const alias = ev.target.value;
|
||||
|
||||
onFilterChange: function(alias) {
|
||||
this.filterString = alias || null;
|
||||
|
||||
// don't send the request for a little bit,
|
||||
|
@ -230,10 +229,22 @@ module.exports = React.createClass({
|
|||
}, 300);
|
||||
},
|
||||
|
||||
onFilterKeyUp: function(ev) {
|
||||
if (ev.key == "Enter") {
|
||||
this.showRoomAlias(ev.target.value);
|
||||
onFilterChange: function() {
|
||||
this.filterString = null;
|
||||
|
||||
if (this.filterTimeout) {
|
||||
clearTimeout(this.filterTimeout);
|
||||
}
|
||||
// update immediately
|
||||
this.refreshRoomList();
|
||||
},
|
||||
|
||||
onJoinClick: function(alias) {
|
||||
this.showRoomAlias(alias);
|
||||
},
|
||||
|
||||
collectSearchBox: function(e) {
|
||||
this.searchBox = e;
|
||||
},
|
||||
|
||||
showRoomAlias: function(alias) {
|
||||
|
@ -393,13 +404,15 @@ module.exports = React.createClass({
|
|||
|
||||
const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
|
||||
const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
|
||||
const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
|
||||
return (
|
||||
<div className="mx_RoomDirectory">
|
||||
<SimpleRoomHeader title="Directory" />
|
||||
<div className="mx_RoomDirectory_list">
|
||||
<div className="mx_RoomDirectory_listheader">
|
||||
<input type="text" placeholder="Find a room by keyword or room ID (#foo:matrix.org)"
|
||||
className="mx_RoomDirectory_input" size="64" onChange={this.onFilterChange} onKeyUp={this.onFilterKeyUp}
|
||||
<DirectorySearchBox
|
||||
className="mx_RoomDirectory_searchbox" ref={this.collectSearchBox}
|
||||
onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
|
||||
/>
|
||||
<NetworkDropdown config={this.props.config} onNetworkChange={this.onNetworkChange} />
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,45 @@
|
|||
/*
|
||||
Copyright 2016 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_DirectorySearchBox {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #c7c7c7;
|
||||
padding-left: 9px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.mx_DirectorySearchBox_input {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
}
|
||||
input[type=text].mx_DirectorySearchBox_input:focus {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mx_DirectorySearchBox_clear {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
display: inline-block;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: url('img/icon_context_delete.svg');
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
|
@ -59,13 +59,8 @@ limitations under the License.
|
|||
border-spacing: 5px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_input {
|
||||
.mx_RoomDirectory_searchbox {
|
||||
display: table-cell;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #c7c7c7;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_listheader .mx_NetworkDropdown {
|
||||
|
|
|
@ -24,8 +24,6 @@ limitations under the License.
|
|||
border: 1px solid #c7c7c7;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue