embarklabs/embark
2
0
Fork 0
mirror of https://github.com/embarklabs/embark.git synced 2025-02-05 10:23:25 +00:00
Code Issues Projects Releases Wiki Activity

impore contract overview style

Browse Source
This commit is contained in:
Jonathan Rainville 2018-10-25 10:23:47 -04:00
parent 7df05fdce3
commit 92d433ff9a
2 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
embark-ui/src/components/ContractOverview.css Normal file
View File

@ -0,0 +1,9 @@
.contract-function-container .collapse.show .card-body {
min-height: 65px;
}
.contract-function-container .contract-function-button {
position: absolute;
bottom: 15px;
right: 15px;
}

44
embark-ui/src/components/ContractOverview.js
View File

@ -18,6 +18,9 @@ import {
ListGroupItem ListGroupItem
} from "reactstrap"; } from "reactstrap";
import {formatContractForDisplay} from '../utils/presentation'; import {formatContractForDisplay} from '../utils/presentation';
import FontAwesome from 'react-fontawesome';
import "./ContractOverview.css";
class ContractFunction extends Component { class ContractFunction extends Component {
constructor(props) { constructor(props) {
@ -65,19 +68,19 @@ class ContractFunction extends Component {
toggleOptions() { toggleOptions() {
this.setState({ this.setState({
optionsCollapse: !this.state.optionsCollapse, optionsCollapse: !this.state.optionsCollapse
}); });
} }
toggleFunction() { toggleFunction() {
this.setState({ this.setState({
functionCollapse: !this.state.functionCollapse, functionCollapse: !this.state.functionCollapse
}); });
} }
render() { render() {
return ( return (
<Card> <Card className="contract-function-container">
<CardHeader> <CardHeader>
<CardTitle className="collapsable" onClick={() => this.toggleFunction()}> <CardTitle className="collapsable" onClick={() => this.toggleFunction()}>
{ContractFunction.isPureCall(this.props.method) && {ContractFunction.isPureCall(this.props.method) &&
@ -89,42 +92,41 @@ class ContractFunction extends Component {
{this.props.method.name}({this.props.method.inputs.map(input => input.name).join(', ')}) {this.props.method.name}({this.props.method.inputs.map(input => input.name).join(', ')})
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<Collapse isOpen={this.state.functionCollapse}> <Collapse isOpen={this.state.functionCollapse} className="relative">
<CardBody> <CardBody>
<Form action="" method="post" inline> <Form method="post" inline>
{this.props.method.inputs.map(input => ( {this.props.method.inputs.map(input => (
<FormGroup key={input.name} className="pr-1"> <FormGroup key={input.name}>
<Label for={input.name} className="pr-1">{input.name}: </Label> <Label for={input.name} className="mr-2 font-weight-bold">{input.name}</Label>
<Input name={input.name} id={input.name} placeholder={input.type} onChange={(e) => this.handleChange(e, input.name)}/> <Input name={input.name} id={input.name} placeholder={input.type}
onChange={(e) => this.handleChange(e, input.name)}/>
</FormGroup> </FormGroup>
))} ))}
</Form> </Form>
{!ContractFunction.isPureCall(this.props.method) && {!ContractFunction.isPureCall(this.props.method) &&
<Col xs={12} className="my-2"> <Col xs={12} className="mt-3">
<Row> <Row>
<strong className="collapsable" onClick={() => this.toggleOptions()}> <strong className="collapsable" onClick={() => this.toggleOptions()}>
<i className={this.state.optionsCollapse ? 'fa fa-caret-down' : 'fa fa-caret-right'}/>Advanced Options <FontAwesome name={this.state.optionsCollapse ? 'caret-down' : 'caret-right'} className="mr-2"/>Advanced
Options
</strong> </strong>
<Col xs={12} className="my-2"> </Row>
<Row> <Row>
<Collapse isOpen={this.state.optionsCollapse}> <Collapse isOpen={this.state.optionsCollapse} className="pl-3">
<Form action="" method="post" inline> <Form method="post" inline>
<FormGroup key="gasPrice" className="pr-1"> <FormGroup key="gasPrice">
<Label for="gasPrice" className="pr-1">Gas Price (in GWei)(optional)</Label> <Label for="gasPrice" className="mr-2">Gas Price (in GWei)(optional)</Label>
<Input name="gasPrice" id="gasPrice" onChange={(e) => this.handleChange(e, 'gasPrice')}/> <Input name="gasPrice" id="gasPrice" placeholder="uint256"
onChange={(e) => this.handleChange(e, 'gasPrice')}/>
</FormGroup> </FormGroup>
</Form> </Form>
</Collapse> </Collapse>
</Row> </Row>
</Col> </Col>
</Row>
</Col>
} }
<div align="right"> <Button className="contract-function-button" color="primary" disabled={this.callDisabled()} onClick={(e) => this.handleCall(e)}>
<Button color="primary" disabled={this.callDisabled()} onClick={(e) => this.handleCall(e)}>
{this.buttonTitle()} {this.buttonTitle()}
</Button> </Button>
</div>
</CardBody> </CardBody>
</Collapse> </Collapse>
{this.props.contractFunctions && this.props.contractFunctions.length > 0 && <CardFooter> {this.props.contractFunctions && this.props.contractFunctions.length > 0 && <CardFooter>