diff --git a/src/graphics/menu-dropdown.psd b/src/graphics/menu-dropdown.psd index 0e718d7ca..dd685d4fe 100644 Binary files a/src/graphics/menu-dropdown.psd and b/src/graphics/menu-dropdown.psd differ diff --git a/src/main/webapp/images/menu-dropdown.png b/src/main/webapp/images/menu-dropdown.png index fa4b448ff..537496d5a 100644 Binary files a/src/main/webapp/images/menu-dropdown.png and b/src/main/webapp/images/menu-dropdown.png differ diff --git a/src/main/webapp/scripts/views/data-table-column-header-ui.js b/src/main/webapp/scripts/views/data-table-column-header-ui.js index 1beb26fa2..313f33c9e 100644 --- a/src/main/webapp/scripts/views/data-table-column-header-ui.js +++ b/src/main/webapp/scripts/views/data-table-column-header-ui.js @@ -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 = $( + '' + + '' + + '' + + '' + + '' + + '
' + + ' ' + + '
' + + '
' + ).appendTo(this._td); - var headerTableRow = headerTable.insertRow(0); - var headerLeft = headerTableRow.insertCell(0); - var headerRight = headerTableRow.insertCell(1); + var elmts = DOM.bind(html); - $('').html(this._column.name).appendTo(headerLeft); - - $(headerRight).attr("width", "1%"); - $('').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 = $('
') - .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()); - $('
').height("100%").css("background", "white").css("position", "absolute") + $('
') + .addClass("column-header-recon-stats-blanks") .width(Math.round((stats.newTopics + stats.matchedTopics) * 100 / stats.nonBlanks) + "%") .appendTo(whole); - $('
').height("100%").css("background", "#6d6").css("position", "absolute") + $('
') + .addClass("column-header-recon-stats-matched") .width(Math.round(stats.matchedTopics * 100 / stats.nonBlanks) + "%") .appendTo(whole); } diff --git a/src/main/webapp/scripts/views/data-table-view.js b/src/main/webapp/scripts/views/data-table-view.js index 2de459844..13264442d 100644 --- a/src/main/webapp/scripts/views/data-table-view.js +++ b/src/main/webapp/scripts/views/data-table-view.js @@ -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"); - $('').addClass("column-header-menu").appendTo(tdHeadIndex).click(function() { + DOM.bind( + $(trHead.insertCell(trHead.cells.length)) + .attr("colspan", "2") + .addClass("column-header") + .html( + '' + + '' + + '
 ' + + ' ' + + '
' + ) + ).dropdownMenu.click(function() { self._createMenuForAllColumns(this); }); diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css index f7b6900aa..5ed1fdc24 100644 --- a/src/main/webapp/styles/project/browsing.css +++ b/src/main/webapp/styles/project/browsing.css @@ -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; } diff --git a/src/main/webapp/styles/views/data-table-view.css b/src/main/webapp/styles/views/data-table-view.css index 83887b24a..e1eae5e12 100644 --- a/src/main/webapp/styles/views/data-table-view.css +++ b/src/main/webapp/styles/views/data-table-view.css @@ -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 { }