various improvements to data table and reconciliation indicators

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1561 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
James Home 2010-10-15 06:42:24 +00:00
parent c5ba025bad
commit 6686a48804
5 changed files with 72 additions and 86 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,6 +1,2 @@
<table class="column-header-layout">
<tr>
<td width="1%"><a class="column-header-menu" bind="dropdownMenu">&nbsp;</a></td>
<td bind="nameContainer"></td>
</tr>
</table><div style="display:none;" bind="reconStatsContainer"></div>
<div class="column-header-title"><a class="column-header-menu" bind="dropdownMenu"></a><span class="column-header-name" bind="nameContainer"></span></div>
<div style="display:none;" bind="reconStatsContainer"></div>

View File

@ -233,29 +233,20 @@ DataTableView.prototype._renderDataTable = function(table) {
* Column Headers with Menus
*------------------------------------------------------------
*/
var trHead = table.insertRow(table.rows.length);
DOM.bind(
$(trHead.insertCell(trHead.cells.length))
.attr("colspan", "3")
.addClass("column-header")
.html(
'<table class="column-header-layout"><tr>' +
'<td width="1%">' +
'<a class="column-header-menu" bind="dropdownMenu">&nbsp;</a>' +
'</td>' +
'<td>&nbsp;</td>' +
'</tr></table>'
)
.html('<div class="column-header-title"><a class="column-header-menu" bind="dropdownMenu"></a><span class="column-header-name">All</span></div>')
).dropdownMenu.click(function() {
self._createMenuForAllColumns(this);
});
this._columnHeaderUIs = [];
var createColumnHeader = function(column, index) {
var td = trHead.insertCell(trHead.cells.length);
$(td).addClass("column-header");
if (column.name in self._collapsedColumnNames) {
$(td).html("&nbsp;").attr("title", column.name).click(function(evt) {
delete self._collapsedColumnNames[column.name];

View File

@ -8,6 +8,8 @@
@chrome_secondary: #e3e9ff;
@fill_primary: #ebeef8;
@fill_secondary: #f2f2f2;
@green_primary: #282;
@green_secondary: #3d3;
@faint_grey: #ddd;
@light_grey: #999;
@metadata_grey: #777;

View File

@ -33,27 +33,22 @@
overflow: auto;
}
table.data-table {
.data-table {
margin: 0px;
padding: 0px;
font-size: 1.1em;
border-collapse: collapse;
}
table.data-table > tbody > tr > td {
.data-table td {
padding: 2px 5px;
border-right: 1px solid white;
border-bottom: 1px dotted #ddd;
border-right: 1px solid #ddd;
}
table.data-table > tbody > tr.odd > td {
border-top: 1px solid #eee;
border-right: 1px solid #eee;
}
table.data-table > tbody > tr.even > td {
border-top: 1px solid white;
border-right: 1px solid white;
background: #eee;
background: @fill_secondary;
}
table.data-table > tbody > tr.contextual > td > div {
@ -61,59 +56,60 @@ table.data-table > tbody > tr.contextual > td > div {
}
table.data-table td.column-header {
background: #e8e8e8;
cursor: pointer;
padding: 5px 5px;
border-right: 1px solid #ccc;
border-bottom: double #ccc;
white-space: pre;
font-weight: bold;
}
vertical-align: top;
white-space: nowrap;
background: #f2f2f2;
cursor: pointer;
padding: 4px 6px 4px 4px;
border-right: 1px solid #ddd;
font-weight: bold;
}
table.data-table td.column-header td {
vertical-align: middle;
}
.column-header-title {
clear: left;
}
table.column-header-layout {
border-collapse: collapse;
width: 100%;
}
table.column-header-layout td {
padding: 0px;
font-weight: bold;
}
.column-header-name {
margin: 0 0 0 21px;
padding: 4px 0 0 0;
display: block;
}
a.column-header-menu {
display: block;
margin-right: 5px;
width: 17px;
height: 23px;
background-image: url(../../images/menu-dropdown.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
float: left;
display: block;
margin: 0 4px 0 0;
width: 17px;
height: 19px;
background-image: url(../../images/menu-dropdown.png);
background-repeat: no-repeat;
}
a.column-header-menu:hover {
background-position: -17px 0px;
text-decoration: none;
}
.column-header-recon-stats-bar {
margin-top: 5px;
height: 3px;
max-height: 3px;
background: #333;
margin-top: 10px;
height: 4px;
max-height: 4px;
background: #ddd;
border: 1px solid #aaa;
position: relative;
width: 100%;
}
.column-header-recon-stats-blanks {
position: absolute;
height: 100%;
background: white;
}
.column-header-recon-stats-matched {
position: absolute;
height: 100%;
background: #6d6;
}
position: absolute;
height: 100%;
background: @green_primary;
}
.column-header-recon-stats-blanks {
position: absolute;
height: 100%;
background: @green_secondary;
}
div.data-table-cell-content {
line-height: 1.2;
@ -122,29 +118,30 @@ div.data-table-cell-content {
}
div.data-table-cell-content-numeric {
text-align: right;
}
text-align: right;
}
a.data-table-cell-edit {
position: absolute;
top: 0px;
right: 0px;
display: block;
width: 25px;
height: 16px;
text-decoration: none;
background-image: url(../../images/edit-map.png);
background-repeat: no-repeat;
background-position: 0px 0px;
visibility: hidden;
}
position: absolute;
top: 0;
right: 0;
display: block;
width: 25px;
height: 16px;
text-decoration: none;
background-image: url(../../images/edit-map.png);
background-repeat: no-repeat;
visibility: hidden;
}
a.data-table-cell-edit:hover {
background-position: -25px 0px;
}
background-position: -25px 0px;
}
div.data-table-cell-content-numeric > a.data-table-cell-edit {
left: 0px;
right: auto;
}
left: 0px;
right: auto;
}
.data-table-value-nonstring {
color: #282;