Show choice count in list facet. Use close.png for close button.

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

src/main/webapp/scripts/facets/list-facet.js

@@ -75,9 +75,13 @@ ListFacet.prototype.render = function() {
     var headerDiv = $('<div></div>').addClass("facet-title").appendTo(container);
     $('<span></span>').text(this._config.name).appendTo(headerDiv);
     
-    var removeButton = $('<a href="javascript:{}"></a>').addClass("facet-choice-link").text("remove").click(function() {
-        self._remove();
-    }).prependTo(headerDiv);
+    var removeButton = $('<img>')
+        .attr("src", "images/close.png")
+        .attr("title", "Remove this facet")
+        .addClass("facet-choice-link")
+        .click(function() {
+            self._remove();
+        }).prependTo(headerDiv);
     
     var bodyDiv = $('<div></div>').addClass("facet-body").appendTo(container);
     if (!("scroll" in this._options) || this._options.scroll) {
@@ -149,6 +153,8 @@ ListFacet.prototype.render = function() {
         bodyDiv[0].scrollTop = scrollTop;
         
         var footerDiv = $('<div></div>').addClass("facet-footer").appendTo(container);
+        
+        $('<span>').text(choices.length + " choices: ").appendTo(footerDiv);
         if (this._options.sort == "name") {
             $('<a href="javascript:{}"></a>').addClass("action").text("re-sort by count").click(function() {
                 self._options.sort = "count";

src/main/webapp/styles/browsing.css

@@ -67,6 +67,13 @@ a.facet-choice-link:hover {
     color: #88a;
 }
 
+img.facet-choice-link {
+    text-align: baseline;
+    cursor: pointer;
+    margin: 0 2px;
+    float: right;
+}
+
 .facet-range-body {
     border: 1px solid #ccc;
     padding: 15px;