Merge pull request #113 from github/tree-massage

Cleaning up the tree view style

src/app/directory.coffee

@@ -10,7 +10,7 @@ class Directory
   constructor: (@path) ->
 
   getBaseName: ->
-    fs.base(@path) + '/'
+    fs.base(@path)
 
   getPath: -> @path
 

src/packages/tree-view/spec/tree-view-spec.coffee

@@ -26,18 +26,18 @@ describe "TreeView", ->
 
   describe ".initialize(project)", ->
     it "renders the root of the project and its contents alphabetically with subdirectories first in a collapsed state", ->
-      expect(treeView.root.find('> .header .disclosure-arrow')).toHaveText('▾')
-      expect(treeView.root.find('> .header .name')).toHaveText('tree-view/')
+      expect(treeView.root.find('> .header .disclosure-arrow')).not.toHaveClass('expanded')
+      expect(treeView.root.find('> .header .name')).toHaveText('tree-view')
 
       rootEntries = treeView.root.find('.entries')
       subdir0 = rootEntries.find('> li:eq(0)')
-      expect(subdir0.find('.disclosure-arrow')).toHaveText('▸')
-      expect(subdir0.find('.name')).toHaveText('dir1/')
+      expect(subdir0).not.toHaveClass('expanded')
+      expect(subdir0.find('.name')).toHaveText('dir1')
       expect(subdir0.find('.entries')).not.toExist()
 
       subdir2 = rootEntries.find('> li:eq(1)')
-      expect(subdir2.find('.disclosure-arrow')).toHaveText('▸')
-      expect(subdir2.find('.name')).toHaveText('dir2/')
+      expect(subdir2).not.toHaveClass('expanded')
+      expect(subdir2.find('.name')).toHaveText('dir2')
       expect(subdir2.find('.entries')).not.toExist()
 
       expect(rootEntries.find('> .file:contains(tree-view.js)')).toExist()
@@ -209,25 +209,25 @@ describe "TreeView", ->
 
   describe "when a directory's disclosure arrow is clicked", ->
     it "expands / collapses the associated directory", ->
-      subdir = treeView.root.find('.entries > li:contains(dir1/)').view()
+      subdir = treeView.root.find('.entries > li:contains(dir1)').view()
 
-      expect(subdir.disclosureArrow).toHaveText('▸')
+      expect(subdir).not.toHaveClass('expanded')
       expect(subdir.find('.entries')).not.toExist()
 
       subdir.disclosureArrow.click()
 
-      expect(subdir.disclosureArrow).toHaveText('▾')
+      expect(subdir).toHaveClass('expanded')
       expect(subdir.find('.entries')).toExist()
 
       subdir.disclosureArrow.click()
-      expect(subdir.disclosureArrow).toHaveText('▸')
+      expect(subdir).not.toHaveClass('expanded')
       expect(subdir.find('.entries')).not.toExist()
 
     it "restores the expansion state of descendant directories", ->
-      child = treeView.root.find('.entries > li:contains(dir1/)').view()
+      child = treeView.root.find('.entries > li:contains(dir1)').view()
       child.disclosureArrow.click()
 
-      grandchild = child.find('.entries > li:contains(sub-dir1/)').view()
+      grandchild = child.find('.entries > li:contains(sub-dir1)').view()
       grandchild.disclosureArrow.click()
 
       treeView.root.disclosureArrow.click()
@@ -235,16 +235,16 @@ describe "TreeView", ->
       treeView.root.disclosureArrow.click()
 
       # previously expanded descendants remain expanded
-      expect(treeView.root.find('> .entries > li:contains(dir1/) > .entries > li:contains(sub-dir1/) > .entries').length).toBe 1
+      expect(treeView.root.find('> .entries > li:contains(dir1) > .entries > li:contains(sub-dir1) > .entries').length).toBe 1
 
       # collapsed descendants remain collapsed
-      expect(treeView.root.find('> .entries > li.contains(dir2/) > .entries')).not.toExist()
+      expect(treeView.root.find('> .entries > li.contains(dir2) > .entries')).not.toExist()
 
     it "when collapsing a directory, removes change subscriptions from the collapsed directory and its descendants", ->
-      child = treeView.root.entries.find('li:contains(dir1/)').view()
+      child = treeView.root.entries.find('li:contains(dir1)').view()
       child.disclosureArrow.click()
 
-      grandchild = child.entries.find('li:contains(sub-dir1/)').view()
+      grandchild = child.entries.find('li:contains(sub-dir1)').view()
       grandchild.disclosureArrow.click()
 
       expect(treeView.root.directory.subscriptionCount()).toBe 1
@@ -359,7 +359,7 @@ describe "TreeView", ->
 
         beforeEach ->
           nested = treeView.root.find('.directory:eq(2)').view()
-          expect(nested.find('.header').text()).toContain 'nested/'
+          expect(nested.find('.header').text()).toContain 'nested'
           nested.expand()
           nested2 = nested.entries.find('.entry:last').view()
           nested2.click()
@@ -486,7 +486,7 @@ describe "TreeView", ->
 
         entryCount = treeView.find(".entry").length
         _.times entryCount, -> treeView.moveDown()
-        expect(treeView.scrollBottom()).toBe treeView.prop('scrollHeight')
+        expect(treeView.scrollBottom() + 2).toBe treeView.prop('scrollHeight')
 
         _.times entryCount, -> treeView.moveUp()
         expect(treeView.scrollTop()).toBe 0
@@ -668,7 +668,7 @@ describe "TreeView", ->
               expect(rootView.getActiveEditor().getPath()).not.toBe newPath
               expect(treeView).toMatchSelector(':focus')
               expect(rootView.getActiveEditor().isFocused).toBeFalsy()
-              expect(dirView.find('.directory.selected:contains(new/)').length).toBe(1)
+              expect(dirView.find('.directory.selected:contains(new)').length).toBe(1)
 
             it "selects the created directory", ->
               treeView.attachToDom()
@@ -681,7 +681,7 @@ describe "TreeView", ->
               expect(rootView.getActiveEditor().getPath()).not.toBe newPath
               expect(treeView).toMatchSelector(':focus')
               expect(rootView.getActiveEditor().isFocused).toBeFalsy()
-              expect(dirView.find('.directory.selected:contains(new2/)').length).toBe(1)
+              expect(dirView.find('.directory.selected:contains(new2)').length).toBe(1)
 
           describe "when a file or directory already exists at the given path", ->
             it "shows an error message and does not close the dialog", ->

src/packages/tree-view/src/directory-view.coffee

@@ -9,8 +9,9 @@ class DirectoryView extends View
   @content: ({directory, isExpanded} = {}) ->
     @li class: 'directory entry', =>
       @div outlet: 'header', class: 'header', =>
-        @span '▸', class: 'disclosure-arrow', outlet: 'disclosureArrow'
+        @span class: 'disclosure-arrow', outlet: 'disclosureArrow'
         @span directory.getBaseName(), class: 'name', outlet: 'directoryName'
+      @span "", class: 'highlight'
 
   directory: null
   entries: null
@@ -47,7 +48,6 @@ class DirectoryView extends View
   expand: ->
     return if @isExpanded
     @addClass('expanded')
-    @disclosureArrow.text('▾')
     @buildEntries()
     @watchEntries()
     @deserializeEntryExpansionStates(@entryStates) if @entryStates?
@@ -57,7 +57,6 @@ class DirectoryView extends View
   collapse: ->
     @entryStates = @serializeEntryExpansionStates()
     @removeClass('expanded')
-    @disclosureArrow.text('▸')
     @unwatchEntries()
     @entries.remove()
     @entries = null

src/packages/tree-view/src/file-view.coffee

@@ -1,16 +1,50 @@
 {View, $$} = require 'space-pen'
 $ = require 'jquery'
 Git = require 'git'
+fs = require 'fs'
+_ = require 'underscore'
 
 module.exports =
 class FileView extends View
+
+  @COMPRESSED_EXTENSIONS: [
+    '.gz'
+    '.jar'
+    '.tar'
+    '.zip'
+  ]
+
+  @IMAGE_EXTENSIONS: [
+    '.gif'
+    '.jpeg'
+    '.jpg'
+    '.png'
+  ]
+
+  @PDF_EXTENSIONS: [
+    '.pdf'
+  ]
+
   @content: (file) ->
-    @li file.getBaseName(), class: 'file entry'
+    @li class: 'file entry', =>
+      @span file.getBaseName(), class: 'name', outlet: 'fileName'
+      @span "", class: 'highlight'
 
   file: null
 
   initialize: (@file) ->
-    @addClass('ignored') if new Git(@getPath()).isPathIgnored(@getPath())
+    path = @getPath()
+    extension = fs.extension(path)
+    if _.contains(FileView.COMPRESSED_EXTENSIONS, extension)
+      @fileName.addClass('compressed-name')
+    else if _.contains(FileView.IMAGE_EXTENSIONS, extension)
+      @fileName.addClass('image-name')
+    else if _.contains(FileView.PDF_EXTENSIONS, extension)
+      @fileName.addClass('pdf-name')
+    else
+      @fileName.addClass('text-name')
+
+    @addClass('ignored') if new Git(path).isPathIgnored(path)
 
   getPath: ->
     @file.path

src/packages/tree-view/src/tree-view.coffee

@@ -27,7 +27,7 @@ class TreeView extends ScrollView
     @instance.serialize()
 
   @content: (rootView) ->
-    @div class: 'tree-view tool-panel', tabindex: -1
+    @ol class: 'tree-view tool-panel', tabindex: -1
 
   @deserialize: (state, rootView) ->
     treeView = new TreeView(rootView)