More styling work on the facets/history tabs.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@459 7d457c2a-affb-35e4-300a-418c747d4874
2010-04-13 04:49:28 +00:00 · 2010-04-13 04:49:28 +00:00 · 93a6be6ac6
commit 93a6be6ac6
parent 666bcdbf8d
7 changed files with 115 additions and 53 deletions
--- a/src/main/webapp/scripts/facets/list-facet.js
+++ b/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
-                $('<a href="javascript:{}"></a>').addClass("facet-choice-link").text("remove").click(deselect).prependTo(choiceDiv);
+                // exclude link
+                $('<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);
-            } else {
-                a.click(select);
-            }
-            
-            if (renderEdit && customLabel === undefined) {
-                // edit link
-                var editLink = $('<a href="javascript:{}"></a>').addClass("facet-choice-edit").text("edit").click(function() {
-                    self._editChoice(choice, choiceDiv);
-                }).appendTo(choiceDiv);
-                
+                var includeLink = $('<a href="javascript:{}"></a>')
+                    .addClass("facet-choice-link")
+                    .text("include")
+                    .css("visibility", "hidden")
+                    .click(select)
+                    .prependTo(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);
            }
        };
        
--- a/src/main/webapp/scripts/project.js
+++ b/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 headerHeight = ui.leftPanelTabs.find(".ui-tabs-nav").outerHeight(true);
+    var totalHeight = ui.leftPanelTabs.height();
+    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);
 }

--- a/src/main/webapp/scripts/widgets/history-widget.js
+++ b/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()
--- a/src/main/webapp/styles/common.css
+++ b/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;
--- a/src/main/webapp/styles/project.css
+++ b/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;
-    padding: 0px;
+    margin: 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 {
--- a/src/main/webapp/styles/project/browsing.css
+++ b/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;
-    border-top-left-radius: 5px 5px;
-    border-top-right-radius: 5px 5px;
+    
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 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;
-}
-.facet-choice-count:before {
-    content: "(";
-    color: #aaa;
-}
-.facet-choice-count:after {
-    content: ")";
-    color: #aaa;
+    font-size: 80%;
 }

 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;
--- a/src/main/webapp/styles/util/menu.css
+++ b/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 {