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: 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.css                  |  99 ---------------------
 modules/organize/css/organize_dialog.css           |  17 ++++
 modules/organize/css/organize_frame.css            |  99 +++++++++++++++++++++
 .../vendor/ext/images/default/tree/leaf.gif        | Bin 945 -> 0 bytes
 modules/organize/views/organize_dialog.html.php    |  14 +--
 modules/organize/views/organize_frame.html.php     |  13 ++-
 6 files changed, 134 insertions(+), 108 deletions(-)
 delete mode 100644 modules/organize/css/organize.css
 create mode 100644 modules/organize/css/organize_dialog.css
 create mode 100644 modules/organize/css/organize_frame.css
 delete mode 100644 modules/organize/vendor/ext/images/default/tree/leaf.gif

(limited to 'modules')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
deleted file mode 100644
index 3f7ce8f6..00000000
--- a/modules/organize/css/organize.css
+++ /dev/null
@@ -1,99 +0,0 @@
-.g-organize {
-  font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-}
-
-.g-organize div.thumb {
-  padding: 8px;
-  width: 128px;
-  height: 128px;
-  vertical-align: middle;
-  float: left;
-}
-
-.g-organize div.selected {
-  background: #C9D8EB;
-}
-
-.g-organize div.thumb {
-  border: 4px solid white;
-}
-
-.g-organize div.thumb:hover {
-  border: 2px solid #eee;
-  margin: 2px;
-  cursor: pointer;
-}
-
-.g-organize div.thumb div.icon {
-  position: relative;
-  padding: 0px;
-  margin: 0px;
-  visibility: hidden;
-  width: 16px;
-  height: 16px;
-  top: -16px;
-  margin-bottom: -16px;
-  padding-bottom: -16px;
-}
-
-.g-organize div.thumb-album div.icon {
-  visibility: visible;
-}
-
-.g-organize div.drag-ghost {
-  width: 300px;
-  height: 180px;
-}
-
-.g-organize div.drag-ghost div {
-  width: 72px;
-  height: 72px;
-  vertical-align: baseline;
-  float: left;
-}
-
-.g-organize div.drop-target {
-  background: #eee;
-}
-
-.g-organize div.active-left {
-  border-left: 4px solid #C9D8EB;
-}
-
-.g-organize div.active-right {
-  border-right: 4px solid #C9D8EB;
-}
-
-.g-organize label.sort {
-  font: 12px tahoma, arial;
-  vertical-align: middle;
-  font-weight: bold;
-  height: 22px;
-  text-align: center;
-  padding: 4px;
-}
-
-.loading div {
-  font-size: 1.1em;
-  padding-left: 24px;
-  background-color: white;
-  background-image: url(../vendor/ext/images/default/tree/loading.gif);
-  background-position: 4px 8px;
-  background-repeat: no-repeat;
-}
-
-/* IE specific overrides */
-body.ext-ie div.thumb {
-  width: 150px;
-  height: 150px;
-}
-
-/* ExtJS overrides */
-.x-tree-node-el {
-  font-size: 12px;
-  line-height: 20px;
-}
-
-.x-tree-node-leaf .x-tree-node-icon {
-  background-image:url(../vendor/ext/images/default/tree/folder.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_frame.css b/modules/organize/css/organize_frame.css
new file mode 100644
index 00000000..3f7ce8f6
--- /dev/null
+++ b/modules/organize/css/organize_frame.css
@@ -0,0 +1,99 @@
+.g-organize {
+  font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+.g-organize div.thumb {
+  padding: 8px;
+  width: 128px;
+  height: 128px;
+  vertical-align: middle;
+  float: left;
+}
+
+.g-organize div.selected {
+  background: #C9D8EB;
+}
+
+.g-organize div.thumb {
+  border: 4px solid white;
+}
+
+.g-organize div.thumb:hover {
+  border: 2px solid #eee;
+  margin: 2px;
+  cursor: pointer;
+}
+
+.g-organize div.thumb div.icon {
+  position: relative;
+  padding: 0px;
+  margin: 0px;
+  visibility: hidden;
+  width: 16px;
+  height: 16px;
+  top: -16px;
+  margin-bottom: -16px;
+  padding-bottom: -16px;
+}
+
+.g-organize div.thumb-album div.icon {
+  visibility: visible;
+}
+
+.g-organize div.drag-ghost {
+  width: 300px;
+  height: 180px;
+}
+
+.g-organize div.drag-ghost div {
+  width: 72px;
+  height: 72px;
+  vertical-align: baseline;
+  float: left;
+}
+
+.g-organize div.drop-target {
+  background: #eee;
+}
+
+.g-organize div.active-left {
+  border-left: 4px solid #C9D8EB;
+}
+
+.g-organize div.active-right {
+  border-right: 4px solid #C9D8EB;
+}
+
+.g-organize label.sort {
+  font: 12px tahoma, arial;
+  vertical-align: middle;
+  font-weight: bold;
+  height: 22px;
+  text-align: center;
+  padding: 4px;
+}
+
+.loading div {
+  font-size: 1.1em;
+  padding-left: 24px;
+  background-color: white;
+  background-image: url(../vendor/ext/images/default/tree/loading.gif);
+  background-position: 4px 8px;
+  background-repeat: no-repeat;
+}
+
+/* IE specific overrides */
+body.ext-ie div.thumb {
+  width: 150px;
+  height: 150px;
+}
+
+/* ExtJS overrides */
+.x-tree-node-el {
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.x-tree-node-leaf .x-tree-node-icon {
+  background-image:url(../vendor/ext/images/default/tree/folder.gif);
+}
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 445769d3..00000000
Binary files a/modules/organize/vendor/ext/images/default/tree/leaf.gif and /dev/null differ
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) {
-- 
cgit v1.2.3