From 9c0c4dfae3618c999e2db5d3f8b600fbd47c2a41 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Thu, 26 Apr 2012 21:20:59 +0100
Subject: [PATCH] [#46,view-grid,view-transform-dialog][s]: switch
 ColumnTransform to work off bootstrap modal.

---
 css/grid.css                 |  4 ----
 src/view-grid.js             | 10 ++--------
 src/view-transform-dialog.js | 19 ++++++++++---------
 3 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/css/grid.css b/css/grid.css
index aeb9984e..88f0b134 100644
--- a/css/grid.css
+++ b/css/grid.css
@@ -210,10 +210,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
   * Transform Dialog
   *********************************************************/
 
-#expression-preview-tabs .ui-tabs-nav li a {
-  padding: 0.15em 1em;
-}
-
 textarea.expression-preview-code {
   font-family: monospace;
   height: 5em;
diff --git a/src/view-grid.js b/src/view-grid.js
index dc616713..bafc08ae 100644
--- a/src/view-grid.js
+++ b/src/view-grid.js
@@ -104,19 +104,13 @@ my.Grid = Backbone.View.extend({
   },
 
   showTransformColumnDialog: function() {
-    var $el = $('.dialog-content');
-    util.show('dialog');
     var view = new my.ColumnTransform({
       model: this.model
     });
     view.state = this.tempState;
     view.render();
-    $el.empty();
-    $el.append(view.el);
-    util.observeExit($el, function() {
-      util.hide('dialog');
-    });
-    $('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
+    this.el.append(view.el);
+    view.el.modal();
   },
 
   showTransformDialog: function() {
diff --git a/src/view-transform-dialog.js b/src/view-transform-dialog.js
index 12f83872..c3f62d35 100644
--- a/src/view-transform-dialog.js
+++ b/src/view-transform-dialog.js
@@ -76,12 +76,13 @@ my.DataTransform = Backbone.View.extend({
 
 // View (Dialog) for doing data transformations (on columns of data).
 my.ColumnTransform = Backbone.View.extend({
-  className: 'transform-column-view',
+  className: 'transform-column-view modal fade in',
   template: ' \
-    <div class="dialog-header"> \
-      Functional transform on column {{name}} \
+    <div class="modal-header"> \
+      <a class="close" data-dismiss="modal">×</a> \
+      <h3>Functional transform on column {{name}}</h3> \
     </div> \
-    <div class="dialog-body"> \
+    <div class="modal-body"> \
       <div class="grid-layout layout-tight layout-full"> \
         <table> \
         <tbody> \
@@ -107,10 +108,10 @@ my.ColumnTransform = Backbone.View.extend({
               </tr> \
               <tr> \
                 <td colspan="4"> \
-                  <div id="expression-preview-tabs" class="refine-tabs ui-tabs ui-widget ui-widget-content ui-corner-all"> \
+                  <div id="expression-preview-tabs"> \
                     <span>Preview</span> \
-                    <div id="expression-preview-tabs-preview" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> \
-                      <div class="expression-preview-container" style="width: 652px; "> \
+                    <div id="expression-preview-tabs-preview"> \
+                      <div class="expression-preview-container"> \
                       </div> \
                     </div> \
                   </div> \
@@ -125,7 +126,7 @@ my.ColumnTransform = Backbone.View.extend({
         </table> \
       </div> \
     </div> \
-    <div class="dialog-footer"> \
+    <div class="modal-footer"> \
       <button class="okButton btn primary">&nbsp;&nbsp;Update All&nbsp;&nbsp;</button> \
       <button class="cancelButton btn danger">Cancel</button> \
     </div> \
@@ -161,7 +162,7 @@ my.ColumnTransform = Backbone.View.extend({
       my.notify("Error with function! " + editFunc.errorMessage);
       return;
     }
-    util.hide('dialog');
+    this.el.modal('hide');
     my.notify("Updating all visible docs. This could take a while...", {persist: true, loader: true});
       var docs = self.model.currentDocuments.map(function(doc) {
        return doc.toJSON();