Revert "Move loading indicator into "Execute" button"

This reverts commit ce7daee1f1af35da6c0d8b5517272839285ccfec.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2019-05-19 22:40:15 +02:00
parent 4ddb377ec0
commit 7a52a1f736
2 changed files with 10 additions and 16 deletions

View file

@ -16,7 +16,7 @@ body {
}
button.execute-btn {
width: 120px;
width: 84px;
}
.alert.alert-danger {

View file

@ -13,9 +13,9 @@ import fuzzy from 'fuzzy';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch, faSpinner, faLevelDownAlt } from '@fortawesome/free-solid-svg-icons';
import { faSearch, faSpinner } from '@fortawesome/free-solid-svg-icons';
library.add(faSearch, faSpinner, faLevelDownAlt);
library.add(faSearch, faSpinner);
interface ExpressionInputProps {
value: string;
@ -101,6 +101,12 @@ class ExpressionInput extends Component<ExpressionInputProps> {
{(downshift) => (
<div>
<InputGroup className="expression-input">
<InputGroupAddon addonType="prepend">
<InputGroupText>
{this.props.loading ? <FontAwesomeIcon icon="spinner" spin/> : <FontAwesomeIcon icon="search"/>}
</InputGroupText>
</InputGroupAddon>
<Input
autoFocus
type="textarea"
@ -137,19 +143,7 @@ class ExpressionInput extends Component<ExpressionInputProps> {
} as any)}
/>
<InputGroupAddon addonType="append">
<Button
className="execute-btn"
color="primary"
onClick={() => this.props.executeQuery(this.exprInputRef.current!.value)}
>
Execute&nbsp;&nbsp;
{
this.props.loading
? <FontAwesomeIcon icon="spinner" fixedWidth spin/>
: <FontAwesomeIcon icon="level-down-alt" fixedWidth rotation={90}/>
}
</Button>
<Button className="execute-btn" color="primary" onClick={() => this.props.executeQuery(this.exprInputRef.current!.value)}>Execute</Button>
</InputGroupAddon>
</InputGroup>
{this.renderAutosuggest(downshift)}