From 8b1f970f74c5e19a87009881e06f0d2b6a664e10 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Sun, 28 Oct 2018 15:02:03 +0100
Subject: [PATCH] conflict in editor

---
 embark-ui/src/components/ContractOverview.css |  10 --
 embark-ui/src/components/ContractOverview.js  | 140 ++++++++++--------
 embark-ui/src/components/SearchBar.js         |   2 +-
 embark-ui/src/components/TextEditor.css       |   4 -
 embark-ui/src/components/TextEditor.js        |   1 -
 embark-ui/src/containers/EditorContainer.css  |  19 +++
 embark-ui/src/containers/EditorContainer.js   |   2 +-
 .../containers/TextEditorAsideContainer.js    |   2 +-
 8 files changed, 97 insertions(+), 83 deletions(-)
 delete mode 100644 embark-ui/src/components/TextEditor.css

diff --git a/embark-ui/src/components/ContractOverview.css b/embark-ui/src/components/ContractOverview.css
index 5f34a49d..d5645d35 100644
--- a/embark-ui/src/components/ContractOverview.css
+++ b/embark-ui/src/components/ContractOverview.css
@@ -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 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
diff --git a/embark-ui/src/components/ContractOverview.js b/embark-ui/src/components/ContractOverview.js
index f02b27fb..1c0ed194 100644
--- a/embark-ui/src/components/ContractOverview.js
+++ b/embark-ui/src/components/ContractOverview.js
@@ -8,6 +8,7 @@ import {
   Label,
   Input,
   Button,
+  Badge,
   Card,
   CardBody,
   CardHeader,
@@ -20,6 +21,7 @@ import {
 import GasStationContainer from "../containers/GasStationContainer";
 import {formatContractForDisplay} from '../utils/presentation';
 import FontAwesome from 'react-fontawesome';
+import classnames from 'classnames';
 
 import "./ContractOverview.css";
 
@@ -94,69 +96,75 @@ class ContractFunction extends Component {
 
   render() {
     return (
-        <Card className="contract-function-container">
-          <CardHeader className="collapsable" onClick={() => this.toggleFunction()}>
-            <CardTitle>
-              {ContractFunction.isPureCall(this.props.method) &&
-                <button className="btn btn-warning btn-sm float-right" onClick={(e) => this.handleCall(e)}>call</button>
-              }
-              {ContractFunction.isEvent(this.props.method) &&
-              <button className="btn btn-info btn-sm float-right">event</button>
-              }
-              {this.props.method.name}({this.props.method.inputs.map(input => input.name).join(', ')})
-            </CardTitle>
-          </CardHeader>
-          <Collapse isOpen={this.state.functionCollapse} className="relative">
-            <CardBody>
-              <Form method="post" inline>
-                {this.props.method.inputs.map(input => (
-                  <FormGroup key={input.name}>
-                    <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)}/>
-                  </FormGroup>
-                ))}
-              </Form>
-              {!ContractFunction.isPureCall(this.props.method) &&
-              <Col xs={12} className="mt-3">
-                <Row>
-                  <strong className="collapsable" onClick={() => this.toggleOptions()}>
-                    <FontAwesome name={this.state.optionsCollapse ? 'caret-down' : 'caret-right'} className="mr-2"/>
-                    Advanced Options
-                  </strong>
-                </Row>
-                <Row>
-                  <Collapse isOpen={this.state.optionsCollapse} className="pl-3">
-                    <Form method="post" inline className="gas-price-form ">
-                      <FormGroup key="gasPrice">
-                        <Label for="gasPrice" className="mr-2">Gas Price (in GWei)(optional)</Label>
-                        <Input name="gasPrice" id="gasPrice" placeholder="uint256"
-                               value={this.state.inputs.gasPrice || ''}
-                               onChange={(e) => this.handleChange(e, 'gasPrice')}/>
-                        <Button onClick={(e) => this.autoSetGasPrice(e)} title="Automatically set the gas price to what is currently in the estimator (default: safe low)">
-                          Auto-set
-                        </Button>
-                      </FormGroup>
-                    </Form>
-                    <p className="collapsable mb-2" onClick={() => this.toggleGasPrice()}>
-                      <FontAwesome name={this.state.gasPriceCollapse ? 'caret-down' : 'caret-right'} className="mr-2"/>
-                      Gas price estimator
-                    </p>
-                    <Collapse isOpen={this.state.gasPriceCollapse}>
-                      <GasStationContainer ref={instance => {
-                        if (instance) this.gasStation = instance.getWrappedInstance();
-                      }}/>
-                    </Collapse>
+      <Card className="contract-function-container">
+        <CardHeader className={classnames({collapsable: !ContractFunction.isEvent(this.props.method), closed: !this.state.functionCollapse})}
+                    onClick={() => this.toggleFunction()}>
+          <CardTitle>
+            {ContractFunction.isPureCall(this.props.method) && Boolean(this.props.method.inputs.length) &&
+            <Badge color="warning" className="float-right p-2">call</Badge>
+            }
+            {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>
+            }
+            {ContractFunction.isEvent(this.props.method) &&
+            <Badge color="info" className="float-right p-2">event</Badge>
+            }
+            {this.props.method.name}({this.props.method.inputs.map(input => input.name).join(', ')})
+          </CardTitle>
+        </CardHeader>
+        {!ContractFunction.isEvent(this.props.method) &&
+        <Collapse isOpen={this.state.functionCollapse} className="relative">
+          <CardBody>
+            <Form method="post" inline>
+              {this.props.method.inputs.map(input => (
+                <FormGroup key={input.name}>
+                  <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)}/>
+                </FormGroup>
+              ))}
+            </Form>
+            {!ContractFunction.isPureCall(this.props.method) &&
+            <Col xs={12} className="mt-3">
+              <Row>
+                <strong className="collapsable" onClick={() => this.toggleOptions()}>
+                  <FontAwesome name={this.state.optionsCollapse ? 'caret-down' : 'caret-right'} className="mr-2"/>
+                  Advanced Options
+                </strong>
+              </Row>
+              <Row>
+                <Collapse isOpen={this.state.optionsCollapse} className="pl-3">
+                  <Form method="post" inline className="gas-price-form ">
+                    <FormGroup key="gasPrice">
+                      <Label for="gasPrice" className="mr-2">Gas Price (in GWei)(optional)</Label>
+                      <Input name="gasPrice" id="gasPrice" placeholder="uint256"
+                             value={this.state.inputs.gasPrice || ''}
+                             onChange={(e) => this.handleChange(e, 'gasPrice')}/>
+                      <Button onClick={(e) => this.autoSetGasPrice(e)}
+                              title="Automatically set the gas price to what is currently in the estimator (default: safe low)">
+                        Auto-set
+                      </Button>
+                    </FormGroup>
+                  </Form>
+                  <p className="collapsable mb-2" onClick={() => this.toggleGasPrice()}>
+                    <FontAwesome name={this.state.gasPriceCollapse ? 'caret-down' : 'caret-right'} className="mr-2"/>
+                    Gas price estimator
+                  </p>
+                  <Collapse isOpen={this.state.gasPriceCollapse}>
+                    <GasStationContainer ref={instance => {
+                      if (instance) this.gasStation = instance.getWrappedInstance();
+                    }}/>
                   </Collapse>
-                </Row>
-              </Col>
-              }
-              <Button className="contract-function-button" color="primary" disabled={this.callDisabled()}
-                      onClick={(e) => this.handleCall(e)}>
-                {this.buttonTitle()}
-              </Button>
-            </CardBody>
-          </Collapse>
+                </Collapse>
+              </Row>
+            </Col>
+            }
+            <Button className="contract-function-button float-right" color="primary" disabled={this.callDisabled()}
+                    onClick={(e) => this.handleCall(e)}>
+              {this.buttonTitle()}
+            </Button>
+            <div className="clearfix"/>
+          </CardBody>
           {this.props.contractFunctions && this.props.contractFunctions.length > 0 && <CardFooter>
             <ListGroup>
               {this.props.contractFunctions.map(contractFunction => (
@@ -167,7 +175,9 @@ class ContractFunction extends Component {
               ))}
             </ListGroup>
           </CardFooter>}
-        </Card>
+        </Collapse>}
+
+      </Card>
     );
   }
 }
@@ -193,7 +203,7 @@ const ContractOverview = (props) => {
     <div>
       {(contractDisplay.state === 'Deployed') && <div>Deployed at {contractDisplay.address}</div>}
       {(contractDisplay.state !== 'Deployed') && <div>{contractDisplay.address}</div>}
-      <br />
+      <br/>
       {contractProfile.methods
         .filter((method) => {
           return props.onlyConstructor ? method.type === 'constructor' : method.type !== 'constructor';
@@ -202,7 +212,7 @@ const ContractOverview = (props) => {
                                          method={method}
                                          contractFunctions={filterContractFunctions(props.contractFunctions, contractProfile.name, method.name)}
                                          contractProfile={contractProfile}
-                                         postContractFunction={props.postContractFunction} />)}
+                                         postContractFunction={props.postContractFunction}/>)}
     </div>
   );
 };
diff --git a/embark-ui/src/components/SearchBar.js b/embark-ui/src/components/SearchBar.js
index 9167ef2a..bd6a1466 100644
--- a/embark-ui/src/components/SearchBar.js
+++ b/embark-ui/src/components/SearchBar.js
@@ -54,7 +54,7 @@ class SearchBar extends React.Component {
                     value={this.state.searchValue}
                     onBlur={() => this.hideForm()}
                     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"/>
               </Button>
             </div>
diff --git a/embark-ui/src/components/TextEditor.css b/embark-ui/src/components/TextEditor.css
deleted file mode 100644
index 58a85a79..00000000
--- a/embark-ui/src/components/TextEditor.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.text-editor__debuggerLine {
-  opacity: 0.4;
-  background-color: #20a8d8;
-}
\ No newline at end of file
diff --git a/embark-ui/src/components/TextEditor.js b/embark-ui/src/components/TextEditor.js
index 0835adc7..b84c37ac 100644
--- a/embark-ui/src/components/TextEditor.js
+++ b/embark-ui/src/components/TextEditor.js
@@ -5,7 +5,6 @@ import FontAwesomeIcon from 'react-fontawesome';
 import classNames from 'classnames';
 
 import {DARK_THEME, LIGHT_THEME} from '../constants';
-import './TextEditor.css';
 
 const SUPPORTED_LANGUAGES = ['css', 'sol', 'html', 'json'];
 const DEFAULT_LANGUAGE = 'javascript';
diff --git a/embark-ui/src/containers/EditorContainer.css b/embark-ui/src/containers/EditorContainer.css
index 62018117..2e9c73dc 100644
--- a/embark-ui/src/containers/EditorContainer.css
+++ b/embark-ui/src/containers/EditorContainer.css
@@ -10,3 +10,22 @@
   right: 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;
+}
diff --git a/embark-ui/src/containers/EditorContainer.js b/embark-ui/src/containers/EditorContainer.js
index cec5950a..2a564bba 100644
--- a/embark-ui/src/containers/EditorContainer.js
+++ b/embark-ui/src/containers/EditorContainer.js
@@ -71,7 +71,7 @@ class EditorContainer extends React.Component {
         <Col xs={this.textEditorXsSize()} md={this.textEditorMdSize()} style={{overflow: 'hidden'}}>
           <TextEditorContainer currentFile={this.props.currentFile} onFileContentChange={(newContent) => this.onFileContentChange(newContent)} />
         </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} />
         </Col>}
       </Row>
diff --git a/embark-ui/src/containers/TextEditorAsideContainer.js b/embark-ui/src/containers/TextEditorAsideContainer.js
index 798cbbe2..caafa894 100644
--- a/embark-ui/src/containers/TextEditorAsideContainer.js
+++ b/embark-ui/src/containers/TextEditorAsideContainer.js
@@ -56,7 +56,7 @@ class TextEditorAsideContainer extends Component {
   render() {
     return this.props.contracts.map((contract, index) => {
       return (
-        <Card key={'contract-' + index}>
+        <Card key={'contract-' + index} className="explorer-aside-card">
           <CardBody>
             {this.renderContent(contract, index)}
           </CardBody>