Added .gLoadingLarge and .gLoadingSmall to show ajax loading indicator. Applied to modal dialogs.

4 files changed, 13 insertions, 2 deletions

diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index b24e7353..703b9bb7 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -740,7 +740,6 @@ span.gInPlaceEdit:hover {
 }
 
 #gDialog {
-  background-color: #fff;
   text-align: left;
 }
 
@@ -748,7 +747,16 @@ span.gInPlaceEdit:hover {
 }
 
 .gDialogLink {
+}
+
+.gLoadingLarge {
+  background: #fff url('../images/loading-lg.gif') no-repeat center center;
+  font-size: 0;
+}
 
+.gLoadingSmall {
+  background: #fff url('../images/loading-sm.gif') no-repeat center center;
+  font-size: 0;
 }
 
 /** *******************************************************************
diff --git a/themes/default/images/loading-lg.gif b/themes/default/images/loading-lg.gif
new file mode 100644
index 00000000..cc70a7a8
--- /dev/null
+++ b/themes/default/images/loading-lg.gif
diff --git a/themes/default/images/loading-sm.gif b/themes/default/images/loading-sm.gif
new file mode 100644
index 00000000..d0bce154
--- /dev/null
+++ b/themes/default/images/loading-sm.gif
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index a7eb7931..3f917ff0 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -138,9 +138,12 @@ function openDialog(element) {
       $("#gDialog").dialog('destroy').remove();
     }
   });
+  $("#gDialog").addClass("gLoadingLarge");
+  $(".ui-dialog-content").height(400);
   $("#gDialog").html(sHref);
   $.get(sHref, function(data) {
-    $("#gDialog").html(data);
+    $("#gDialog").removeClass("gLoadingLarge");	
+    $("#gDialog").html(data).hide().fadeIn();
   });
   return false;
 }