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

Tweaked column header menu dropdown icon.

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@317 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-03-18 00:35:34 +00:00
parent d56bbc1208
commit b7338e13f2
6 changed files with 70 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/graphics/menu-dropdown.psd
View File

Binary file not shown.

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

40
src/main/webapp/scripts/views/data-table-column-header-ui.js
View File

@ -9,19 +9,23 @@ function DataTableColumnHeaderUI(dataTableView, column, columnIndex, td) {
DataTableColumnHeaderUI.prototype._render = function() {
var self = this;
var td = this._td;
var headerTable = document.createElement("table");
$(headerTable).addClass("column-header-layout").attr("cellspacing", "0").attr("cellpadding", "0").attr("width", "100%").appendTo(td);
var html = $(
'<table class="column-header-layout">' +
'<tr>' +
'<td bind="nameContainer"></td>' +
'<td width="1%">' +
'<a class="column-header-menu" bind="dropdownMenu">&nbsp;</a>' +
'</td>' +
'</tr>' +
'</table>' +
'<div style="display:none;" bind="reconStatsContainer"></div>'
).appendTo(this._td);
var headerTableRow = headerTable.insertRow(0);
var headerLeft = headerTableRow.insertCell(0);
var headerRight = headerTableRow.insertCell(1);
var elmts = DOM.bind(html);
$('<span></span>').html(this._column.name).appendTo(headerLeft);
$(headerRight).attr("width", "1%");
$('<img src="/images/menu-dropdown.png" />').addClass("column-header-menu").appendTo(headerRight).click(function() {
elmts.nameContainer.text(this._column.name);
elmts.dropdownMenu.click(function() {
self._createMenuForColumnHeader(this);
});
@ -31,20 +35,20 @@ DataTableColumnHeaderUI.prototype._render = function() {
var newPercent = Math.ceil(100 * stats.newTopics / stats.nonBlanks);
var matchPercent = Math.ceil(100 * stats.matchedTopics / stats.nonBlanks);
var unreconciledPercent = Math.ceil(100 * (stats.nonBlanks - stats.matchedTopics - stats.newTopics) / stats.nonBlanks);
var title = matchPercent + "% matched, " + newPercent + "% new, " + unreconciledPercent + "% to be reconciled";
var whole = $('<div>')
.height("3px")
.css("background", "#333")
.css("position", "relative")
.attr("title", matchPercent + "% matched, " + newPercent + "% new, " + unreconciledPercent + "% to be reconciled")
.width("100%")
.appendTo(td);
.addClass("column-header-recon-stats-bar")
.attr("title", title)
.appendTo(elmts.reconStatsContainer.show());
$('<div>').height("100%").css("background", "white").css("position", "absolute")
$('<div>')
.addClass("column-header-recon-stats-blanks")
.width(Math.round((stats.newTopics + stats.matchedTopics) * 100 / stats.nonBlanks) + "%")
.appendTo(whole);
$('<div>').height("100%").css("background", "#6d6").css("position", "absolute")
$('<div>')
.addClass("column-header-recon-stats-matched")
.width(Math.round(stats.matchedTopics * 100 / stats.nonBlanks) + "%")
.appendTo(whole);
}

16
src/main/webapp/scripts/views/data-table-view.js
View File

@ -188,10 +188,18 @@ DataTableView.prototype.render = function() {
*/
var trHead = table.insertRow(table.rows.length);
var tdHeadIndex = trHead.insertCell(trHead.cells.length);
$(tdHeadIndex).attr("colspan", "2").addClass("column-header");
$('<img src="/images/menu-dropdown.png" />').addClass("column-header-menu").appendTo(tdHeadIndex).click(function() {
DOM.bind(
$(trHead.insertCell(trHead.cells.length))
.attr("colspan", "2")
.addClass("column-header")
.html(
'<table class="column-header-layout"><tr><td>&nbsp;</td>' +
'<td width="1%">' +
'<a class="column-header-menu" bind="dropdownMenu">&nbsp;</a>' +
'</td>' +
'</tr></table>'
)
).dropdownMenu.click(function() {
self._createMenuForAllColumns(this);
});

3
src/main/webapp/styles/project/browsing.css
View File

@ -31,6 +31,7 @@ li.facet-container {
border: 1px solid #ccc;
border-bottom: 0px;
padding: 3px 5px;
padding-right: 2px;
background: #eee;
font-weight: bold;
cursor: move;
@ -111,7 +112,7 @@ a.facet-choice-edit:hover {
img.facet-choice-link {
text-align: baseline;
cursor: pointer;
margin: 0 2px;
margin-left: 2px;
float: right;
}

39
src/main/webapp/styles/views/data-table-view.css
View File

@ -40,16 +40,45 @@ table.data-table td.column-header {
font-weight: bold;
}
table.column-header-layout {
border-collapse: collapse;
width: 100%;
}
table.column-header-layout td {
padding: 0px;
font-weight: bold;
}
img.column-header-menu {
position: relative;
top: -5px;
left: 5px;
a.column-header-menu {
display: block;
margin-left: 5px;
width: 19px;
height: 19px;
background-image: url(../../images/menu-dropdown.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
a.column-header-menu:hover {
background-position: -19px 0px;
}
.column-header-recon-stats-bar {
margin-top: 5px;
height: 3px;
max-height: 3px;
background: #333;
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;
}
.viewPanel-summary {
}