Implemented a "busy" indicator dialog, useful for preparatory steps like guessing types before showing the recon dialog.

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

src/main/webapp/scripts/project/data-table-column-header-ui.js

@@ -377,10 +377,12 @@ DataTableColumnHeaderUI.prototype._doTextTransformPrompt = function() {
 
 DataTableColumnHeaderUI.prototype._doReconcile = function() {
     var self = this;
+    var dismissBusy = DialogSystem.showBusy();
     $.post(
         "/command/guess-types-of-column?" + $.param({ project: theProject.id, columnName: this._column.headerLabel }), 
         null,
         function(data) {
+            dismissBusy();
             new ReconDialog(self._column, data.code == "ok" ? data.types : []);
         },
         "json"

src/main/webapp/scripts/util/dialog.js

@@ -53,3 +53,17 @@ DialogSystem.createDialog = function() {
     return $('<div></div>').addClass("dialog-frame");
 };
 
+DialogSystem.showBusy = function(message) {
+    var frame = DialogSystem.createDialog();
+    frame.width("300px").css("-moz-border-radius", "25px");
+    
+    var body = $('<div>').addClass("dialog-busy-body").appendTo(frame);
+    $('<img>').attr("src", "images/large-spinner.gif").appendTo(body);
+    $('<span>').text(" " + (message || "Working...")).appendTo(body);
+    
+    var level = DialogSystem.showDialog(frame);
+    
+    return function() {
+        DialogSystem.dismissUntil(level - 1);
+    };
+};

src/main/webapp/styles/dialog.css

@@ -45,4 +45,13 @@
 
 .dialog-footer button {
     margin-left: 5px;
-}
+}
+
+.dialog-busy-body {
+    margin: 1em;
+    text-align: center;
+    font-size: 200%;
+    font-weight: bold;
+    color: #faa;
+}
+