Browse Source

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

Directory search join button
pull/2359/head
David Baker 6 years ago committed by GitHub
parent
commit
5967dc4983
  1. 26
      src/components/structures/RoomDirectory.js
  2. 72
      src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css
  3. 10
      src/skins/vector/css/vector-web/structures/RoomDirectory.css
  4. 2
      src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css
  5. 18
      src/skins/vector/img/icon-return.svg
  6. 1
      test/app-tests/joining.js

26
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>

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

10
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 {

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

18
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>

After

Width:  |  Height:  |  Size: 1.2 KiB

1
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

Loading…
Cancel
Save