Merge remote-tracking branch 'origin/develop' into rav/bluebird

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",

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

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') }
                     />
                 ];

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

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;

src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss

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

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 <Login> 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 <Login> 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,
+    );
+}