Use image for cell edit links.

Color cell values that have been parsed and are no longer just text strings.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@543 7d457c2a-affb-35e4-300a-418c747d4874

src/main/webapp/scripts/views/data-table-cell-ui.js

@@ -15,9 +15,9 @@ DataTableCellUI.prototype._render = function() {
     var divContent = $('<div/>')
         .addClass("data-table-cell-content");
         
-    var editLink = $('<a href="javascript:{}" />')
+    var editLink = $('<a href="javascript:{}">&nbsp;</a>')
         .addClass("data-table-cell-edit")
-        .text("edit")
+        .attr("title", "edit this cell")
         .appendTo(divContent)
         .click(function() { self._startEdit(this); });
         
@@ -31,7 +31,10 @@ DataTableCellUI.prototype._render = function() {
     } else if ("e" in cell) {
         $('<span>').addClass("data-table-error").text(cell.e).appendTo(divContent);
     } else if (!("r" in cell) || !cell.r) {
-        $('<span>').text(cell.v).appendTo(divContent);
+        var span = $('<span>').text(cell.v).appendTo(divContent);
+        if (typeof cell.v !== "string") {
+            span.addClass("data-table-value-nonstring");
+        }
     } else {
         var r = cell.r;
         if (r.j == "new") {

src/main/webapp/styles/views/data-table-view.css

@@ -116,19 +116,21 @@ a.data-table-cell-edit {
     position: absolute;
     top: 0px;
     right: 0px;
-    padding: 2px 4px;
-    font-size: 80%;
-    font-weight: bold;
+    display: block;
+    width: 30px;
+    height: 16px;
     text-decoration: none;
-    background: #aaf;
-    color: #eee;
+    background-image: url(../../images/edit-map.png);
+    background-repeat: no-repeat;
+    background-position: 0px 0px;
     visibility: hidden;
 }
 a.data-table-cell-edit:hover {
-    background: #88f;
-    color: white;
+    background-position: -30px 0px;
+}
+.data-table-value-nonstring {
+    color: #880;
 }
-
 .data-table-error {
     color: red;
 }