More styling work on the facets/history tabs.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@459 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-04-13 04:49:28 +00:00
parent 666bcdbf8d
commit 93a6be6ac6
7 changed files with 115 additions and 53 deletions

View File

@ -167,6 +167,26 @@ ListFacet.prototype.render = function() {
self._deselect(choice); 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 (choice.s) { // selected
if (selectionCount > 1) { if (selectionCount > 1) {
// select only // select only
@ -176,30 +196,33 @@ ListFacet.prototype.render = function() {
a.click(deselect); 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) { } else if (selectionCount > 0) {
a.click(selectOnly); a.click(selectOnly);
// include link // 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 choiceDiv
.mouseenter(function() { .mouseenter(function() {
editLink.css("visibility", "visible"); includeLink.css("visibility", "visible");
}) })
.mouseleave(function() { .mouseleave(function() {
editLink.css("visibility", "hidden"); includeLink.css("visibility", "hidden");
}); });
} else {
a.click(select);
} }
}; };

View File

@ -17,7 +17,7 @@ function resize() {
ui.menuBarContainer.css("top", header.outerHeight() + "px"); ui.menuBarContainer.css("top", header.outerHeight() + "px");
var leftPanelWidth = 300; var leftPanelWidth = 300;
var leftPanelMargin = 5; var leftPanelMargin = 7;
var width = $(window).width(); var width = $(window).width();
var top = ui.menuBarContainer.offset().top + ui.menuBarContainer.outerHeight(); var top = ui.menuBarContainer.offset().top + ui.menuBarContainer.outerHeight();
var height = footer.offset().top - top; var height = footer.offset().top - top;
@ -45,11 +45,10 @@ function resize() {
} }
function resizeTabs() { 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 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); tabPanels.height(totalHeight - headerHeight - paddings);
} }

View File

@ -25,7 +25,7 @@ HistoryWidget.prototype.update = function(onDone) {
HistoryWidget.prototype._render = function() { HistoryWidget.prototype._render = function() {
var self = this; 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 this._div
.empty() .empty()

View File

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

View File

@ -50,10 +50,69 @@ body {
background: white; background: white;
overflow: visible; overflow: visible;
padding: 0px; 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 { .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 { .facet-panel {

View File

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

View File

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