From 8e21dda195015a3c9420553f874c10d3ebfa5dfa Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Mon, 3 Jan 2011 20:24:21 -0800
Subject: Complete rewrite of the organize module in Javascript using the
 Sencha JavaScript library.  It's got all the functionality from the Flash
 version except it doesn't support creating new albums or uploading photos.

Only tested in Chrome 10.0.x so far.
---
 .../organize/vendor/ext/images/default/tree/arrows.gif   | Bin 0 -> 617 bytes
 .../organize/vendor/ext/images/default/tree/drop-add.gif | Bin 0 -> 1001 bytes
 .../vendor/ext/images/default/tree/drop-between.gif      | Bin 0 -> 907 bytes
 .../vendor/ext/images/default/tree/drop-over.gif         | Bin 0 -> 911 bytes
 .../vendor/ext/images/default/tree/folder-open.gif       | Bin 0 -> 956 bytes
 .../organize/vendor/ext/images/default/tree/folder.gif   | Bin 0 -> 952 bytes
 modules/organize/vendor/ext/images/default/tree/leaf.gif | Bin 0 -> 945 bytes
 .../organize/vendor/ext/images/default/tree/loading.gif  | Bin 0 -> 771 bytes
 8 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 modules/organize/vendor/ext/images/default/tree/arrows.gif
 create mode 100644 modules/organize/vendor/ext/images/default/tree/drop-add.gif
 create mode 100644 modules/organize/vendor/ext/images/default/tree/drop-between.gif
 create mode 100644 modules/organize/vendor/ext/images/default/tree/drop-over.gif
 create mode 100644 modules/organize/vendor/ext/images/default/tree/folder-open.gif
 create mode 100644 modules/organize/vendor/ext/images/default/tree/folder.gif
 create mode 100644 modules/organize/vendor/ext/images/default/tree/leaf.gif
 create mode 100644 modules/organize/vendor/ext/images/default/tree/loading.gif

(limited to 'modules/organize/vendor/ext/images/default/tree')

diff --git a/modules/organize/vendor/ext/images/default/tree/arrows.gif b/modules/organize/vendor/ext/images/default/tree/arrows.gif
new file mode 100644
index 00000000..26834639
Binary files /dev/null and b/modules/organize/vendor/ext/images/default/tree/arrows.gif differ
diff --git a/modules/organize/vendor/ext/images/default/tree/drop-add.gif b/modules/organize/vendor/ext/images/default/tree/drop-add.gif
new file mode 100644
index 00000000..b22cd144
Binary files /dev/null and b/modules/organize/vendor/ext/images/default/tree/drop-add.gif differ
diff --git a/modules/organize/vendor/ext/images/default/tree/drop-between.gif b/modules/organize/vendor/ext/images/default/tree/drop-between.gif
new file mode 100644
index 00000000..5c6c09d9
Binary files /dev/null and b/modules/organize/vendor/ext/images/default/tree/drop-between.gif differ
diff --git a/modules/organize/vendor/ext/images/default/tree/drop-over.gif b/modules/organize/vendor/ext/images/default/tree/drop-over.gif
new file mode 100644
index 00000000..30d1ca71
Binary files /dev/null and b/modules/organize/vendor/ext/images/default/tree/drop-over.gif differ
diff --git a/modules/organize/vendor/ext/images/default/tree/folder-open.gif b/modules/organize/vendor/ext/images/default/tree/folder-open.gif
new file mode 100644
index 00000000..56ba737b
Binary files /dev/null and b/modules/organize/vendor/ext/images/default/tree/folder-open.gif differ
diff --git a/modules/organize/vendor/ext/images/default/tree/folder.gif b/modules/organize/vendor/ext/images/default/tree/folder.gif
new file mode 100644
index 00000000..20412f7c
Binary files /dev/null and b/modules/organize/vendor/ext/images/default/tree/folder.gif differ
diff --git a/modules/organize/vendor/ext/images/default/tree/leaf.gif b/modules/organize/vendor/ext/images/default/tree/leaf.gif
new file mode 100644
index 00000000..445769d3
Binary files /dev/null and b/modules/organize/vendor/ext/images/default/tree/leaf.gif differ
diff --git a/modules/organize/vendor/ext/images/default/tree/loading.gif b/modules/organize/vendor/ext/images/default/tree/loading.gif
new file mode 100644
index 00000000..e846e1d6
Binary files /dev/null and b/modules/organize/vendor/ext/images/default/tree/loading.gif differ
-- 
cgit v1.2.3


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/organize/vendor/ext/images/default/tree')

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