Add git-status color in file tree and breadcrumbs

app/api/fileAPI.js

@@ -63,3 +63,14 @@ export function deleteFile (path) {
     }
   })
 }
+
+export function searchFile (value, includeNonProjectItems = false) {
+  return request({
+    method: 'POST',
+    url: `/workspaces/${config.spaceKey}/search`,
+    form: {
+      keyword: value,
+      includeNonProjectItems: includeNonProjectItems
+    }
+  })
+}

app/commands/commandBindings/misc.js

@@ -10,6 +10,10 @@ export default {
     $d(Modal.showModal('CommandPalette'))
   },
 
+  'global:file_palette': c => {
+    $d(Modal.showModal('FilePalette'))
+  },
+
   'global:show_settings': c => {
     $d(Modal.showModal({type: 'Settings', position: 'center'}))
   },

app/commands/keymaps.js

@@ -5,6 +5,7 @@ export default {
   'cmd+shift+c': 'git:commit',
   'esc': 'modal:dismiss',
   'cmd+shift+p': 'global:command_palette',
+  'cmd+p': 'global:file_palette',
   'cmd+alt+1':       'editor:split_pane_1',
   'cmd+alt+shift+1': 'editor:split_pane_1',
   'cmd+alt+2':       'editor:split_pane_vertical_2',

app/components/Breadcrumbs/index.jsx

@@ -4,14 +4,15 @@ import { connect } from 'react-redux'
 import config from '../../config'
 import * as Tab from '../Tab'
 
-let Breadcrumbs = ({currentPath}) => {
+let Breadcrumbs = ({currentPath, fileNode}) => {
   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('/'),
+      gitStatus: fileNode.gitStatus,
       isDir: (idx !== pathComps.length - 1)   // last pathComp isDir === false
     }
   }, [])
@@ -24,20 +25,28 @@ let Breadcrumbs = ({currentPath}) => {
 }
 Breadcrumbs = connect(state => {
   const activeTab = Tab.selectors.getActiveTab(state.TabState)
+  let currentPath = ''
+  let fileNode
   if (activeTab) {
-    return { currentPath: activeTab.path || '' }
-  } else {
-    return { currentPath: '' }
+    currentPath = activeTab.path || ''
   }
+  if (currentPath != '') {
+    fileNode = state.FileTreeState.findNodeByPath(currentPath)
+  }
+  return { currentPath, fileNode }
 })(Breadcrumbs)
 
-const SHOW_ICON = false
+const SHOW_ICON = true
 const Crumb = ({node}) => {
   const props = { name: node.name }
+  let fileClassName = 'crumb-node-name'
+  if (!node.isDir) {
+    fileClassName = `crumb-node-name git-${node.gitStatus ? node.gitStatus.toLowerCase() : 'none'}`
+  }
   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>
+      {SHOW_ICON ? <i className={node.isDir ? 'fa fa-folder-o' : 'fa fa-file-o'} style={{marginRight:'5px'}}></i>:null}
+      <div className={fileClassName}>{node.name}</div>
       <div className='crumb-node-name'>{extension`siderBar${props}`}</div>
     </div>
   )

app/components/FileTree/index.jsx

@@ -138,7 +138,9 @@ class FileTreeNode extends Component {
               'fa fa-file-o': !node.isDir
             })}></i>
           </span>
-          <span className="filetree-node-label">
+          <span className={
+            `filetree-node-label git-${node.gitStatus ? node.gitStatus.toLowerCase() : 'none'}`
+          }>
             {node.name || 'Project'}
           </span>
           <div className="filetree-node-bg"></div>

app/components/Git/actions.js

@@ -2,7 +2,7 @@
 import _ from 'lodash'
 import api from '../../api'
 import { notify, NOTIFY_TYPE } from '../Notification/actions'
-import { showModal, dismissModal, updateModal } from '../Modal/actions'
+import { showModal, addModal, dismissModal, updateModal } from '../Modal/actions'
 import { createAction } from 'redux-actions'
 
 export const GIT_STATUS = 'GIT_STATUS'
@@ -244,7 +244,7 @@ export const toggleStaging = createAction(GIT_STATUS_STAGE_NODE, node => node)
 export const GIT_MERGE = 'GIT_MERGE'
 export const gitMerge = createAction(GIT_MERGE)
 export function mergeFile (path) {
-  return dispatch => dispatch(showModal('GitMergeFile', {path}  ))
+  return dispatch => dispatch(addModal('GitMergeFile', {path}  ))
 }
 
 export function getConflicts ({path}) {
@@ -391,7 +391,7 @@ export function gitCommitDiff ({ref, title, oldRef}) {
       return file
     })
     dispatch(updateCommitDiff({files: files, ref, title, oldRef}))
-    dispatch(showModal('GitCommitDiff'))
+    dispatch(addModal('GitCommitDiff'))
   }).catch(res => {
     console.error(res)
     dispatch(notify({

app/components/Modal/FilePalette/component.jsx

@@ -0,0 +1,150 @@
+/* @flow weak */
+import _ from 'lodash'
+import React, { Component } from 'react'
+import api from '../../../api'
+import store, { dispatch as $d } from '../../../store'
+import * as Tab from '../../Tab'
+import cx from 'classnames'
+import { dispatchCommand } from '../../../commands/lib/keymapper'
+
+const debounced = _.debounce(function (func) { func() }, 1000)
+
+class FilePalette extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      items: [],
+      inputValue: '',
+      selectedItemIndex: 0,
+      includeNonProjectItems: false
+    }
+    this.handleExcludeChange = this.handleExcludeChange.bind(this)
+    this.handleInputChange = this.handleInputChange.bind(this)
+    this.renderItem = this.renderItem.bind(this)
+    this.searchFiles = this.searchFiles.bind(this)
+    this.openFile = this.openFile.bind(this)
+  }
+
+  handleExcludeChange (e) {
+    this.setState({
+      includeNonProjectItems: e.target.checked
+    })
+    debounced(this.searchFiles)
+  }
+
+  handleInputChange (e) {
+    this.setState({
+      inputValue: e.target.value
+    })
+    debounced(this.searchFiles)
+  }
+
+  searchFiles () {
+    const value = this.state.inputValue
+    api.searchFile(value, this.state.includeNonProjectItems)
+    .then((res) => {
+      this.setState({
+        items: res
+      })
+    })
+  }
+
+  openFile (itemIdx) {
+    let node
+    if (itemIdx) {
+      node = this.state.items[itemIdx]
+    } else {
+      node = this.state.items[this.state.selectedItemIndex]
+    }
+    if (!node) {
+      return
+    }
+    let splitPattern = /\/(.*\/)?(.*)/
+    let matches = node.path.match(splitPattern)
+    let directory
+    if (matches[1]) {
+      directory = "#{config.projectName}/#{_.trimEnd(matches[1], '/')}"
+    }
+
+    let filename = matches[2]
+
+    api.readFile(node.path)
+    .then(data => {
+      $d(Tab.actions.createTab({
+        id: _.uniqueId('tab_'),
+        type: 'editor',
+        title: node.name || filename,
+        path: node.path,
+        content: {
+          body: data.content,
+          path: node.path,
+          contentType: node.contentType
+        }
+      }))
+    })
+    dispatchCommand('modal:dismiss')
+  }
+
+  renderItem (item, itemIdx) {
+    if (this.state.inputValue === '') return <i>{item.path}</i>
+    const that = this
+    var itemElements = item.path.split('').map( (char, idx) => {
+      return (this.state.inputValue.toLowerCase().indexOf(char) > -1 || this.state.inputValue.toUpperCase().indexOf(char) > -1)
+        ? <em key={idx}>{char}</em>
+        : <i key={idx}>{char}</i>
+    })
+    return itemElements
+  }
+
+  render () {
+    return (
+      <div className="modal-content">
+        <input
+          type="text"
+          className="command-palette-input"
+          onChange={this.handleInputChange}
+          autoFocus
+          onKeyDown={this._onKeyDown}
+        />
+        <input
+          type="checkbox"
+          id="includeNonProjectItems"
+          checked={this.state.includeNonProjectItems}
+          onChange={this.handleExcludeChange}
+        />
+        <label htmlFor="includeNonProjectItems">
+          Include non-project items
+        </label>
+
+        <ul className='command-palette-items'>
+          {this.state.items.map( (item, itemIdx) =>
+            <li className={cx({selected: itemIdx == this.state.selectedItemIndex})}
+              onClick={e=>this.openFile(itemIdx)}
+              key={itemIdx} >{ this.renderItem(item, itemIdx) }</li>
+          )}
+        </ul>
+      </div>
+    )
+  }
+
+  _onKeyDown = e => {
+    var idx = this.state.selectedItemIndex
+    var len = this.state.items.length
+
+    switch (e.keyCode) {
+      case 13: /* enter */
+        this.openFile()
+        break
+      case 40: /* down */
+        if (++idx == len) idx = len - 1
+        this.setState({selectedItemIndex:idx})
+        break
+      case 38: /* up */
+        if (--idx < 0) idx = 0
+        this.setState({selectedItemIndex:idx})
+        break
+    }
+  }
+}
+
+export default FilePalette

app/components/Modal/FilePalette/index.js

@@ -0,0 +1,2 @@
+/* @flow weak */
+export FilePalette from './component'

app/components/Modal/actions.js

@@ -17,6 +17,20 @@ export const showModal = promiseActionMixin(
   })
 )
 
+export const MODAL_ADD = 'MODAL_ADD'
+export const addModal = promiseActionMixin(
+  createAction(MODAL_ADD, (modalConfig, content) => {
+    switch (typeof modalConfig) {
+      case 'object':
+        return {...modalConfig, id: _.uniqueId()}
+      case 'string':
+        return {type: modalConfig, id: _.uniqueId(), content}
+      default:
+        return {type: ''}
+    }
+  })
+)
+
 export const MODAL_DISMISS = 'MODAL_DISMISS'
 export const dismissModal = createAction(MODAL_DISMISS)
 

app/components/Modal/index.jsx

@@ -7,6 +7,7 @@ import {
   Confirm,
   SettingsView,
   CommandPalette,
+  FilePalette,
   GitCommitView,
   GitStashView,
   GitUnstashView,
@@ -104,6 +105,9 @@ class Modal extends Component {
         case 'CommandPalette':
           return <CommandPalette {...this.props} />
 
+        case 'FilePalette':
+          return <FilePalette {...this.props} />
+
         case 'Settings':
           return <SettingsView {...this.props} />
         case 'Extensions':

app/components/Modal/modals/index.js

@@ -3,6 +3,7 @@ export Prompt from './Prompt';
 export Confirm from './Confirm';
 export {GitCommitView} from '../../Git';
 export {CommandPalette} from '../../../commands';
+export {FilePalette} from '../FilePalette';
 export GitStashView from '../../Git/modals/stash';
 export GitUnstashView from '../../Git/modals/unstash';
 export GitResetView from '../../Git/modals/reset';

app/components/Modal/reducer.js

@@ -2,6 +2,7 @@
 import { handleActions } from 'redux-actions'
 import {
   MODAL_SHOW,
+  MODAL_ADD,
   MODAL_DISMISS,
   MODAL_UPDATE
 } from './actions'
@@ -15,6 +16,20 @@ const baseModal = {
 
 const ModalReducer = handleActions({
   [MODAL_SHOW]: (state, {payload: modalConfig, meta}) => {
+    let newModal = {
+      ...baseModal,
+      isActive: true,
+      ...modalConfig,
+      meta
+    }
+    return {
+      ...state,
+      stack: [newModal]
+    }
+  },
+
+  [MODAL_ADD]: (state, {payload: modalConfig, meta}) => {
+    console.log('MODAL_ADD')
     let newModal = {
       ...baseModal,
       isActive: true,

app/styles/components/Git.styl

@@ -75,3 +75,42 @@
     padding-right: 20px;
   }
 }
+
+.git-untracked {
+  color: $untracked-color;
+}
+.git-confliction {
+  color: $confliction-color;
+}
+.git-modified {
+  color: $modified-color;
+}
+.git-modify {
+  color: $modified-color;
+}
+.git-changed {
+  color: $modified-color;
+}
+.git-rename {
+  color: $modified-color;
+}
+.git-copy {
+  color: $modified-color;
+}
+
+.git-added {
+  color: $added-color;
+}
+.git-add {
+  color: $added-color;
+}
+.git-missing {
+  text-decoration: line-through;
+}
+
+.git-removed {
+  text-decoration: line-through;
+}
+.git-delete {
+  text-decoration: line-through;
+}