s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

various improvements to data table and reconciliation indicators

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
main/webapp/modules/core/images/menu-dropdown.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

8
main/webapp/modules/core/scripts/views/data-table/column-header.html
View File

@ -1,6 +1,2 @@
<table class="column-header-layout"> <div class="column-header-title"><a class="column-header-menu" bind="dropdownMenu"></a><span class="column-header-name" bind="nameContainer"></span></div>
<tr> <div style="display:none;" bind="reconStatsContainer"></div>
<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>

13
main/webapp/modules/core/scripts/views/data-table/data-table-view.js
View File

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

2
main/webapp/modules/core/styles/theme.less
View File

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

135
main/webapp/modules/core/styles/views/data-table-view.less
View File

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