From 4fe4e10abb55d4735ecb3159731c77ea4f829981 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 12 Jul 2017 13:49:57 +0100 Subject: [PATCH 1/8] Implement the focus_room_filter action This is for ctrl+k room filtering and switching --- src/components/structures/SearchBox.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 99c448669..6e47f7a57 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -46,18 +46,22 @@ 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) { +/* 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 // Clear up the text field when a room is selected. case 'view_room': if (this.refs.search) { this._clearSearch(); } break; +*/ + case 'focus_room_filter': + if (this.refs.search) { + this.refs.search.focus(); + } + break; } -*/ }, onChange: function() { From 41cd238e0221f7243d83aeb8daca927c30fe165f Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 12 Jul 2017 17:10:43 +0100 Subject: [PATCH 2/8] Update to reflect previous implementation Which was https://github.com/vector-im/riot-web/pull/3654/commits/a74bbb424c7c07494d71329e8d4c6ef9fc37a7b9 --- src/components/structures/RoomSubList.js | 4 ++- src/components/structures/SearchBox.js | 33 ++++++++++++++++-------- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 092ed9cca..17febe02c 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 6e47f7a57..e35d1e489 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 RateLimitedFunc from 'matrix-react-sdk/lib/ratelimitedfunc'; +import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton'; module.exports = React.createClass({ displayName: 'SearchBox', @@ -39,26 +40,25 @@ module.exports = React.createClass({ componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); + document.addEventListener('keydown', this._onKeyDown); }, componentWillUnmount: function() { dis.unregister(this.dispatcherRef); + document.removeEventListener('keydown', this._onKeyDown); }, onAction: function(payload) { switch (payload.action) { -/* 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 - // 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; } @@ -70,7 +70,7 @@ module.exports = React.createClass({ this.onSearch(); }, - onSearch: new rate_limited_func( + onSearch: new RateLimitedFunc( function() { this.props.onSearch(this.refs.search.value); }, @@ -90,6 +90,17 @@ module.exports = React.createClass({ } }, + _onKeyDown: function(ev) { + // Only do anything when the key event target is the search input + if(ev.target !== this.refs.search) return; + switch (ev.keyCode) { + case KeyCode.ESCAPE: + this._clearSearch(); + dis.dispatch({action: 'focus_composer'}); + break; + } + }, + _clearSearch: function() { this.refs.search.value = ""; this.onChange(); From 3e1a909b1d2ae7e6bea24514723c214dd2d845ef Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 12 Jul 2017 17:46:27 +0100 Subject: [PATCH 3/8] Just use the onKeyDown of the --- src/components/structures/SearchBox.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index e35d1e489..0499e6019 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -40,12 +40,10 @@ module.exports = React.createClass({ componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); - document.addEventListener('keydown', this._onKeyDown); }, componentWillUnmount: function() { dis.unregister(this.dispatcherRef); - document.removeEventListener('keydown', this._onKeyDown); }, onAction: function(payload) { @@ -91,8 +89,6 @@ module.exports = React.createClass({ }, _onKeyDown: function(ev) { - // Only do anything when the key event target is the search input - if(ev.target !== this.refs.search) return; switch (ev.keyCode) { case KeyCode.ESCAPE: this._clearSearch(); @@ -150,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') } /> ]; From 188a58e5c7b49ad99f89613affea86d7604b8bd9 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 12 Jul 2017 18:18:13 +0100 Subject: [PATCH 4/8] RateLimitedFunc -> rate_limited_func --- src/components/structures/SearchBox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 0499e6019..7de3958a5 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -21,7 +21,7 @@ import { _t } from 'matrix-react-sdk/lib/languageHandler'; import KeyCode from 'matrix-react-sdk/lib/KeyCode'; import sdk from 'matrix-react-sdk'; import dis from 'matrix-react-sdk/lib/dispatcher'; -import RateLimitedFunc from 'matrix-react-sdk/lib/ratelimitedfunc'; +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({ @@ -68,7 +68,7 @@ module.exports = React.createClass({ this.onSearch(); }, - onSearch: new RateLimitedFunc( + onSearch: new rate_limited_func( function() { this.props.onSearch(this.refs.search.value); }, From 0f8a2554dc85dc54c56e551373ef580818f52b4d Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 13 Jul 2017 00:18:10 +0100 Subject: [PATCH 5/8] Enable colours for karma test output I don't really know why we disable colours here. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 83d9bd16a..3b4c16db9 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": { From b2403d59b79192900ab6becf7969c74805d0ed24 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 13 Jul 2017 00:18:49 +0100 Subject: [PATCH 6/8] loading tests: wait for login component Rather than a fixed delay, use matrix-react-test-utils to wait for the login component to appear. Hopefully this will deflakify some tests. --- package.json | 1 + test/app-tests/loading.js | 19 +++++++++++-------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 3b4c16db9..88c55bcd5 100644 --- a/package.json +++ b/package.json @@ -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/test/app-tests/loading.js b/test/app-tests/loading.js index d01836a36..445105ddf 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 q from 'q'; +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 q.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 q.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 q.delay(50); + return awaitLoginComponent(matrixChat); }); it('shows a login view', function() { @@ -530,7 +528,7 @@ describe('loading:', function () { dis.dispatch({ action: 'start_login' }); - return q.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 q(); } + +function awaitLoginComponent(matrixChat, attempts) { + return MatrixReactTestUtils.waitForRenderedComponentWithType( + matrixChat, sdk.getComponent('structures.login.Login'), attempts, + ); +} From f5c4d903e67ab852017eb30d867186b0de635f9e Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 13 Jul 2017 10:11:58 +0100 Subject: [PATCH 7/8] Remove CSS for TabComplete --- .../structures/_RoomStatusBar.scss | 25 --------- .../views/rooms/_TabCompleteBar.scss | 56 ------------------- 2 files changed, 81 deletions(-) delete mode 100644 src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.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 1ae2a47c8..d4b425ee4 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 5dcbd21a4..000000000 --- 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; -} From d9015150597dba9938a5fa523c9c2c18afe93891 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 13 Jul 2017 10:16:23 +0100 Subject: [PATCH 8/8] rethemedex --- src/skins/vector/css/_components.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index a8ac18781..00c19b13d 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";