status-im
/
embark-area-51
mirror of https://github.com/status-im/embark-area-51.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

conflict in editor

This commit is contained in:
Jonathan Rainville 2018-10-28 15:02:03 +01:00
parent 19ad229dbb
commit 8b1f970f74
8 changed files with 97 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
embark-ui/src/components/ContractOverview.css
View File

@ -1,13 +1,3 @@
.contract-function-container .collapse.show .card-body {
min-height: 65px;
}
.contract-function-container .contract-function-button {
position: absolute;
bottom: 15px;
right: 15px;
}
.contract-function-container .gas-price-form #gasPrice { .contract-function-container .gas-price-form #gasPrice {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;

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

@ -8,6 +8,7 @@ import {
Label, Label,
Input, Input,
Button, Button,
Badge,
Card, Card,
CardBody, CardBody,
CardHeader, CardHeader,
@ -20,6 +21,7 @@ import {
import GasStationContainer from "../containers/GasStationContainer"; import GasStationContainer from "../containers/GasStationContainer";
import {formatContractForDisplay} from '../utils/presentation'; import {formatContractForDisplay} from '../utils/presentation';
import FontAwesome from 'react-fontawesome'; import FontAwesome from 'react-fontawesome';
import classnames from 'classnames';
import "./ContractOverview.css"; import "./ContractOverview.css";
@ -94,69 +96,75 @@ class ContractFunction extends Component {
render() { render() {
return ( return (
<Card className="contract-function-container"> <Card className="contract-function-container">
<CardHeader className="collapsable" onClick={() => this.toggleFunction()}> <CardHeader className={classnames({collapsable: !ContractFunction.isEvent(this.props.method), closed: !this.state.functionCollapse})}
<CardTitle> onClick={() => this.toggleFunction()}>
{ContractFunction.isPureCall(this.props.method) && <CardTitle>
<button className="btn btn-warning btn-sm float-right" onClick={(e) => this.handleCall(e)}>call</button> {ContractFunction.isPureCall(this.props.method) && Boolean(this.props.method.inputs.length) &&
} <Badge color="warning" className="float-right p-2">call</Badge>
{ContractFunction.isEvent(this.props.method) && }
<button className="btn btn-info btn-sm float-right">event</button> {ContractFunction.isPureCall(this.props.method) && !this.props.method.inputs.length &&
} <Button color="warning" size="sm" className="float-right" onClick={(e) => this.handleCall(e)}>call</Button>
{this.props.method.name}({this.props.method.inputs.map(input => input.name).join(', ')}) }
</CardTitle> {ContractFunction.isEvent(this.props.method) &&
</CardHeader> <Badge color="info" className="float-right p-2">event</Badge>
<Collapse isOpen={this.state.functionCollapse} className="relative"> }
<CardBody> {this.props.method.name}({this.props.method.inputs.map(input => input.name).join(', ')})
<Form method="post" inline> </CardTitle>
{this.props.method.inputs.map(input => ( </CardHeader>
<FormGroup key={input.name}> {!ContractFunction.isEvent(this.props.method) &&
<Label for={input.name} className="mr-2 font-weight-bold">{input.name}</Label> <Collapse isOpen={this.state.functionCollapse} className="relative">
<Input name={input.name} id={input.name} placeholder={input.type} <CardBody>
onChange={(e) => this.handleChange(e, input.name)}/> <Form method="post" inline>
</FormGroup> {this.props.method.inputs.map(input => (
))} <FormGroup key={input.name}>
</Form> <Label for={input.name} className="mr-2 font-weight-bold">{input.name}</Label>
{!ContractFunction.isPureCall(this.props.method) && <Input name={input.name} id={input.name} placeholder={input.type}
<Col xs={12} className="mt-3"> onChange={(e) => this.handleChange(e, input.name)}/>
<Row> </FormGroup>
<strong className="collapsable" onClick={() => this.toggleOptions()}> ))}
<FontAwesome name={this.state.optionsCollapse ? 'caret-down' : 'caret-right'} className="mr-2"/> </Form>
Advanced Options {!ContractFunction.isPureCall(this.props.method) &&
</strong> <Col xs={12} className="mt-3">
</Row> <Row>
<Row> <strong className="collapsable" onClick={() => this.toggleOptions()}>
<Collapse isOpen={this.state.optionsCollapse} className="pl-3"> <FontAwesome name={this.state.optionsCollapse ? 'caret-down' : 'caret-right'} className="mr-2"/>
<Form method="post" inline className="gas-price-form "> Advanced Options
<FormGroup key="gasPrice"> </strong>
<Label for="gasPrice" className="mr-2">Gas Price (in GWei)(optional)</Label> </Row>
<Input name="gasPrice" id="gasPrice" placeholder="uint256" <Row>
value={this.state.inputs.gasPrice || ''} <Collapse isOpen={this.state.optionsCollapse} className="pl-3">
onChange={(e) => this.handleChange(e, 'gasPrice')}/> <Form method="post" inline className="gas-price-form ">
<Button onClick={(e) => this.autoSetGasPrice(e)} title="Automatically set the gas price to what is currently in the estimator (default: safe low)"> <FormGroup key="gasPrice">
Auto-set <Label for="gasPrice" className="mr-2">Gas Price (in GWei)(optional)</Label>
</Button> <Input name="gasPrice" id="gasPrice" placeholder="uint256"
</FormGroup> value={this.state.inputs.gasPrice || ''}
</Form> onChange={(e) => this.handleChange(e, 'gasPrice')}/>
<p className="collapsable mb-2" onClick={() => this.toggleGasPrice()}> <Button onClick={(e) => this.autoSetGasPrice(e)}
<FontAwesome name={this.state.gasPriceCollapse ? 'caret-down' : 'caret-right'} className="mr-2"/> title="Automatically set the gas price to what is currently in the estimator (default: safe low)">
Gas price estimator Auto-set
</p> </Button>
<Collapse isOpen={this.state.gasPriceCollapse}> </FormGroup>
<GasStationContainer ref={instance => { </Form>
if (instance) this.gasStation = instance.getWrappedInstance(); <p className="collapsable mb-2" onClick={() => this.toggleGasPrice()}>
}}/> <FontAwesome name={this.state.gasPriceCollapse ? 'caret-down' : 'caret-right'} className="mr-2"/>
</Collapse> Gas price estimator
</p>
<Collapse isOpen={this.state.gasPriceCollapse}>
<GasStationContainer ref={instance => {
if (instance) this.gasStation = instance.getWrappedInstance();
}}/>
</Collapse> </Collapse>
</Row> </Collapse>
</Col> </Row>
} </Col>
<Button className="contract-function-button" color="primary" disabled={this.callDisabled()} }
onClick={(e) => this.handleCall(e)}> <Button className="contract-function-button float-right" color="primary" disabled={this.callDisabled()}
{this.buttonTitle()} onClick={(e) => this.handleCall(e)}>
</Button> {this.buttonTitle()}
</CardBody> </Button>
</Collapse> <div className="clearfix"/>
</CardBody>
{this.props.contractFunctions && this.props.contractFunctions.length > 0 && <CardFooter> {this.props.contractFunctions && this.props.contractFunctions.length > 0 && <CardFooter>
<ListGroup> <ListGroup>
{this.props.contractFunctions.map(contractFunction => ( {this.props.contractFunctions.map(contractFunction => (
@ -167,7 +175,9 @@ class ContractFunction extends Component {
))} ))}
</ListGroup> </ListGroup>
</CardFooter>} </CardFooter>}
</Card> </Collapse>}
</Card>
); );
} }
} }
@ -193,7 +203,7 @@ const ContractOverview = (props) => {
<div> <div>
{(contractDisplay.state === 'Deployed') && <div>Deployed at {contractDisplay.address}</div>} {(contractDisplay.state === 'Deployed') && <div>Deployed at {contractDisplay.address}</div>}
{(contractDisplay.state !== 'Deployed') && <div>{contractDisplay.address}</div>} {(contractDisplay.state !== 'Deployed') && <div>{contractDisplay.address}</div>}
<br /> <br/>
{contractProfile.methods {contractProfile.methods
.filter((method) => { .filter((method) => {
return props.onlyConstructor ? method.type === 'constructor' : method.type !== 'constructor'; return props.onlyConstructor ? method.type === 'constructor' : method.type !== 'constructor';
@ -202,7 +212,7 @@ const ContractOverview = (props) => {
method={method} method={method}
contractFunctions={filterContractFunctions(props.contractFunctions, contractProfile.name, method.name)} contractFunctions={filterContractFunctions(props.contractFunctions, contractProfile.name, method.name)}
contractProfile={contractProfile} contractProfile={contractProfile}
postContractFunction={props.postContractFunction} />)} postContractFunction={props.postContractFunction}/>)}
</div> </div>
); );
}; };

2
embark-ui/src/components/SearchBar.js
View File

@ -54,7 +54,7 @@ class SearchBar extends React.Component {
value={this.state.searchValue} value={this.state.searchValue}
onBlur={() => this.hideForm()} onBlur={() => this.hideForm()}
onKeyPress={e => this.onKeyPress(e)}/> onKeyPress={e => this.onKeyPress(e)}/>
<Button className='search-bar__button' color="secondary" onClick={(e) => this.onSubmit(e)}> <Button className="search-bar__button" color="secondary" onClick={(e) => this.onSubmit(e)}>
<FontAwesome name="search"/> <FontAwesome name="search"/>
</Button> </Button>
</div> </div>

4
embark-ui/src/components/TextEditor.css
View File

@ -1,4 +0,0 @@
.text-editor__debuggerLine {
opacity: 0.4;
background-color: #20a8d8;
}

1
embark-ui/src/components/TextEditor.js
View File

@ -5,7 +5,6 @@ import FontAwesomeIcon from 'react-fontawesome';
import classNames from 'classnames'; import classNames from 'classnames';
import {DARK_THEME, LIGHT_THEME} from '../constants'; import {DARK_THEME, LIGHT_THEME} from '../constants';
import './TextEditor.css';
const SUPPORTED_LANGUAGES = ['css', 'sol', 'html', 'json']; const SUPPORTED_LANGUAGES = ['css', 'sol', 'html', 'json'];
const DEFAULT_LANGUAGE = 'javascript'; const DEFAULT_LANGUAGE = 'javascript';

19
embark-ui/src/containers/EditorContainer.css
View File

@ -10,3 +10,22 @@
right: 0; right: 0;
left: 0; left: 0;
} }
.text-editor__debuggerLine {
opacity: 0.4;
background-color: #20a8d8;
}
.explorer-aside-card {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.contract-function-container .card-header.closed {
border-bottom: none;
border-radius: 0.25rem;
}

2
embark-ui/src/containers/EditorContainer.js
View File

@ -71,7 +71,7 @@ class EditorContainer extends React.Component {
<Col xs={this.textEditorXsSize()} md={this.textEditorMdSize()} style={{overflow: 'hidden'}}> <Col xs={this.textEditorXsSize()} md={this.textEditorMdSize()} style={{overflow: 'hidden'}}>
<TextEditorContainer currentFile={this.props.currentFile} onFileContentChange={(newContent) => this.onFileContentChange(newContent)} /> <TextEditorContainer currentFile={this.props.currentFile} onFileContentChange={(newContent) => this.onFileContentChange(newContent)} />
</Col> </Col>
{this.state.currentAsideTab && <Col xs={6} md={3}> {this.state.currentAsideTab && <Col xs={6} md={3} className="editor-aside">
<TextEditorAsideContainer currentAsideTab={this.state.currentAsideTab} currentFile={this.props.currentFile} /> <TextEditorAsideContainer currentAsideTab={this.state.currentAsideTab} currentFile={this.props.currentFile} />
</Col>} </Col>}
</Row> </Row>

2
embark-ui/src/containers/TextEditorAsideContainer.js
View File

@ -56,7 +56,7 @@ class TextEditorAsideContainer extends Component {
render() { render() {
return this.props.contracts.map((contract, index) => { return this.props.contracts.map((contract, index) => {
return ( return (
<Card key={'contract-' + index}> <Card key={'contract-' + index} className="explorer-aside-card">
<CardBody> <CardBody>
{this.renderContent(contract, index)} {this.renderContent(contract, index)}
</CardBody> </CardBody>