More styling work on the facets/history tabs.

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

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

@@ -167,6 +167,26 @@ ListFacet.prototype.render = function() {
                 self._deselect(choice);
             };
             
+            if (renderEdit && customLabel === undefined) {
+                // edit link
+                var editLink = $('<a href="javascript:{}"></a>')
+                    .addClass("facet-choice-link")
+                    .text("edit")
+                    .css("visibility", "hidden")
+                    .click(function() {
+                        self._editChoice(choice, choiceDiv);
+                    })
+                    .prependTo(choiceDiv);
+                
+                choiceDiv
+                    .mouseenter(function() {
+                        editLink.css("visibility", "visible");
+                    })
+                    .mouseleave(function() {
+                        editLink.css("visibility", "hidden");
+                    });
+            }
+            
             if (choice.s) { // selected
                 if (selectionCount > 1) {
                     // select only
@@ -176,30 +196,33 @@ ListFacet.prototype.render = function() {
                     a.click(deselect);
                 }
                 
-                // remove link
+                // exclude link
-                $('<a href="javascript:{}"></a>').addClass("facet-choice-link").text("remove").click(deselect).prependTo(choiceDiv);
+                $('<a href="javascript:{}"></a>')
+                    .addClass("facet-choice-link")
+                    .text("exclude")
+                    .click(deselect)
+                    .prependTo(choiceDiv);
+                    
             } else if (selectionCount > 0) {
                 a.click(selectOnly);
                 
                 // include link
-                $('<a href="javascript:{}"></a>').addClass("facet-choice-link").text("include").click(select).prependTo(choiceDiv);
+                var includeLink = $('<a href="javascript:{}"></a>')
-            } else {
+                    .addClass("facet-choice-link")
-                a.click(select);
+                    .text("include")
-            }
+                    .css("visibility", "hidden")
-            
+                    .click(select)
-            if (renderEdit && customLabel === undefined) {
+                    .prependTo(choiceDiv);
-                // edit link
-                var editLink = $('<a href="javascript:{}"></a>').addClass("facet-choice-edit").text("edit").click(function() {
-                    self._editChoice(choice, choiceDiv);
-                }).appendTo(choiceDiv);
                     
                 choiceDiv
                     .mouseenter(function() {
-                        editLink.css("visibility", "visible");
+                        includeLink.css("visibility", "visible");
                     })
                     .mouseleave(function() {
-                        editLink.css("visibility", "hidden");
+                        includeLink.css("visibility", "hidden");
                     });
+            } else {
+                a.click(select);
             }
         };
         

src/main/webapp/scripts/project.js

@@ -17,7 +17,7 @@ function resize() {
     ui.menuBarContainer.css("top", header.outerHeight() + "px");
 
     var leftPanelWidth = 300;
-    var leftPanelMargin = 5;
+    var leftPanelMargin = 7;
     var width = $(window).width();
     var top = ui.menuBarContainer.offset().top + ui.menuBarContainer.outerHeight();
     var height = footer.offset().top - top;
@@ -45,11 +45,10 @@ function resize() {
 }
 
 function resizeTabs() {
-    var totalHeight = ui.leftPanelTabs.innerHeight();
+    var totalHeight = ui.leftPanelTabs.height();
-    var headerHeight = ui.leftPanelTabs.find(".ui-tabs-nav").outerHeight(true);
+    var headerHeight = ui.leftPanelTabs.find(".ui-tabs-nav").innerHeight();
     var tabPanels = ui.leftPanelTabs.find(".ui-tabs-panel")
-    var paddings = tabPanels.outerHeight(true) - tabPanels.innerHeight();
+    var paddings = tabPanels.innerHeight(true) - tabPanels.height();
-    
     tabPanels.height(totalHeight - headerHeight - paddings);
 }
 

src/main/webapp/scripts/widgets/history-widget.js

@@ -25,7 +25,7 @@ HistoryWidget.prototype.update = function(onDone) {
 HistoryWidget.prototype._render = function() {
     var self = this;
     
-    this._tabHeader.html("Undo/Redo " + this._data.past.length);
+    this._tabHeader.html('Undo/Redo <span class="count">' + this._data.past.length + '</span>');
     
     this._div
         .empty()

src/main/webapp/styles/common.css

@@ -1,10 +1,10 @@
 html {
     font-size: 62.5%;
-    font-family: Tahoma, Arial, Helvetica, sans-serif;
+    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
 
 body {
-    font-size: 120%;
+    font-size: 11px;
     margin: 0;
     padding: 0;
     background: #eee;
@@ -23,6 +23,7 @@ div.grid-layout > table {
 }
 div.grid-layout.layout-full table {
     width: 100%;
+    max-width: 100% !important;
 }
 div.grid-layout > table > tbody > tr > th, div.grid-layout > table > tbody > tr > td {
     padding: 0px;

src/main/webapp/styles/project.css

@@ -50,10 +50,69 @@ body {
     background: white;
     overflow: visible;
     padding: 0px;
+    font-size: 12px;
 }
+.left-panel .ui-tabs {
+    padding: 0;
+}
+.left-panel .ui-corner-all {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;    
+}
+.left-panel .ui-widget-content {
+    border: none;
+    background: none;
+    color: inherit;
+}
+.left-panel .ui-tabs .ui-tabs-nav {
+    padding: 0;
+}
+.left-panel .ui-tabs .ui-widget-header {
+    background: none;
+    border: none;
+}
+.left-panel .ui-tabs .ui-tabs-nav li a {
+    padding: 5px 10px;
+}
+.left-panel .ui-tabs .ui-tabs-nav li a span.count {
+    color: #888;
+    font-weight: normal;
+    font-size: 80%;
+}
+
+.left-panel .ui-tabs .ui-tabs-nav .ui-state-default, 
+.left-panel .ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-default {
+    background: #C5D1D4;
+}
+
+.left-panel .ui-tabs .ui-tabs-nav .ui-state-default a, 
+.left-panel .ui-tabs .ui-tabs-nav .ui-state-default a:link, 
+.left-panel .ui-tabs .ui-tabs-nav .ui-state-default a:visited {
+    color: black;
+}
+
+.left-panel .ui-tabs .ui-tabs-nav .ui-state-active, 
+.left-panel .ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-active {
+    background: #DBE8EB;
+    border: none;
+    color: black;
+}
+
+.left-panel .ui-tabs .ui-tabs-nav .ui-state-active a, 
+.left-panel .ui-tabs .ui-tabs-nav .ui-state-active a:link, 
+.left-panel .ui-tabs .ui-tabs-nav .ui-state-active a:visited {
+    color: black;
+}
+
 .left-panel .ui-tabs .ui-tabs-panel {
-    margin: 5px;
+    margin: 0px;
-    padding: 0px;
+    padding: 7px;
+    background: #DBE8EB;
+    
+    -moz-border-radius: 7px;
+    -webkit-border-radius: 7px;    
+    -moz-border-radius-topleft: 0px;
+    -webkit-border-top-left-radius: 0px;
 }
 
 .facet-panel {

src/main/webapp/styles/project/browsing.css

@@ -12,7 +12,6 @@
 
 ul.facets-container {
     padding: 0;
-    padding-right: 5px;
 }
 
 li.facet-container {
@@ -23,10 +22,10 @@ li.facet-container {
     margin-top: 10px;
     background: white;
     border: 1px solid #ccc;
-    border-bottom-left-radius: 5px 5px;
+    
-    border-bottom-right-radius: 5px 5px;
+    -moz-border-radius: 5px;
-    border-top-left-radius: 5px 5px;
+    -webkit-border-radius: 5px;    
-    border-top-right-radius: 5px 5px;
+    border-radius: 5px 5px;
 }
 
 .facet-title {
@@ -61,7 +60,7 @@ li.facet-container {
 }
 
 a.facet-choice-label {
-    margin-right: 0.5em;
+    margin-right: 0.25em;
     text-decoration: none;
     color: #004;
 }
@@ -72,18 +71,11 @@ a.facet-choice-label:hover {
 
 .facet-choice-count {
     color: #aaa;
-}
+    font-size: 80%;
-.facet-choice-count:before {
-    content: "(";
-    color: #aaa;
-}
-.facet-choice-count:after {
-    content: ")";
-    color: #aaa;
 }
 
 a.facet-choice-link {
-    margin-left: 1em;
+    margin-left: 0.5em;
     font-size: 80%;
     float: right;
     text-decoration: none;
@@ -94,19 +86,6 @@ a.facet-choice-link:hover {
     color: #88a;
 }
 
-a.facet-choice-edit {
-    margin-left: 0.5em;
-    font-size: 80%;
-    text-decoration: none;
-    color: #aac;
-    visibility: hidden;
-}
-
-a.facet-choice-edit:hover {
-    text-decoration: underline;
-    color: #88a;
-}
-
 img.facet-choice-link {
     text-align: baseline;
     cursor: pointer;

src/main/webapp/styles/util/menu.css

@@ -17,6 +17,7 @@
     background: white;
     padding: 1px;
     border: 1px solid #ddd;
+    font-size: 12px;
 }
 
 .menu-container hr {