Merge pull request #155 from status-im/restyle-code-editor-top-bar

Restyle code editor top bar

embark-ui/src/components/FileExplorer.js

@@ -1,3 +1,5 @@
+import {AppSwitch} from '@coreui/react';
+import {Label} from 'reactstrap';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Treebeard, decorators} from 'react-treebeard';
@@ -138,7 +140,7 @@ class FileExplorer extends React.Component {
     const cursor = this.state.cursor;
     const showHidden = this.props.showHiddenFiles;
     // we need a foreach to build an array instead of a
-    // filter to prevent mutating the original object (in props) 
+    // filter to prevent mutating the original object (in props)
     nodes.forEach(node => {
       if (!showHidden && node.isHidden) return;
       let updatedNode = {...node};
@@ -150,11 +152,11 @@ class FileExplorer extends React.Component {
           updatedNode.children = children;
         }
       }
-      
+
       // if this is the selected node, set it as active
       if (this.nodeEquals(node, cursor)) {
         updatedNode.active = cursor.active;
-        // if this node is the selected node and is a folder, set 
+        // if this node is the selected node and is a folder, set
         // it as toggled (expanded) according to the selected node
         if (node.children) updatedNode.toggled = cursor.toggled;
       }
@@ -178,7 +180,12 @@ class FileExplorer extends React.Component {
           onToggle={this.onToggle.bind(this)}
           style={style}
         />
-      </div>
+
+        <Label className="mb-0 pt-1">
+          <AppSwitch color='success' variant='pill' size='sm' onChange={this.props.toggleShowHiddenFiles}/>
+          <span className="ml-1 align-top">Show hidden files</span>
+        </Label>
+       </div>
     );
   }
 }

embark-ui/src/components/TextEditorToolbar.js

@@ -1,55 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Row, Label, Col, Button} from 'reactstrap';
+import {Row, Label, Col, Button, Nav, NavLink} from 'reactstrap';
 import FontAwesomeIcon from 'react-fontawesome';
 import { AppSwitch } from '@coreui/react'
 
 const TextEditorToolbar = (props) => (
-  <Row>
-    <Col sm={4} md={2}>
-      <Label className="mb-0 pt-1">
-        <AppSwitch color='success' variant='pill' size='sm' onChange={props.toggleShowHiddenFiles}/>
-        <span className="ml-1 align-top">Show hidden files</span>
-      </Label>
-    </Col>
-    <Col sm={4} md={6}>
+  <ol className="breadcrumb">
+    <li class="breadcrumb-item">
+      {props.currentFile.name}
+    </li>
+    <li class="breadcrumb-item">
       <Button color="success" size="sm" onClick={props.save}>
         <FontAwesomeIcon className="mr-2" name="save"/>
         Save
       </Button>
-      <span className="mx-2">|</span>
       <Button color="danger" size="sm" onClick={props.remove}>
         <FontAwesomeIcon className="mr-2" name="trash"/>
         Delete
       </Button>
-    </Col>
-    <Col sm={4} md={4}>
-      <div className="float-right mr-2">
+    </li>
+    <li className="breadcrumb-menu">
+      <Nav className="btn-group">
         {props.isContract &&
           <React.Fragment>
-            <Button size="sm" color="primary" onClick={() => props.openAsideTab('overview')}>
-              Overview
-            </Button>
-            <span className="mx-2">|</span>
-            <Button size="sm" color="primary" onClick={() => props.openAsideTab('detail')}>
-              Detail
-            </Button>
-            <span className="mx-2">|</span>
-            <Button size="sm" color="primary" onClick={() => props.openAsideTab('logger')}>
-              Logger
-            </Button>
-            <span className="mx-2">|</span>
-            <Button size="sm" color="primary" onClick={() => props.openAsideTab('debugger')}>
-              Debugger
-            </Button>
+            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('overview')}>
+              <FontAwesomeIcon className="mr-2" name="info-circle" /> Overview
+            </NavLink>
+            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('detail')}>
+              <FontAwesomeIcon className="mr-2" name="file-text-o" /> Details
+            </NavLink>
+            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('logger')}>Logger</NavLink>
+            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('debugger')}>
+              <FontAwesomeIcon className="mr-2" name="bug" /> Debugger
+            </NavLink>
           </React.Fragment>
         }
-        <Button size="sm" color="primary" onClick={() => props.openAsideTab('browser')}>
-          Browser
-        </Button>
-      </div>
-    </Col>
-  </Row>
+        <NavLink className="btn" href="#" onClick={() => props.openAsideTab('browser')}>
+          <FontAwesomeIcon className="mr-2" name="compass" /> Browser
+        </NavLink>
+      </Nav>
+
+    </li>
+  </ol>
 );
 
 TextEditorToolbar.propTypes = {

embark-ui/src/containers/EditorContainer.js

@@ -60,13 +60,12 @@ class EditorContainer extends React.Component {
     return (
       <Row noGutters className="h-100 editor--grid">
         <Col xs={12}>
-          <TextEditorToolbarContainer toggleShowHiddenFiles={() => this.toggleShowHiddenFiles()} 
-                                      openAsideTab={(newTab) => this.openAsideTab(newTab)}
+          <TextEditorToolbarContainer openAsideTab={(newTab) => this.openAsideTab(newTab)}
                                       isContract={this.isContract()}
                                       currentFile={this.props.currentFile} />
         </Col>
         <Col xs={4} md={2}>
-          <FileExplorerContainer showHiddenFiles={this.state.showHiddenFiles} />
+          <FileExplorerContainer showHiddenFiles={this.state.showHiddenFiles} toggleShowHiddenFiles={() => this.toggleShowHiddenFiles()} />
         </Col>
         <Col xs={this.textEditorXsSize()} md={this.textEditorMdSize()}>
           <TextEditorContainer currentFile={this.props.currentFile} onFileContentChange={(newContent)=> this.onFileContentChange(newContent)} />

embark-ui/src/containers/FileExplorerContainer.js

@@ -14,9 +14,9 @@ class FileExplorerContainer extends Component {
 
   render() {
     return (
-      <DataWrapper shouldRender={this.props.files.length > 0} {...this.props} render={({files, fetchFile, showHiddenFiles}) => (
-        <FileExplorer files={files} fetchFile={fetchFile} showHiddenFiles={showHiddenFiles} />
-      )} />
+        <DataWrapper shouldRender={this.props.files.length > 0} {...this.props} render={({files, fetchFile, showHiddenFiles, toggleShowHiddenFiles}) => (
+          <FileExplorer files={files} fetchFile={fetchFile} showHiddenFiles={showHiddenFiles} toggleShowHiddenFiles={toggleShowHiddenFiles} />
+        )} />
     );
   }
 }
@@ -30,6 +30,7 @@ FileExplorerContainer.propTypes = {
   fetchFiles: PropTypes.func,
   fetchFile: PropTypes.func,
   showHiddenFiles: PropTypes.bool,
+  toggleShowHiddenFiles: PropTypes.func,
 };
 
 export default connect(