From 89597e7e703dddef8a2379f822772f9fd205d03b Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Thu, 6 Jan 2011 23:43:26 -0800
Subject: [PATCH] Add a spinner to the dialog when loading the iframe so that
 it's not just a blank dialog.  Create separate CSS for dialog vs. frame.
 Don't show the Loading message for the first load.

---
 modules/organize/css/organize_dialog.css       |  17 +++++++++++++++++
 .../css/{organize.css => organize_frame.css}   |   0
 .../vendor/ext/images/default/tree/leaf.gif    | Bin 945 -> 0 bytes
 .../organize/views/organize_dialog.html.php    |  14 +++++++-------
 modules/organize/views/organize_frame.html.php |  13 +++++++++++--
 5 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100644 modules/organize/css/organize_dialog.css
 rename modules/organize/css/{organize.css => organize_frame.css} (100%)
 delete mode 100644 modules/organize/vendor/ext/images/default/tree/leaf.gif

diff --git a/modules/organize/css/organize_dialog.css b/modules/organize/css/organize_dialog.css
new file mode 100644
index 00000000..2b39cdf4
--- /dev/null
+++ b/modules/organize/css/organize_dialog.css
@@ -0,0 +1,17 @@
+#g-organize-frame {
+  border: 0px;
+  width: 100%;
+  height: 100%;
+}
+
+#g-organize-app-loading {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  background-image: url(../vendor/ext/images/default/tree/loading.gif);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize_frame.css
similarity index 100%
rename from modules/organize/css/organize.css
rename to modules/organize/css/organize_frame.css
diff --git a/modules/organize/vendor/ext/images/default/tree/leaf.gif b/modules/organize/vendor/ext/images/default/tree/leaf.gif
deleted file mode 100644
index 445769d3f863fff85bf8dae9e50ca2fbdd2d580f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 945
zcmZ?wbhEHb6krfwXlDQcQ_o~GuN3{H6Nag0EsGx6l|6PSd+b*I#H;qP!+!_A#wTHI
zPb1o&CiOkbneseu`t#JOpR;CuEt~zKYW~Z@xnJuSzARt#t#<j3hK7d8i?&Z&x@*?T
zee>2GZdv-WZP}~tRj*oB|LorIYr@vw({}!uwfFDhO(&LbJ2U^lzeR`sUwH800T8|T
z00#d*{P_PLi2nZvyK9sf4FQ^mfZ|UUW(Ec>1|5)1pgh6A(Z?XlA>*-O!NF!$M-7&b
z2M@Kd^GWGABrIrf5YP;mqG0Ic!oef1<<a5rV38BQh=N7Jga;0d)0tW3bvSNLJ1edq
z!y%BN#MUt1KJ!t@L8XQRd}jI2QUXI1+Gj~F^6K4nXhjpRXD;8?RR`4r7@VdTos~+~
jxV+J1x!+o?4Xb@6ETcC>ENsed*j@4Yk?RR_1qN#Xfm)wA

diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 7bff576d..a386fa77 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -1,11 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<style>
-  #g-organize-frame {
-    border: 0px;
-    width: 100%;
-    height: 100%;
-  }
-</style>
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize_dialog.css") ?>" />
 <script type="text/javascript">
   var ORGANIZE_TITLE =
     <?= t("Organize :: %album_title", array("album_title" => "__TITLE__"))->for_js() ?>;
@@ -18,6 +12,12 @@
     $("#g-dialog").dialog("option", "title", ORGANIZE_TITLE.replace("__TITLE__", title));
   }
   set_title("<?= $album->title ?>");
+
+  var done_loading = function() {
+    $("#g-organize-app-loading").hide();
+  }
 </script>
+<div id="g-organize-app-loading">&nbsp;</div>
 <iframe id="g-organize-frame" src="<?= url::site("organize/frame/{$album->id}") ?>">
 </iframe>
+
diff --git a/modules/organize/views/organize_frame.html.php b/modules/organize/views/organize_frame.html.php
index 16f78603..cdbf3be7 100644
--- a/modules/organize/views/organize_frame.html.php
+++ b/modules/organize/views/organize_frame.html.php
@@ -1,7 +1,7 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ext-all.css") ?>" />
 <link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ux-all.css") ?>" />
-<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize.css") ?>" />
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize_frame.css") ?>" />
 <style type="text/css">
   .g-organize div.thumb-album div.icon {
     background-image: url(<?= url::file("modules/organize/vendor/ext/images/default/tree/folder.gif") ?>);
@@ -26,6 +26,11 @@
       thumb_data_view.el.unmask();
     }
 
+    // Notify the parent dialog that the ExtJS app is loaded
+    if (parent.done_loading) {
+      parent.done_loading();
+    }
+
     var show_generic_error = function() {
       stop_busy();
       Ext.Msg.alert(
@@ -34,7 +39,11 @@
 
     var current_album_id = null;
     var load_album_data = function(id) {
-      start_busy(<?= t("Loading...")->for_js() ?>);
+      if (current_album_id) {
+        // Don't show the loading message on the initial load, it
+        // feels a little jarring.
+        start_busy(<?= t("Loading...")->for_js() ?>);
+      }
       Ext.Ajax.request({
         url: '<?= url::site("organize/album_info/__ID__") ?>'.replace("__ID__", id),
         success: function(xhr, opts) {