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

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