diff --git a/package.json b/package.json index 06cd786b..5c11197e 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "lintall": "eslint src/ test/", "clean": "rimraf lib webapp electron_app/dist", "prepublish": "npm run build:compile", - "test": "karma start --single-run=true --autoWatch=false --browsers ChromeHeadless --colors=false", + "test": "karma start --single-run=true --autoWatch=false --browsers ChromeHeadless", "test-multi": "karma start" }, "dependencies": { @@ -121,6 +121,7 @@ "karma-mocha": "^0.2.2", "karma-webpack": "^1.7.0", "matrix-mock-request": "^1.0.0", + "matrix-react-test-utils": "^0.2.0", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "mocha": "^2.4.5", diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 092ed9cc..17febe02 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -30,6 +30,7 @@ var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs'); var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils'); var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); import Modal from 'matrix-react-sdk/lib/Modal'; +import KeyCode from 'matrix-react-sdk/lib/KeyCode'; // turn this on for drop & drag console debugging galore var debug = false; @@ -151,10 +152,11 @@ var RoomSubList = React.createClass({ } }, - onRoomTileClick(roomId) { + onRoomTileClick(roomId, ev) { dis.dispatch({ action: 'view_room', room_id: roomId, + clear_search: (ev && (ev.keyCode == KeyCode.ENTER || ev.keyCode == KeyCode.SPACE)), }); }, diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 99c44866..7de3958a 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -16,12 +16,13 @@ limitations under the License. 'use strict'; -var React = require('react'); +import React from 'react'; import { _t } from 'matrix-react-sdk/lib/languageHandler'; -var sdk = require('matrix-react-sdk') -var dis = require('matrix-react-sdk/lib/dispatcher'); -var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc'); -var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); +import KeyCode from 'matrix-react-sdk/lib/KeyCode'; +import sdk from 'matrix-react-sdk'; +import dis from 'matrix-react-sdk/lib/dispatcher'; +import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc'; +import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton'; module.exports = React.createClass({ displayName: 'SearchBox', @@ -46,18 +47,19 @@ module.exports = React.createClass({ }, onAction: function(payload) { - // Disabling this as I find it really really annoying, and was used to the - // previous behaviour - see https://github.com/vector-im/riot-web/issues/3348 -/* switch (payload.action) { - // Clear up the text field when a room is selected. case 'view_room': - if (this.refs.search) { + if (this.refs.search && payload.clear_search) { this._clearSearch(); } break; + case 'focus_room_filter': + if (this.refs.search) { + this.refs.search.focus(); + this.refs.search.select(); + } + break; } -*/ }, onChange: function() { @@ -86,6 +88,15 @@ module.exports = React.createClass({ } }, + _onKeyDown: function(ev) { + switch (ev.keyCode) { + case KeyCode.ESCAPE: + this._clearSearch(); + dis.dispatch({action: 'focus_composer'}); + break; + } + }, + _clearSearch: function() { this.refs.search.value = ""; this.onChange(); @@ -135,6 +146,7 @@ module.exports = React.createClass({ className="mx_SearchBox_search" value={ this.state.searchTerm } onChange={ this.onChange } + onKeyDown={ this._onKeyDown } placeholder={ _t('Filter room names') } /> ]; diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index a8ac1878..00c19b13 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -41,6 +41,7 @@ @import "./matrix-react-sdk/views/messages/_RoomAvatarEvent.scss"; @import "./matrix-react-sdk/views/messages/_TextualEvent.scss"; @import "./matrix-react-sdk/views/messages/_UnknownBody.scss"; +@import "./matrix-react-sdk/views/rooms/_AppsDrawer.scss"; @import "./matrix-react-sdk/views/rooms/_Autocomplete.scss"; @import "./matrix-react-sdk/views/rooms/_EntityTile.scss"; @import "./matrix-react-sdk/views/rooms/_EventTile.scss"; @@ -56,9 +57,7 @@ @import "./matrix-react-sdk/views/rooms/_RoomSettings.scss"; @import "./matrix-react-sdk/views/rooms/_RoomTile.scss"; @import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss"; -@import "./matrix-react-sdk/views/rooms/_TabCompleteBar.scss"; @import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss"; -@import "./matrix-react-sdk/views/rooms/_AppsDrawer.scss"; @import "./matrix-react-sdk/views/settings/_DevicesPanel.scss"; @import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss"; @import "./matrix-react-sdk/views/voip/_CallView.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index 1ae2a47c..d4b425ee 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -140,11 +140,6 @@ limitations under the License. cursor: pointer; } -.mx_RoomStatusBar_tabCompleteBar { - padding-top: 10px; - color: $primary-fg-color; -} - .mx_RoomStatusBar_typingBar { height: 50px; line-height: 50px; @@ -155,26 +150,6 @@ limitations under the License. display: block; } -.mx_RoomStatusBar_tabCompleteWrapper { - display: flex; - height: 26px; -} - -.mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar { - flex: 1 1 auto; -} - -.mx_RoomStatusBar_tabCompleteEol { - flex: 0 0 auto; - color: $accent-color; -} - -.mx_RoomStatusBar_tabCompleteEol object { - vertical-align: middle; - margin-right: 8px; - margin-top: -2px; -} - .mx_MatrixChat_useCompactLayout { .mx_RoomStatusBar { min-height: 40px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss deleted file mode 100644 index 5dcbd21a..00000000 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss +++ /dev/null @@ -1,56 +0,0 @@ -/* -Copyright 2015, 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_TabCompleteBar { - overflow: hidden; -} - -.mx_TabCompleteBar_item { - display: inline-block; - margin-right: 15px; - margin-bottom: 2px; - cursor: pointer; -} - -.mx_TabCompleteBar_command { - margin-right: 8px; - background-color: $accent-color; - padding-left: 8px; - padding-right: 8px; - padding-top: 2px; - padding-bottom: 2px; - margin-bottom: 6px; - border-radius: 30px; - position: relative; - top: 1px; -} - -.mx_TabCompleteBar_command .mx_TabCompleteBar_text { - opacity: 1.0; - vertical-align: initial; - color: $accent-fg-color; -} - -.mx_TabCompleteBar_item img { - margin-right: 8px; - vertical-align: middle; -} - -.mx_TabCompleteBar_text { - color: $primary-fg-color; - vertical-align: middle; - opacity: 0.5; -} diff --git a/test/app-tests/loading.js b/test/app-tests/loading.js index 0161a826..c7151aca 100644 --- a/test/app-tests/loading.js +++ b/test/app-tests/loading.js @@ -23,6 +23,7 @@ import ReactDOM from 'react-dom'; import ReactTestUtils from 'react-addons-test-utils'; import expect from 'expect'; import Promise from 'bluebird'; +import MatrixReactTestUtils from 'matrix-react-test-utils'; import jssdk from 'matrix-js-sdk'; @@ -183,11 +184,8 @@ describe('loading:', function () { return httpBackend.flush(); }).then(() => { // Wait for another trip around the event loop for the UI to update - return Promise.delay(10); + return awaitLoginComponent(matrixChat); }).then(() => { - // we expect a single component following session load - ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.login.Login')); expect(windowLocation.hash).toEqual("#/login"); }).done(done, done); }); @@ -232,7 +230,7 @@ describe('loading:', function () { uriFragment: "#/login", }); - return Promise.delay(100).then(() => { + return awaitLoginComponent(matrixChat).then(() => { // we expect a single component ReactTestUtils.findRenderedComponentWithType( matrixChat, sdk.getComponent('structures.login.Login')); @@ -366,7 +364,7 @@ describe('loading:', function () { }); // give the UI a chance to display - return Promise.delay(50); + return awaitLoginComponent(matrixChat); }); it('shows a login view', function() { @@ -530,7 +528,7 @@ describe('loading:', function () { dis.dispatch({ action: 'start_login' }); - return Promise.delay(1); + return awaitLoginComponent(matrixChat); }); }); @@ -607,7 +605,6 @@ describe('loading:', function () { }); }); - // check that we have a Login component, send a 'user:pass' login, // and await the HTTP requests. function completeLogin(matrixChat) { @@ -723,3 +720,9 @@ function awaitRoomView(matrixChat, retryLimit, retryCount) { matrixChat, sdk.getComponent('structures.RoomView')); return Promise.resolve(); } + +function awaitLoginComponent(matrixChat, attempts) { + return MatrixReactTestUtils.waitForRenderedComponentWithType( + matrixChat, sdk.getComponent('structures.login.Login'), attempts, + ); +}