[grid,ui][s]: switch to bootstrap dropdowns for grid menus.

css/data-explorer.css

@@ -93,40 +93,14 @@
   * Data Table Menus
   *********************************************************/
 
-a.column-header-menu, a.root-header-menu {
+.column-header-menu, a.root-header-menu {
   float: right;
-  display: block;
-  margin: 0 4px 0 0;
-  width: 17px;
-  height: 19px;
-  background-image: url(images/menu-dropdown.png);
-  background-repeat: no-repeat;
-}
-
-a.row-header-menu:hover, a.root-header-menu:hover {
-  background-position: -17px 0px;
-  text-decoration: none;
-}
-
-a.row-header-menu {
-  float: left;
-  display: block;
-  margin: -2px 0 -4px 0;
-  width: 17px;
-  height: 18px;
-  background-image: url(images/menu-dropdown.png);
-  background-repeat: no-repeat;
 }
 
 .read-only a.row-header-menu {
   display: none;
 }
 
-a.column-header-menu:hover {
-  background-position: -17px 0px;
-  text-decoration: none;
-}
-
 .column-header-recon-stats-bar {
   margin-top: 10px;
   height: 4px;
@@ -192,45 +166,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
   color: red;
 }
 
-.data-table-menu-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-ul.data-table-menu {
-  display: none;
-  outline-style: none;
-  background: white;
-  color: black;
-  font-size: 12px;
-  height: auto;
-  list-style: none;
-  overflow: hidden;
-  position: absolute;
-  text-align: left;
-  width: 120px;
-  z-index: 666;
-  border: 1px solid #CCC;
-  border-right: 1px solid #666;
-  border-bottom: 1px solid #666;
-  margin: 0; padding: 0; }
-  ul.data-table-menu * {
-    margin: 0;
-    padding: 0; }
-  ul.data-table-menu a {
-    line-height: 14px;
-    color: black;
-    display: block;
-    padding: 5px 7px;
-    text-decoration: none; }
-  ul.data-table-menu li {
-    height: 24px; }
-  ul.data-table-menu li:hover {
-    background-color: #DBE8F8 }
-
 /* TODO: not sure the rest of this is needed */
 .data-table-cell-editor, .data-table-topic-popup {
   overflow: auto;

src/util.js

@@ -1,18 +1,6 @@
 var util = function() {
   var templates = {
     transformActions: '<li><a data-action="transform" class="menuAction" href="JavaScript:void(0);">Global transform...</a></li>'
-    , columnActions: ' \
-      <li class="write-op"><a data-action="bulkEdit" class="menuAction" href="JavaScript:void(0);">Transform...</a></li> \
-      <li class="write-op"><a data-action="deleteColumn" class="menuAction" href="JavaScript:void(0);">Delete this column</a></li> \
-      <li><a data-action="sortAsc" class="menuAction" href="JavaScript:void(0);">Sort ascending</a></li> \
-      <li><a data-action="sortDesc" class="menuAction" href="JavaScript:void(0);">Sort descending</a></li> \
-      <li><a data-action="hideColumn" class="menuAction" href="JavaScript:void(0);">Hide this column</a></li> \
-    '
-    , rowActions: '<li><a data-action="deleteRow" class="menuAction write-op" href="JavaScript:void(0);">Delete this row</a></li>'
-    , rootActions: ' \
-        {{#columns}} \
-        <li><a data-action="showColumn" data-column="{{.}}" class="menuAction" href="JavaScript:void(0);">Show column: {{.}}</a></li> \
-        {{/columns}}'
     , cellEditor: ' \
       <div class="menu-container data-table-cell-editor"> \
         <textarea class="data-table-cell-editor-editor" bind="textarea">{{value}}</textarea> \

src/view-grid.js

@@ -51,19 +51,19 @@ my.DataGrid = Backbone.View.extend({
 
   onColumnHeaderClick: function(e) {
     this.state.currentColumn = $(e.target).closest('.column-header').attr('data-field');
-    util.position('data-table-menu', e);
-    util.render('columnActions', 'data-table-menu');
   },
 
   onRowHeaderClick: function(e) {
     this.state.currentRow = $(e.target).parents('tr:first').attr('data-id');
-    util.position('data-table-menu', e);
-    util.render('rowActions', 'data-table-menu');
   },
   
   onRootHeaderClick: function(e) {
-    util.position('data-table-menu', e);
+    var tmpl = ' \
-    util.render('rootActions', 'data-table-menu', {'columns': this.hiddenFields});
+        {{#columns}} \
+        <li><a data-action="showColumn" data-column="{{.}}" href="JavaScript:void(0);">Show column: {{.}}</a></li> \
+        {{/columns}}';
+    var tmp = $.mustache(tmpl, {'columns': this.hiddenFields});
+    this.el.find('.root-header-menu .dropdown-menu').html(tmp);
   },
 
   onMenuClick: function(e) {
@@ -105,7 +105,6 @@ my.DataGrid = Backbone.View.extend({
           })
       }
     }
-    util.hide('data-table-menu');
     actions[$(e.target).attr('data-action')]();
   },
 
@@ -158,26 +157,32 @@ my.DataGrid = Backbone.View.extend({
   // ======================================================
   // #### Templating
   template: ' \
-    <div class="data-table-menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div> \
-    <ul class="data-table-menu"></ul> \
     <table class="data-table table-striped" cellspacing="0"> \
       <thead> \
         <tr> \
           {{#notEmpty}} \
             <th class="column-header"> \
-              <div class="column-header-title"> \
+              <div class="btn-group root-header-menu"> \
-                <a class="root-header-menu"></a> \
+                <a class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> \
-                <span class="column-header-name"></span> \
+                <ul class="dropdown-menu data-table-menu"> \
+                </ul> \
               </div> \
+              <span class="column-header-name"></span> \
             </th> \
           {{/notEmpty}} \
           {{#fields}} \
             <th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}"> \
-              <div class="column-header-title"> \
+              <div class="btn-group column-header-menu"> \
-                <a class="column-header-menu"></a> \
+                <a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
-                <span class="column-header-name">{{label}}</span> \
+                <ul class="dropdown-menu data-table-menu"> \
-              </div> \
+                  <li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
+                  <li class="write-op"><a data-action="deleteColumn" href="JavaScript:void(0);">Delete this column</a></li> \
+                  <li><a data-action="sortAsc" href="JavaScript:void(0);">Sort ascending</a></li> \
+                  <li><a data-action="sortDesc" href="JavaScript:void(0);">Sort descending</a></li> \
+                  <li><a data-action="hideColumn" href="JavaScript:void(0);">Hide this column</a></li> \
+                </ul> \
               </div> \
+              <span class="column-header-name">{{label}}</span> \
             </th> \
           {{/fields}} \
         </tr> \
@@ -259,7 +264,14 @@ my.DataGridRow = Backbone.View.extend({
   },
 
   template: ' \
-      <td><a class="row-header-menu"></a></td> \
+      <td> \
+        <div class="btn-group row-header-menu"> \
+          <a class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> \
+          <ul class="dropdown-menu data-table-menu"> \
+            <li class="write-op"><a data-action="deleteRow" href="JavaScript:void(0);">Delete this row</a></li> \
+          </ul> \
+        </div> \
+      </td> \
       {{#cells}} \
       <td data-field="{{field}}"> \
         <div class="data-table-cell-content"> \