Merge pull request #2339 from vector-im/dbkr/directory_search_box

Directory search join button

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 (
             <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"
+                            onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
                         />
                         <NetworkDropdown config={this.props.config} onNetworkChange={this.onNetworkChange} />
                     </div>

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;
+}

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 {

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;
 }
 

src/skins/vector/img/icon-return.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>B542A09B-DBBF-41D4-A5FD-D05EE1E6BBC4</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Create-group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Chat-Directory-search-result-ID" transform="translate(-553.000000, -97.000000)" stroke="#4A4A4A">
+            <g id="icon_return" transform="translate(554.000000, 97.000000)">
+                <polyline id="Rectangle" points="7.5 0.5 10.5 0.5 10.5 6.5 0 6.5"></polyline>
+                <g id="Group" transform="translate(0.000000, 1.954545)" stroke-linecap="square">
+                    <path d="M0.227272727,4.40909091 L4.25946916,0.376894528" id="Line"></path>
+                    <path d="M0.227272727,8.44128729 L4.25946916,4.40909091" id="Line-Copy-7" transform="translate(2.243371, 6.425189) scale(1, -1) translate(-2.243371, -6.425189) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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