From 01ad97e7b011684cc9fefe0af24b648cfe6ded73 Mon Sep 17 00:00:00 2001
From: Kevin Sawicki <kevin@github.com>
Date: Wed, 1 May 2013 16:46:22 -0700
Subject: [PATCH] Show ellipsis for long paths in fuzzy finder

Previously the directory was shown after the file name
and it would wrap if too long causing inconsistent row
heights.

Now the full path is shown below the name in a smaller font
and both the path and file are set to overflow with an ellipsis.
---
 .../fuzzy-finder/lib/fuzzy-finder-view.coffee |  5 ++---
 .../spec/fuzzy-finder-spec.coffee             |  6 +++---
 .../stylesheets/fuzzy-finder.less             | 21 +++++++++++++++----
 static/overlay.less                           |  2 +-
 themes/atom-dark-ui/select-list.less          |  4 ++--
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/packages/fuzzy-finder/lib/fuzzy-finder-view.coffee b/src/packages/fuzzy-finder/lib/fuzzy-finder-view.coffee
index 0080f7bbb..56d6074d8 100644
--- a/src/packages/fuzzy-finder/lib/fuzzy-finder-view.coffee
+++ b/src/packages/fuzzy-finder/lib/fuzzy-finder-view.coffee
@@ -59,9 +59,8 @@ class FuzzyFinderView extends SelectList
         else
           typeClass = 'text-name'
 
-        @span fsUtils.base(path), class: "file #{typeClass}"
-        if folder = project.relativize(fsUtils.directory(path))
-          @span " - #{folder}/", class: 'directory'
+        @div fsUtils.base(path), class: "file #{typeClass}"
+        @div project.relativize(path), class: 'path'
 
   openPath: (path) ->
     rootView.open(path, {@allowActiveEditorChange}) if path
diff --git a/src/packages/fuzzy-finder/spec/fuzzy-finder-spec.coffee b/src/packages/fuzzy-finder/spec/fuzzy-finder-spec.coffee
index 15035a371..f9efdf36b 100644
--- a/src/packages/fuzzy-finder/spec/fuzzy-finder-spec.coffee
+++ b/src/packages/fuzzy-finder/spec/fuzzy-finder-spec.coffee
@@ -137,13 +137,13 @@ describe 'FuzzyFinder', ->
           rootView.attachToDom()
           rootView.open 'sample-with-tabs.coffee'
           rootView.trigger 'fuzzy-finder:toggle-buffer-finder'
-          expect(_.pluck(finderView.list.children('li'), 'outerText')).toEqual ['sample.txt', 'sample.js', 'sample-with-tabs.coffee']
+          expect(_.pluck(finderView.list.find('li > div.file'), 'outerText')).toEqual ['sample.txt', 'sample.js', 'sample-with-tabs.coffee']
           rootView.trigger 'fuzzy-finder:toggle-buffer-finder'
 
           rootView.open 'sample.txt'
           rootView.trigger 'fuzzy-finder:toggle-buffer-finder'
 
-          expect(_.pluck(finderView.list.children('li'), 'outerText')).toEqual ['sample-with-tabs.coffee', 'sample.js', 'sample.txt']
+          expect(_.pluck(finderView.list.find('li > div.file'), 'outerText')).toEqual ['sample-with-tabs.coffee', 'sample.js', 'sample.txt']
           expect(finderView.list.children().first()).toHaveClass 'selected'
 
         it "serializes the list of paths and their last opened time", ->
@@ -182,7 +182,7 @@ describe 'FuzzyFinder', ->
           rootView.open 'sample.js'
           rootView.getActivePane().splitRight()
           rootView.trigger 'fuzzy-finder:toggle-buffer-finder'
-          expect(_.pluck(finderView.list.children('li'), 'outerText')).toEqual ['sample.js']
+          expect(_.pluck(finderView.list.find('li > div.file'), 'outerText')).toEqual ['sample.js']
 
     describe "when a path selection is confirmed", ->
       [editor1, editor2] = []
diff --git a/src/packages/fuzzy-finder/stylesheets/fuzzy-finder.less b/src/packages/fuzzy-finder/stylesheets/fuzzy-finder.less
index 3c8a4f3f1..8ab705937 100644
--- a/src/packages/fuzzy-finder/stylesheets/fuzzy-finder.less
+++ b/src/packages/fuzzy-finder/stylesheets/fuzzy-finder.less
@@ -1,8 +1,21 @@
-.fuzzy-finder .directory {
+.fuzzy-finder {
+
+  &.select-list li {
+    padding: 5px 10px 5px 10px;
+  }
+
+  .path, .file {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+.fuzzy-finder .path {
   color: rgba(0, 0, 0, 0.5);
-  word-break: break-word;
-  margin-left: 5px;
-  line-height: 150%;
+  margin-top: -2px;
+  margin-left: 26px;
+  font-size: .9em;
 }
 
 .fuzzy-finder .file:before {
diff --git a/static/overlay.less b/static/overlay.less
index 60bd0a88f..60e57628d 100644
--- a/static/overlay.less
+++ b/static/overlay.less
@@ -40,4 +40,4 @@
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-}
\ No newline at end of file
+}
diff --git a/themes/atom-dark-ui/select-list.less b/themes/atom-dark-ui/select-list.less
index 0413d192a..4af644466 100644
--- a/themes/atom-dark-ui/select-list.less
+++ b/themes/atom-dark-ui/select-list.less
@@ -36,7 +36,7 @@
     }
 
     .right,
-    .directory {
+    .path {
       color: #777;
     }
 
@@ -45,7 +45,7 @@
     }
 
     .selected .right,
-    .selected .directory {
+    .selected .path {
       color: #ccc;
     }