From 93a6be6ac6aa4fc46a25978691ae653fa1383cac Mon Sep 17 00:00:00 2001 From: David Huynh Date: Tue, 13 Apr 2010 04:49:28 +0000 Subject: [PATCH] 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 | 53 +++++++++++----- src/main/webapp/scripts/project.js | 9 ++- .../webapp/scripts/widgets/history-widget.js | 2 +- src/main/webapp/styles/common.css | 5 +- src/main/webapp/styles/project.css | 63 ++++++++++++++++++- src/main/webapp/styles/project/browsing.css | 35 +++-------- src/main/webapp/styles/util/menu.css | 1 + 7 files changed, 115 insertions(+), 53 deletions(-) diff --git a/src/main/webapp/scripts/facets/list-facet.js b/src/main/webapp/scripts/facets/list-facet.js index f16e16b3d..a9db1fa73 100644 --- 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 = $('') + .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 - $('').addClass("facet-choice-link").text("remove").click(deselect).prependTo(choiceDiv); + // exclude link + $('') + .addClass("facet-choice-link") + .text("exclude") + .click(deselect) + .prependTo(choiceDiv); + } else if (selectionCount > 0) { a.click(selectOnly); // include link - $('').addClass("facet-choice-link").text("include").click(select).prependTo(choiceDiv); - } else { - a.click(select); - } - - if (renderEdit && customLabel === undefined) { - // edit link - var editLink = $('').addClass("facet-choice-edit").text("edit").click(function() { - self._editChoice(choice, choiceDiv); - }).appendTo(choiceDiv); - + var includeLink = $('') + .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); } }; diff --git a/src/main/webapp/scripts/project.js b/src/main/webapp/scripts/project.js index c90c32655..fe951c8f4 100644 --- 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); } diff --git a/src/main/webapp/scripts/widgets/history-widget.js b/src/main/webapp/scripts/widgets/history-widget.js index f9fe662d4..d67f4b513 100644 --- 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 ' + this._data.past.length + ''); this._div .empty() diff --git a/src/main/webapp/styles/common.css b/src/main/webapp/styles/common.css index 79aae1303..4818d7da2 100644 --- 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; diff --git a/src/main/webapp/styles/project.css b/src/main/webapp/styles/project.css index b7be66af1..d68edcfe7 100644 --- 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 { diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css index e43cff639..04b325376 100644 --- 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; diff --git a/src/main/webapp/styles/util/menu.css b/src/main/webapp/styles/util/menu.css index 0b4fded0b..20b2fa247 100644 --- 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 {