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 { button.execute-btn {
width: 120px; width: 84px;
} }
.alert.alert-danger { .alert.alert-danger {

View file

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