Breadcrumbs

app/components/Breadcrumbs/index.jsx

@@ -0,0 +1,42 @@
+/* @flow weak */
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import config from '../../config'
+
+let Breadcrumbs = ({currentPath}) => {
+  const pathComps = currentPath.split('/')
+  const rootCrumb = {path: '/', name: config.projectName, isDir: true}
+  const crumbs = pathComps.map((pathComp, idx, pathComps) => {
+    if (pathComp === '') return rootCrumb
+    return {
+      name: pathComp,
+      path: pathComps.slice(0, idx+1).join('/'),
+      isDir: (idx !== pathComps.length - 1)   // last pathComp isDir === false
+    }
+  }, [])
+
+  return (
+    <div className='breadcrumbs'>
+      {crumbs.map(crumb => <Crumb node={crumb} key={crumb.path}/>)}
+    </div>
+  )
+}
+Breadcrumbs = connect(state => {
+  if (state.TabState.getActiveGroup() && state.TabState.getActiveGroup().activeTab) {
+    return {currentPath: state.TabState.getActiveGroup().activeTab.path || ''}
+  } else {
+    return {currentPath: ''}
+  }
+})(Breadcrumbs)
+
+const SHOW_ICON = false
+const Crumb = ({node}) => {
+  return (
+    <div className='crumb'>
+      {SHOW_ICON?<i className={node.isDir ? 'fa fa-folder-o' : 'fa fa-file-o'} style={{marginRight:'5px'}}></i>:null}
+      <div className='crumb-node-name'>{node.name}</div>
+    </div>
+  )
+}
+
+export default Breadcrumbs

app/components/TopBar/index.jsx

@@ -1,12 +1,13 @@
 /* @flow weak */
 import React, { Component } from 'react'
-import Menu from '../Menu'
 import MenuBar from '../MenuBar'
+import Breadcrumbs from '../Breadcrumbs'
 
 const TopBar = () => {
   return (
     <div className='top-bar'>
       <MenuBar />
+      <Breadcrumbs />
     </div>
   )
 }

app/containers/IDE.jsx

@@ -14,7 +14,7 @@ class IDE extends Component {
     super(props)
   }
 
-  componentDidMount () {
+  componentWillMount () {
     api.setupWorkspace().then(_config => {
       Object.assign(config, _config)
     })

app/styles/components/Breadcrumbs.styl

@@ -0,0 +1,42 @@
+$breadcrumbs-height = 24px;
+
+.breadcrumbs {
+  display: flex;
+  height: $breadcrumbs-height + 1px;
+  border-bottom: 1px solid transparent;
+}
+
+.crumb-node-name {
+  line-height: $breadcrumbs-height;
+}
+
+.crumb {
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+  padding-right: $breadcrumbs-height*0.25 + 10px;
+  position: relative;
+
+  &:before, &:after {
+    display: block;
+    content: '';
+    border-style: solid;
+    border-color: transparent;
+    border-right: none;
+  }
+  &:before {
+    absolute(right 0 top -1px)
+    border-top-width: $breadcrumbs-height*0.5 + 1px;
+    border-bottom-width: $breadcrumbs-height*0.5 + 1px;
+    border-left-width: $breadcrumbs-height*0.25 + 1px;
+  }
+  &:after {
+    absolute(right 1px top 0px)
+    border-top-width: $breadcrumbs-height*0.5
+    border-bottom-width: $breadcrumbs-height*0.5
+    border-left-width: $breadcrumbs-height*0.25;
+  }
+  &:last-child {
+    &:before, &:after {display: none}
+  }
+}

app/styles/components/Menu.styl

@@ -85,47 +85,3 @@
   position: fixed;
   z-index: z(context-menu);
 }
-
-
-// MenuBar
-.menu-bar {
-  display: flex;
-  background-color: #fafafa;
-  border-bottom: 1px solid transparent;
-}
-
-.menu-bar-item {
-  position: relative;
-  > .menu {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}
-
-.menu-bar-item-container {
-  padding: 4px 12px;
-  position: relative;
-  height: 100%;
-  z-index: z(menu-bar-item-container);
-  &.active {
-    background-color: $menu-background-color-active;
-    color: #fff;
-  }
-}
-
-.menu-bar-item.coding-logo {
-  align-self: stretch;
-  width: 36px;
-
-  .menu-bar-item-container {
-    &:after {
-      codingMonkeyBackground;
-      absolute(0);
-      content: ' ';
-    }
-    &.active:after {
-      fill: #fff;
-    }
-  }
-}
-

app/styles/components/MenuBar.styl

@@ -0,0 +1,41 @@
+// MenuBar
+.menu-bar {
+  display: flex;
+  background-color: #fafafa;
+  border-bottom: 1px solid transparent;
+}
+
+.menu-bar-item {
+  position: relative;
+  > .menu {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+.menu-bar-item-container {
+  padding: 4px 12px;
+  position: relative;
+  height: 100%;
+  z-index: z(menu-bar-item-container);
+  &.active {
+    background-color: $menu-background-color-active;
+    color: #fff;
+  }
+}
+
+.menu-bar-item.coding-logo {
+  align-self: stretch;
+  width: 36px;
+
+  .menu-bar-item-container {
+    &:after {
+      codingMonkeyBackground;
+      absolute(0);
+      content: ' ';
+    }
+    &.active:after {
+      fill: #fff;
+    }
+  }
+}

app/styles/components/index.styl

@@ -1,4 +1,6 @@
 @import "./Menu";
+@import "./MenuBar";
+@import "./Breadcrumbs";
 @import "./PaneView";
 @import "./TabView";
 @import "./FileTree";

app/styles/mixins.styl

@@ -82,3 +82,13 @@ margin-tb($margin) {
   margin-top: $margin;
   margin-bottom: $margin;
 }
+
+padding-lr($padding) {
+  padding-left: $padding;
+  padding-right: $padding;
+}
+
+padding-tb($padding) {
+  padding-top: $padding;
+  padding-bottom: $padding;
+}

app/styles/themes/dark/styles/bars.styl

@@ -7,3 +7,17 @@
 .status-bar {
   border-color: $base-border-color;
 }
+
+.breadcrumbs {
+  background-color: $menu-background-color;
+  border-color: $base-border-color;
+  .crumb {
+    background-color: $menu-background-color;
+    &:before {
+      border-left-color: $base-border-color;
+    }
+    &:after {
+      border-left-color: $menu-background-color;
+    }
+  }
+}

app/styles/themes/light/styles/bars.styl

@@ -1,9 +1,23 @@
 .menu-bar {
-  background-color: gray(100%);
+  background-color: $menu-background-color;
   border-color: $base-border-color;
   color: gray(15%);
 }
 
 .status-bar {
   border-color: $base-border-color;
 }
+
+.breadcrumbs {
+  background-color: $menu-background-color;
+  border-color: $base-border-color;
+  .crumb {
+    background-color: $menu-background-color;
+    &:before {
+      border-left-color: $base-border-color;
+    }
+    &:after {
+      border-left-color: $menu-background-color;
+    }
+  }
+}

app/styles/themes/light/styles/variables.styl

@@ -15,7 +15,7 @@ $base-border-color     = darken($base-background-color, 8%);
 $panel-background-color = $base-background-color;
 $panel-border-color     = $base-border-color;
 
-$menu-background-color  = $base-background-color;
+$menu-background-color  = white;
 
 // tabs
 $tab-bar-background-color    = $base-background-color;