From 909156dc705b8d099005d83c249d71e4f052ba42 Mon Sep 17 00:00:00 2001
From: Stefano Mazzocchi <stefano@apache.org>
Date: Sat, 24 Apr 2010 07:07:58 +0000
Subject: [PATCH] condense status and controls in the list facet on a single
 line and use jquery_ui small radio buttons to make it look more coherent with
 the other facets

git-svn-id: http://google-refine.googlecode.com/svn/trunk@531 7d457c2a-affb-35e4-300a-418c747d4874
---
 src/main/webapp/scripts/facets/list-facet.js | 31 +++++++++-----------
 src/main/webapp/styles/project/browsing.css  | 21 +++----------
 2 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/src/main/webapp/scripts/facets/list-facet.js b/src/main/webapp/scripts/facets/list-facet.js
index 800080313..3a2863057 100644
--- a/src/main/webapp/scripts/facets/list-facet.js
+++ b/src/main/webapp/scripts/facets/list-facet.js
@@ -105,28 +105,23 @@ ListFacet.prototype._reSortChoices = function() {
 ListFacet.prototype._initializeUI = function() {
     var self = this;
     
+    var facet_id = this._div.attr("id");
+    
     this._div.empty().show().html(
         '<div class="facet-title">' +
             '<img src="images/close.png" title="Remove this facet" class="facet-choice-link" bind="removeButton"/>' +
+            '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">reset</a>' +
             '<a href="javascript:{}" class="facet-choice-link" bind="changeButton">change</a>' +
             '<span bind="titleSpan"></span>' +
         '</div>' +
         '<div class="facet-expression" bind="expressionDiv"></div>' +
-        '<div class="facet-status" bind="statusDiv" style="display:none;"><div class="grid-layout layout-tightest layout-full">' +
-            '<table><tr>' +
-                '<td bind="choiceCountContainer"></td>' +
-                '<td width="1%"><a href="javascript:{}" class="action" bind="clusterLink">Cluster</a></td>' +
-            '</tr></table>' +
-        '</div></div>' +
         '<div class="facet-controls" bind="controlsDiv" style="display:none;"><div class="grid-layout layout-tightest layout-full">' +
             '<table><tr>' +
-                '<td>Sort by: ' +
-                    '<a href="javascript:{}" bind="sortByNameLink" class="facet-mode-link">Name</a> ' +
-                    '<a href="javascript:{}" bind="sortByCountLink" class="facet-mode-link">Count</a>' +
-                '</td>' +
-                '<td width="1%">' +
-                    '<a href="javascript:{}" class="action" bind="resetButton">Reset</a>' +
-                '</td>' +
+                '<td><span bind="sortGroup">Sort by: ' +
+                    '<input bind="sortByNameLink" type="radio" id="' + facet_id + '-name-sort" name="radio" checked="checked" /><label for="' + facet_id + '-name-sort">name</label>' +
+                    '<input bind="sortByCountLink" type="radio" id="' + facet_id + '-count-sort" name="radio" /><label for="' + facet_id + '-count-sort">count</label>' +
+                '</span></td>' +
+                '<td width="1%" nowrap=""><span bind="choiceCountContainer"></span> <button bind="clusterLink">cluster</button></td>' +
             '</tr></table>' +
         '</div></div>' +
         '<div class="facet-body" bind="bodyDiv">' +
@@ -158,8 +153,10 @@ ListFacet.prototype._initializeUI = function() {
         }
     });
         
+    this._elmts.sortGroup.buttonset();
+    
     if (this._config.expression == "value") {
-        this._elmts.clusterLink.click(function() { self._doEdit(); });
+        this._elmts.clusterLink.click(function() { self._doEdit(); }).button();
     } else {
         this._elmts.clusterLink.hide();
     }
@@ -180,14 +177,14 @@ ListFacet.prototype._update = function(resetScroll) {
     var self = this;
     
     if (!this._data) {
-        this._elmts.statusDiv.hide();
+        //this._elmts.statusDiv.hide();
         this._elmts.controlsDiv.hide();
         this._elmts.bodyInnerDiv.empty().append(
             $('<div>').text("Loading...").addClass("facet-body-message"));
             
         return;
     } else if ("error" in this._data) {
-        this._elmts.statusDiv.hide();
+        //this._elmts.statusDiv.hide();
         this._elmts.controlsDiv.hide();
         this._elmts.bodyInnerDiv.empty().append(
             $('<div>').text(this._data.error).addClass("facet-body-message"));
@@ -204,7 +201,7 @@ ListFacet.prototype._update = function(resetScroll) {
     }
     
     this._elmts.bodyInnerDiv.empty();
-    this._elmts.statusDiv.show();
+    //this._elmts.statusDiv.show();
     this._elmts.controlsDiv.show();
     
     var choices = this._data.choices;
diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css
index 28f42856e..b589ac58a 100644
--- a/src/main/webapp/styles/project/browsing.css
+++ b/src/main/webapp/styles/project/browsing.css
@@ -81,25 +81,12 @@ li.facet-container {
 }
 .facet-controls {
     font-size: 90%;
-    padding: 5px 5px;
+    padding: 4px 5px 4px 5px;
     background: #F4F7FA;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #ccc;
 }
-a.facet-mode-link {
-    text-decoration: none;
-    padding: 1px 3px 2px 3px;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-}
-a.facet-mode-link:hover {
-    background: #f8f8f8;
-    color: #FF6A00;
-}
-a.facet-mode-link.facet-mode-link-selected {
-    background: #f8f8f8;
-    color: #FF6A00;
-    border: 1px solid #ccc;
+.facet-controls .ui-button-text {
+	padding: 0.1em 0.4em 0.2em;
 }
 
 .facet-body {