From 52d60df2726e2d65b80a919df110a619779bebfa Mon Sep 17 00:00:00 2001
From: Corey Johnson <cj@github.com>
Date: Wed, 18 Jul 2012 09:22:32 -0700
Subject: [PATCH] Stylize command panel preview

---
 spec/extensions/command-panel-spec.coffee        |  5 +++--
 src/extensions/command-panel/operation.coffee    |  7 ++++++-
 src/extensions/command-panel/preview-item.coffee |  8 +++++++-
 static/command-panel.css                         | 10 ++++++----
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/spec/extensions/command-panel-spec.coffee b/spec/extensions/command-panel-spec.coffee
index 97ff029f3..f14ea5e2b 100644
--- a/spec/extensions/command-panel-spec.coffee
+++ b/spec/extensions/command-panel-spec.coffee
@@ -120,7 +120,7 @@ describe "CommandPanel", ->
         expect(buffer.lineForRow(1)).toMatch /var torta/
 
     describe "when the command returns operations to be previewed", ->
-      fit "displays a preview of the operations above the mini-editor", ->
+      it "displays a preview of the operations above the mini-editor", ->
         rootView.attachToDom()
         editor.remove()
 
@@ -135,7 +135,8 @@ describe "CommandPanel", ->
           expect(commandPanel.previewList).toBeVisible()
           previewItem = commandPanel.previewList.find("li:contains(dir/a)").view()
           expect(previewItem.path.text()).toBe "dir/a"
-          expect(previewItem.preview.text()).toMatch /a+/
+          expect(previewItem.preview.text()).toBe "aaa bbb"
+          expect(previewItem.preview.find(".match").text()).toBe "aaa"
 
     describe "if the command is malformed", ->
       it "adds and removes an error class to the command panel and does not close it", ->
diff --git a/src/extensions/command-panel/operation.coffee b/src/extensions/command-panel/operation.coffee
index 56ebc3483..e2efc4f54 100644
--- a/src/extensions/command-panel/operation.coffee
+++ b/src/extensions/command-panel/operation.coffee
@@ -18,7 +18,12 @@ class Operation
 
   preview: ->
     range = @anchorRange.getBufferRange()
-    @buffer.getTextInRange(range)
+    line = @buffer.lineForRow(range.start.row)
+    prefix = line[0...range.start.column]
+    match = line[range.start.column...range.end.column]
+    suffix = line[range.end.column..]
+
+    {prefix, suffix, match}
 
   destroy: ->
     @buffer.release()
diff --git a/src/extensions/command-panel/preview-item.coffee b/src/extensions/command-panel/preview-item.coffee
index 30f70a55b..dc72d2371 100644
--- a/src/extensions/command-panel/preview-item.coffee
+++ b/src/extensions/command-panel/preview-item.coffee
@@ -3,7 +3,13 @@
 module.exports =
 class PreviewItem extends View
   @content: (operation) ->
+    {prefix, suffix, match} = operation.preview()
+
     @li =>
       @span operation.getPath(), outlet: "path", class: "path"
-      @span operation.preview(), outlet: "preview", class: "preview"
+      @span outlet: "preview", class: "preview", =>
+        @span prefix
+        @span match, class: 'match'
+        @span suffix
+
 
diff --git a/static/command-panel.css b/static/command-panel.css
index ed6d89e4b..89ffd8dd0 100644
--- a/static/command-panel.css
+++ b/static/command-panel.css
@@ -9,20 +9,22 @@
 .command-panel .preview-list {
   max-height: 300px;
   overflow: auto;
+  padding-bottom: 3px;
 }
 
 .command-panel .preview-list .path{
-  padding-left: 1em;
-  color: red;
+  padding-left: 3px;
+  color: #00ffff;
 }
 
 .command-panel .preview-list .preview {
   padding-left: 1em;
-  color: green;
+  color: #f6f3e8;
 }
 
 .command-panel .preview-list .preview .match{
-  font-weight: bold;
+  background-color: #8E8A8A;
+  padding: 1px;
 }
 
 .command-panel .prompt-and-editor {