From 2e77b0a3c7d1e45e8a800a73b790fd8101e94e7b Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 13:48:44 +0100 Subject: [PATCH 1/9] Use directory search box component --- src/components/structures/RoomDirectory.js | 29 ++++++++---- .../views/elements/DirectorySearchBox.css | 45 +++++++++++++++++++ .../vector-web/structures/RoomDirectory.css | 7 +-- .../views/directory/NetworkDropdown.css | 2 - 4 files changed, 67 insertions(+), 16 deletions(-) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 95e2f71c..9f8573f6 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -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 (
-
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 00000000..9afaa10d --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css @@ -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; +} diff --git a/src/skins/vector/css/vector-web/structures/RoomDirectory.css b/src/skins/vector/css/vector-web/structures/RoomDirectory.css index 17954e1c..1417c385 100644 --- a/src/skins/vector/css/vector-web/structures/RoomDirectory.css +++ b/src/skins/vector/css/vector-web/structures/RoomDirectory.css @@ -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 { 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 3bf4bb34..cc152802 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; } From 8e1105b12a1be3ec130c8dc29e513db504c30d37 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 15:25:13 +0100 Subject: [PATCH 2/9] Oops, wrong function --- src/components/structures/RoomDirectory.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 9f8573f6..cb77087f 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -229,7 +229,7 @@ module.exports = React.createClass({ }, 300); }, - onFilterChange: function() { + onFilterClear: function() { this.filterString = null; if (this.filterTimeout) { From a070bccffba63e6b252b5a820d70af93a456ed96 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 15:26:08 +0100 Subject: [PATCH 3/9] Hacky hardcoded css for join button --- .../views/elements/DirectorySearchBox.css | 17 +++++++++++++++++ src/skins/vector/img/icon-return.svg | 18 ++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 src/skins/vector/img/icon-return.svg 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 index 9afaa10d..60a005f3 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css @@ -32,6 +32,23 @@ input[type=text].mx_DirectorySearchBox_input:focus { border: 0; } +.mx_DirectorySearchBox_joinButton { + position: absolute; + right: 30px; + top: 5px; + 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; +} + .mx_DirectorySearchBox_clear { position: absolute; right: 0px; diff --git a/src/skins/vector/img/icon-return.svg b/src/skins/vector/img/icon-return.svg new file mode 100644 index 00000000..80da0f82 --- /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 From fb477fad1ed94cda8f502769b1ad3ea10f69d222 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 15:58:28 +0100 Subject: [PATCH 4/9] Less hardcoded CSS --- .../views/elements/DirectorySearchBox.css | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) 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 index 60a005f3..f3f92cb7 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css @@ -18,11 +18,15 @@ limitations under the License. position: relative; border-radius: 3px; border: 1px solid #c7c7c7; +} + +.mx_DirectorySearchBox_container { + display: table; padding-left: 9px; - padding-right: 25px; } .mx_DirectorySearchBox_input { + display: table-cell; border: 0; padding: 0; font-weight: 300; @@ -33,9 +37,7 @@ input[type=text].mx_DirectorySearchBox_input:focus { } .mx_DirectorySearchBox_joinButton { - position: absolute; - right: 30px; - top: 5px; + display: table-cell; padding: 3px; padding-left: 10px; padding-right: 10px; @@ -49,13 +51,16 @@ input[type=text].mx_DirectorySearchBox_input:focus { font-size: 12px; } +.mx_DirectorySearchBox_clear_wrapper { + display: table-cell; +} + .mx_DirectorySearchBox_clear { - position: absolute; - right: 0px; display: inline-block; - top: 10px; - right: 10px; + vertical-align: middle; background: url('img/icon_context_delete.svg'); + background-position: 0 50%; + background-repeat: no-repeat; width: 15px; height: 15px; cursor: pointer; From 4961a97ed4395f28dd267c0c8293515a6a2182f1 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 16:33:28 +0100 Subject: [PATCH 5/9] More css: * Make join button more buttony * Fix size of dropdown, allow search box to expand * Use flexbox within search box to input can fill the rest of the space --- .../matrix-react-sdk/views/elements/DirectorySearchBox.css | 7 +++++-- .../vector/css/vector-web/structures/RoomDirectory.css | 3 ++- 2 files changed, 7 insertions(+), 3 deletions(-) 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 index f3f92cb7..cea38b83 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css @@ -21,12 +21,13 @@ limitations under the License. } .mx_DirectorySearchBox_container { - display: table; + display: flex; padding-left: 9px; + padding-right: 9px; } .mx_DirectorySearchBox_input { - display: table-cell; + flex-grow: 1; border: 0; padding: 0; font-weight: 300; @@ -49,6 +50,8 @@ input[type=text].mx_DirectorySearchBox_input:focus { text-indent: 18px; font-weight: 600; font-size: 12px; + user-select: none; + cursor: pointer; } .mx_DirectorySearchBox_clear_wrapper { diff --git a/src/skins/vector/css/vector-web/structures/RoomDirectory.css b/src/skins/vector/css/vector-web/structures/RoomDirectory.css index 1417c385..fdf88e34 100644 --- a/src/skins/vector/css/vector-web/structures/RoomDirectory.css +++ b/src/skins/vector/css/vector-web/structures/RoomDirectory.css @@ -53,6 +53,7 @@ limitations under the License. .mx_RoomDirectory_listheader { display: table; + table-layout: fixed; width: 100%; margin-top: 12px; margin-bottom: 12px; @@ -65,7 +66,7 @@ limitations under the License. .mx_RoomDirectory_listheader .mx_NetworkDropdown { display: table-cell; - width: 100%; + width: 200px; } .mx_RoomDirectory_tableWrapper { From 3938abc5ddf81e2c71276aed5588fdc0d3ef8c61 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 17:18:52 +0100 Subject: [PATCH 6/9] add webkit vendor prefixed properties for mavericks safari --- .../css/matrix-react-sdk/views/elements/DirectorySearchBox.css | 2 ++ test/app-tests/joining.js | 1 + 2 files changed, 3 insertions(+) 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 index cea38b83..3a0922bc 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css @@ -22,12 +22,14 @@ limitations under the License. .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; diff --git a/test/app-tests/joining.js b/test/app-tests/joining.js index a668c2b1..989effa3 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 From 51a5542446fab47ecb4411ae380708362d7406f8 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 18:20:31 +0100 Subject: [PATCH 7/9] Make tests pass --- src/components/structures/RoomDirectory.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index cb77087f..152624dd 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -99,6 +99,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; From dc0b15bdfad90e7209c2e7b58d42d02c324e74ff Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 26 Sep 2016 14:17:36 +0100 Subject: [PATCH 8/9] Remove unused variable / function --- src/components/structures/RoomDirectory.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 152624dd..53ec5d2d 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -68,7 +68,6 @@ module.exports = React.createClass({ this.filterString = null; this.filterTimeout = null; this.scrollPanel = null; - this.searchBox = null; // dis.dispatch({ // action: 'ui_opacity', @@ -245,10 +244,6 @@ module.exports = React.createClass({ this.showRoomAlias(alias); }, - collectSearchBox: function(e) { - this.searchBox = e; - }, - showRoomAlias: function(alias) { this.showRoom(null, alias); }, From bf58c340bc6f54466a30e3309ae7c8f40c21f018 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 26 Sep 2016 15:30:42 +0100 Subject: [PATCH 9/9] Oops, missed the ref --- src/components/structures/RoomDirectory.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 53ec5d2d..90afff5c 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -408,7 +408,7 @@ module.exports = React.createClass({