PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add visual feedback for when there are no completions available

Browse source 
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
This commit is contained in:
Luke Barnard 2017-07-05 18:14:22 +01:00
parent b52a6a693a
commit d78168d407
2 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/rooms/Autocomplete.js
View file

@ -177,7 +177,7 @@ export default class Autocomplete extends React.Component {
hide: false, hide: false,
}, () => { }, () => {
this.complete(this.props.query, this.props.selection).then(() => { this.complete(this.props.query, this.props.selection).then(() => {
done.resolve(); done.resolve(this.countCompletions());
}); });
}); });
return done.promise; return done.promise;

12
src/components/views/rooms/MessageComposerInput.js
View file

@ -138,6 +138,9 @@ export default class MessageComposerInput extends React.Component {
// the virtual state "above" the history stack, the message currently being composed that // the virtual state "above" the history stack, the message currently being composed that
// we want to persist whilst browsing history // we want to persist whilst browsing history
currentlyComposedEditorState: null, currentlyComposedEditorState: null,
// whether there were any completions
someCompletions: null,
}; };
// bit of a hack, but we need to do this here since createEditorState needs isRichtextEnabled // 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) => { onTab = async (e) => {
this.setState({
someCompletions: null,
});
e.preventDefault(); e.preventDefault();
if (this.autocomplete.state.completionList.length === 0) { if (this.autocomplete.state.completionList.length === 0) {
// Force completions to show for the text currently entered // 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" // Select the first item by moving "down"
await this.moveAutocompleteSelection(false); await this.moveAutocompleteSelection(false);
} else { } else {
@ -830,6 +839,7 @@ export default class MessageComposerInput extends React.Component {
const className = classNames('mx_MessageComposer_input', { const className = classNames('mx_MessageComposer_input', {
mx_MessageComposer_input_empty: hidePlaceholder, mx_MessageComposer_input_empty: hidePlaceholder,
mx_MessageComposer_input_error: this.state.someCompletions === false,
}); });
const content = activeEditorState.getCurrentContent(); const content = activeEditorState.getCurrentContent();