From 69482bda42dd2ca58a06a6468ddcbaeeba7d9d49 Mon Sep 17 00:00:00 2001
From: Andre Medeiros <me@andremedeiros.info>
Date: Wed, 24 Oct 2018 13:37:40 -0400
Subject: [PATCH 1/2] Refactor the right navigation

---
 embark-ui/src/components/TextEditorToolbar.js | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/embark-ui/src/components/TextEditorToolbar.js b/embark-ui/src/components/TextEditorToolbar.js
index 4eaf4305..d33caed1 100644
--- a/embark-ui/src/components/TextEditorToolbar.js
+++ b/embark-ui/src/components/TextEditorToolbar.js
@@ -1,6 +1,6 @@
 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'
 
@@ -26,26 +26,23 @@ const TextEditorToolbar = (props) => (
       </Button>
     </Col>
     <Col sm={4} md={4}>
-      <div className="float-right mr-2">
-        {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>
-          </React.Fragment>
-        }
-        <Button size="sm" color="primary" onClick={() => props.openAsideTab('browser')}>
-          Browser
-        </Button>
+      <div className="float-right mr-2 btn-group">
+        <Nav>
+          {props.isContract &&
+            <React.Fragment>
+              <NavLink href="#" onClick={() => props.openAsideTab('overview')}>
+                <FontAwesomeIcon className="mr-2" name="info-circle" /> Overview
+              </NavLink>
+              <NavLink href="#" onClick={() => props.openAsideTab('detail')}>
+                <FontAwesomeIcon className="mr-2" name="file-text-o" /> Details
+              </NavLink>
+              <NavLink href="#" onClick={() => props.openAsideTab('logger')}>Logger</NavLink>
+            </React.Fragment>
+          }
+          <NavLink href="#" onClick={() => props.openAsideTab('browser')}>
+            <FontAwesomeIcon className="mr-2" name="compass" /> Browser
+          </NavLink>
+        </Nav>
       </div>
     </Col>
   </Row>

From 690788899ee231417fed79d4e94527948ae15f46 Mon Sep 17 00:00:00 2001
From: Andre Medeiros <me@andremedeiros.info>
Date: Wed, 24 Oct 2018 13:57:57 -0400
Subject: [PATCH 2/2] Refactor the toggle to show it on the file tree

---
 embark-ui/src/components/FileExplorer.js      | 15 +++--
 embark-ui/src/components/TextEditorToolbar.js | 59 ++++++++-----------
 embark-ui/src/containers/EditorContainer.js   |  5 +-
 .../src/containers/FileExplorerContainer.js   |  7 ++-
 4 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/embark-ui/src/components/FileExplorer.js b/embark-ui/src/components/FileExplorer.js
index 9eeab176..491b9247 100644
--- a/embark-ui/src/components/FileExplorer.js
+++ b/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>
     );
   }
 }
diff --git a/embark-ui/src/components/TextEditorToolbar.js b/embark-ui/src/components/TextEditorToolbar.js
index d33caed1..01a73440 100644
--- a/embark-ui/src/components/TextEditorToolbar.js
+++ b/embark-ui/src/components/TextEditorToolbar.js
@@ -5,47 +5,40 @@ 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}>
-      <strong>{props.currentFile.name}</strong>
-      <span className="mx-2">|</span>
+  <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 btn-group">
-        <Nav>
-          {props.isContract &&
-            <React.Fragment>
-              <NavLink href="#" onClick={() => props.openAsideTab('overview')}>
-                <FontAwesomeIcon className="mr-2" name="info-circle" /> Overview
-              </NavLink>
-              <NavLink href="#" onClick={() => props.openAsideTab('detail')}>
-                <FontAwesomeIcon className="mr-2" name="file-text-o" /> Details
-              </NavLink>
-              <NavLink href="#" onClick={() => props.openAsideTab('logger')}>Logger</NavLink>
-            </React.Fragment>
-          }
-          <NavLink href="#" onClick={() => props.openAsideTab('browser')}>
-            <FontAwesomeIcon className="mr-2" name="compass" /> Browser
-          </NavLink>
-        </Nav>
-      </div>
-    </Col>
-  </Row>
+    </li>
+    <li className="breadcrumb-menu">
+      <Nav className="btn-group">
+        {props.isContract &&
+          <React.Fragment>
+            <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>
+          </React.Fragment>
+        }
+        <NavLink className="btn" href="#" onClick={() => props.openAsideTab('browser')}>
+          <FontAwesomeIcon className="mr-2" name="compass" /> Browser
+        </NavLink>
+      </Nav>
+
+    </li>
+  </ol>
 );
 
 TextEditorToolbar.propTypes = {
diff --git a/embark-ui/src/containers/EditorContainer.js b/embark-ui/src/containers/EditorContainer.js
index 3a0b6486..881d6736 100644
--- a/embark-ui/src/containers/EditorContainer.js
+++ b/embark-ui/src/containers/EditorContainer.js
@@ -64,13 +64,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)} />
diff --git a/embark-ui/src/containers/FileExplorerContainer.js b/embark-ui/src/containers/FileExplorerContainer.js
index 4a7729a5..367e33d2 100644
--- a/embark-ui/src/containers/FileExplorerContainer.js
+++ b/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(