jazz up the project browser

plugins/project/project.coffee

@@ -1,20 +1,28 @@
 $ = require 'jquery'
 _ = require 'underscore'
-{Chrome, File, Dir} = require 'osx'
-Editor = require 'editor'
 
 {Chrome, Dir, File, Process} = require 'osx'
-{bindKey} = require 'editor'
+
+Editor  = require 'editor'
+bindKey = Editor.bindKey
 
 exports.init = ->
   @html = require "project/project.html"
 
   bindKey 'toggleProjectDrawer', 'Command-Ctrl-N', (env) =>
     @toggle()
+  
+  Editor.ace.on 'open', =>
+    @reload() if @dir? and Process.cwd() isnt @dir
 
-  $('#project .file').live 'click', (event) =>
+  $('#project .cwd').live 'click', (event) =>
+    Editor.open @dir.replace _.last(@dir.split '/'), ''
+    
+  $('#project li').live 'click', (event) =>
+    $('#project .active').removeClass 'active'
     el = $(event.currentTarget)
-    path =  decodeURIComponent el.attr 'path'
+    el.addClass 'active'
+    path = decodeURIComponent el.attr 'path'
     Editor.open path
 
 exports.toggle = ->
@@ -27,8 +35,10 @@ exports.toggle = ->
   @showing = not @showing
 
 exports.reload = ->
-  dir = OSX.NSFileManager.defaultManager.currentDirectoryPath
-  $('#project .cwd').text dir
+  @dir = dir = Process.cwd()
+  $('#project .cwd').text _.last dir.split '/'
+  
+  $('#project li').remove()
 
   files = Dir.list dir
   listItems = _.map files, (path) ->

plugins/project/project.html

@@ -2,29 +2,47 @@
   #project {
     min-width: 200px;
     height: 100%;
-    background-color: white;
+    background-color: #DDE3EA;
+    color: #000;
+    border-right: 1px solid #B4B4B4;
+    cursor: default;    
+    -webkit-user-select: none;
+  }
+  
+  #project .cwd {
+    padding-top: 5px;
+    padding-left: 5px;
+    font-weight: bold; 
+    color: #708193;
+    text-transform: uppercase;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   }
 
   #project ul {
     margin: 0;
-    padding: 0;
+    padding-top: 2px;
   }
 
   #project li {
-    list-style-type: none;
+    padding: 0 10px;    
+    height: 20px;
+    line-height: 20px;    
   }
 
   #project li.file {
-    color: red;
+    font-weight: normal;
   }
 
   #project li.dir {
-    color: blue;
-  }
-
-  #project li:hover {
-    background-color: grey;
+    font-weight: bold;
   }
+  
+  #project li.active {
+    background-image: -webkit-gradient(linear,0% 0,0% 100%,from(#BCCBEB),to(#8094BB));
+    border-top: 1px solid #A0AFCD;
+    color: #fff;
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+  }  
 </style>
 
 <div id='project'>