From d78168d407fed7f178f222f981c3c68bb20e1bf7 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 5 Jul 2017 18:14:22 +0100 Subject: [PATCH] Add visual feedback for when there are no completions available Attempts to kep parity with old composer by using the same #faa colour but uses an animation instead of a js timeout. Fixes https://github.com/vector-im/riot-web/issues/4490 --- src/components/views/rooms/Autocomplete.js | 2 +- src/components/views/rooms/MessageComposerInput.js | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/Autocomplete.js b/src/components/views/rooms/Autocomplete.js index dd6d9d1ae9..30de7fb07d 100644 --- a/src/components/views/rooms/Autocomplete.js +++ b/src/components/views/rooms/Autocomplete.js @@ -177,7 +177,7 @@ export default class Autocomplete extends React.Component { hide: false, }, () => { this.complete(this.props.query, this.props.selection).then(() => { - done.resolve(); + done.resolve(this.countCompletions()); }); }); return done.promise; diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index 818c108211..ee3b566a7f 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -138,6 +138,9 @@ export default class MessageComposerInput extends React.Component { // the virtual state "above" the history stack, the message currently being composed that // we want to persist whilst browsing history currentlyComposedEditorState: null, + + // whether there were any completions + someCompletions: null, }; // bit of a hack, but we need to do this here since createEditorState needs isRichtextEnabled @@ -706,10 +709,16 @@ export default class MessageComposerInput extends React.Component { }; onTab = async (e) => { + this.setState({ + someCompletions: null, + }); e.preventDefault(); if (this.autocomplete.state.completionList.length === 0) { // Force completions to show for the text currently entered - await this.autocomplete.forceComplete(); + const completionCount = await this.autocomplete.forceComplete(); + this.setState({ + someCompletions: completionCount > 0, + }); // Select the first item by moving "down" await this.moveAutocompleteSelection(false); } else { @@ -830,6 +839,7 @@ export default class MessageComposerInput extends React.Component { const className = classNames('mx_MessageComposer_input', { mx_MessageComposer_input_empty: hidePlaceholder, + mx_MessageComposer_input_error: this.state.someCompletions === false, }); const content = activeEditorState.getCurrentContent();