Tweaked column header menu dropdown icon.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@317 7d457c2a-affb-35e4-300a-418c747d4874

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");
+    var html = $(
-    $(headerTable).addClass("column-header-layout").attr("cellspacing", "0").attr("cellpadding", "0").attr("width", "100%").appendTo(td);
+        '<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 elmts = DOM.bind(html);
-    var headerLeft = headerTableRow.insertCell(0);
-    var headerRight = headerTableRow.insertCell(1);
     
-    $('<span></span>').html(this._column.name).appendTo(headerLeft);
+    elmts.nameContainer.text(this._column.name);
-    
+    elmts.dropdownMenu.click(function() {
-    $(headerRight).attr("width", "1%");
-    $('<img src="/images/menu-dropdown.png" />').addClass("column-header-menu").appendTo(headerRight).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")
+                .addClass("column-header-recon-stats-bar")
-                .css("background", "#333")
+                .attr("title", title)
-                .css("position", "relative")
+                .appendTo(elmts.reconStatsContainer.show());
-                .attr("title", matchPercent + "% matched, " + newPercent + "% new, " + unreconciledPercent + "% to be reconciled")
-                .width("100%")
-                .appendTo(td);
             
-            $('<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);
         }

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

@@ -188,10 +188,18 @@ DataTableView.prototype.render = function() {
      */
     
     var trHead = table.insertRow(table.rows.length);
-    
+    DOM.bind(
-    var tdHeadIndex = trHead.insertCell(trHead.cells.length);
+        $(trHead.insertCell(trHead.cells.length))
-    $(tdHeadIndex).attr("colspan", "2").addClass("column-header");
+            .attr("colspan", "2")
-    $('<img src="/images/menu-dropdown.png" />').addClass("column-header-menu").appendTo(tdHeadIndex).click(function() {
+            .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);
     });
     

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;
 }
 

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;
 }
-
+a.column-header-menu {
-img.column-header-menu {
+    display: block;
-    position: relative;
+    margin-left: 5px;
-    top: -5px;
+    width: 19px;
-    left: 5px;
+    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 {
 }