diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 95e2f71c5b..90afff5c27 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -98,6 +98,8 @@ module.exports = React.createClass({ }, getMoreRooms: function() { + if (!MatrixClientPeg.get()) return q(); + const my_filter_string = this.filterString; const opts = {limit: 20}; if (this.nextBatch) opts.since = this.nextBatch; @@ -212,9 +214,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 +230,18 @@ module.exports = React.createClass({ }, 300); }, - onFilterKeyUp: function(ev) { - if (ev.key == "Enter") { - this.showRoomAlias(ev.target.value); + onFilterClear: function() { + this.filterString = null; + + if (this.filterTimeout) { + clearTimeout(this.filterTimeout); } + // update immediately + this.refreshRoomList(); + }, + + onJoinClick: function(alias) { + this.showRoomAlias(alias); }, showRoomAlias: function(alias) { @@ -393,13 +401,15 @@ module.exports = React.createClass({ const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader'); const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown'); + const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox'); return (
-
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css new file mode 100644 index 0000000000..3a0922bcd2 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css @@ -0,0 +1,72 @@ +/* +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; +} + +.mx_DirectorySearchBox_container { + display: flex; + display: -webkit-flex; + padding-left: 9px; + padding-right: 9px; +} + +.mx_DirectorySearchBox_input { + flex-grow: 1; + -webkit-flex-grow: 1; + border: 0; + padding: 0; + font-weight: 300; + font-size: 13px; +} +input[type=text].mx_DirectorySearchBox_input:focus { + border: 0; +} + +.mx_DirectorySearchBox_joinButton { + display: table-cell; + padding: 3px; + padding-left: 10px; + padding-right: 10px; + background-color: #efefef; + border-radius: 3px; + background-image: url('img/icon-return.svg'); + background-position: 8px 70%; + background-repeat: no-repeat; + text-indent: 18px; + font-weight: 600; + font-size: 12px; + user-select: none; + cursor: pointer; +} + +.mx_DirectorySearchBox_clear_wrapper { + display: table-cell; +} + +.mx_DirectorySearchBox_clear { + display: inline-block; + vertical-align: middle; + background: url('img/icon_context_delete.svg'); + background-position: 0 50%; + background-repeat: no-repeat; + width: 15px; + height: 15px; + cursor: pointer; +} diff --git a/src/skins/vector/css/vector-web/structures/RoomDirectory.css b/src/skins/vector/css/vector-web/structures/RoomDirectory.css index 17954e1c98..fdf88e346d 100644 --- a/src/skins/vector/css/vector-web/structures/RoomDirectory.css +++ b/src/skins/vector/css/vector-web/structures/RoomDirectory.css @@ -53,24 +53,20 @@ limitations under the License. .mx_RoomDirectory_listheader { display: table; + table-layout: fixed; width: 100%; margin-top: 12px; margin-bottom: 12px; 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 { display: table-cell; - width: 100%; + width: 200px; } .mx_RoomDirectory_tableWrapper { diff --git a/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css b/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css index 3bf4bb3478..cc15280261 100644 --- a/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css +++ b/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css @@ -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; } diff --git a/src/skins/vector/img/icon-return.svg b/src/skins/vector/img/icon-return.svg new file mode 100644 index 0000000000..80da0f82aa --- /dev/null +++ b/src/skins/vector/img/icon-return.svg @@ -0,0 +1,18 @@ + + + + B542A09B-DBBF-41D4-A5FD-D05EE1E6BBC4 + Created with sketchtool. + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/app-tests/joining.js b/test/app-tests/joining.js index a668c2b184..989effa341 100644 --- a/test/app-tests/joining.js +++ b/test/app-tests/joining.js @@ -102,6 +102,7 @@ describe('joining a room', function () { var input = ReactTestUtils.findRenderedDOMComponentWithTag( roomDir, 'input'); input.value = ROOM_ALIAS; + ReactTestUtils.Simulate.change(input); ReactTestUtils.Simulate.keyUp(input, {key: 'Enter'}); // that should create a roomview which will start a peek; wait