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_frame.css | 99 +++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 modules/organize/css/organize_frame.css

(limited to 'modules/organize/css/organize_frame.css')

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);
+}
-- 
cgit v1.2.3


From 4c80ed53d2a3fa3392d2da61c730b6d30de9f2be Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Sat, 8 Jan 2011 19:27:08 -0800
Subject: Put up a more visually pleasing placeholder for items that are
 missing a thumbnail.  Fixes #1591.

---
 modules/organize/controllers/organize.php      |  2 +-
 modules/organize/css/organize_frame.css        | 14 +++++++++++++-
 modules/organize/views/organize_frame.html.php |  8 ++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

(limited to 'modules/organize/css/organize_frame.css')

diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php
index 62417525..bffc52f7 100644
--- a/modules/organize/controllers/organize.php
+++ b/modules/organize/controllers/organize.php
@@ -63,7 +63,7 @@ class Organize_Controller extends Controller {
       $dims = $child->scale_dimensions(120);
       $data["children"][] = array(
         "id" => $child->id,
-        "thumb_url" => $child->thumb_url(),
+        "thumb_url" => $child->has_thumb() ? $child->thumb_url() : null,
         "width" => $dims[1],
         "height" => $dims[0],
         "type" => $child->type,
diff --git a/modules/organize/css/organize_frame.css b/modules/organize/css/organize_frame.css
index 3f7ce8f6..3f8246a2 100644
--- a/modules/organize/css/organize_frame.css
+++ b/modules/organize/css/organize_frame.css
@@ -18,6 +18,18 @@
   border: 4px solid white;
 }
 
+.g-organize div.thumb-missing span {
+  display: block;
+  background: #eee;
+  width: 120px;
+  height: 120px;
+  padding-top: 8px;
+  text-align: center;
+  font: 14px arial, tahoma;
+  border: 1px solid #ddd;
+  font-style: italic;
+}
+
 .g-organize div.thumb:hover {
   border: 2px solid #eee;
   margin: 2px;
@@ -65,7 +77,7 @@
 }
 
 .g-organize label.sort {
-  font: 12px tahoma, arial;
+  font: 12px arial, tahoma;
   vertical-align: middle;
   font-weight: bold;
   height: 22px;
diff --git a/modules/organize/views/organize_frame.html.php b/modules/organize/views/organize_frame.html.php
index 0354fa1d..d8e7920c 100644
--- a/modules/organize/views/organize_frame.html.php
+++ b/modules/organize/views/organize_frame.html.php
@@ -213,10 +213,18 @@
       selectedClass: "selected",
       tpl: new Ext.XTemplate(
         '<tpl for=".">',
+        '<tpl if="thumb_url">',
         '<div class="thumb thumb-{type}" id="thumb-{id}" rel="{id}">',
         '<img src="{thumb_url}" width="{width}" height="{height}" title="{title}">',
         '<div class="icon"></div>',
         '</div>',
+        '</tpl>',
+        '<tpl if="!thumb_url">',
+        '<div class="thumb thumb-missing thumb-{type}" id="thumb-{id}" rel="{id}">',
+        '<span>' + <?= t("No thumbnail")->for_js() ?> + '</span>',
+        '<div class="icon"></div>',
+        '</div>',
+        '</tpl>',
         '</tpl>')
     });
 
-- 
cgit v1.2.3


From a495419b9159592386a3766ad0417631447e24c5 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Sun, 9 Jan 2011 00:00:16 -0800
Subject: Center the image inside the outer thumb div.

---
 modules/organize/css/organize_frame.css | 1 +
 1 file changed, 1 insertion(+)

(limited to 'modules/organize/css/organize_frame.css')

diff --git a/modules/organize/css/organize_frame.css b/modules/organize/css/organize_frame.css
index 3f8246a2..d442fb57 100644
--- a/modules/organize/css/organize_frame.css
+++ b/modules/organize/css/organize_frame.css
@@ -16,6 +16,7 @@
 
 .g-organize div.thumb {
   border: 4px solid white;
+  text-align: center;
 }
 
 .g-organize div.thumb-missing span {
-- 
cgit v1.2.3


From de5b06ae7442db2c7a8999c0c806997248ddb151 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Sun, 9 Jan 2011 02:19:59 -0800
Subject: Add an icon for the delete button so that it stands out a little bit
 more, and disable the button when nothing is selected. Fixes #1592.

---
 modules/organize/css/organize_frame.css           |   6 +++
 modules/organize/vendor/ext/images/fam/delete.gif | Bin 0 -> 989 bytes
 modules/organize/views/organize_frame.html.php    |  53 ++++++++++++++--------
 3 files changed, 39 insertions(+), 20 deletions(-)
 create mode 100644 modules/organize/vendor/ext/images/fam/delete.gif

(limited to 'modules/organize/css/organize_frame.css')

diff --git a/modules/organize/css/organize_frame.css b/modules/organize/css/organize_frame.css
index d442fb57..12bc6091 100644
--- a/modules/organize/css/organize_frame.css
+++ b/modules/organize/css/organize_frame.css
@@ -95,6 +95,12 @@
   background-repeat: no-repeat;
 }
 
+button.delete {
+  background-image: url(../vendor/ext/images/fam/delete.gif);
+  background-position: 10px 8px;
+  background-repeat: no-repeat;
+}
+
 /* IE specific overrides */
 body.ext-ie div.thumb {
   width: 150px;
diff --git a/modules/organize/vendor/ext/images/fam/delete.gif b/modules/organize/vendor/ext/images/fam/delete.gif
new file mode 100644
index 00000000..5e2a3b14
Binary files /dev/null and b/modules/organize/vendor/ext/images/fam/delete.gif differ
diff --git a/modules/organize/views/organize_frame.html.php b/modules/organize/views/organize_frame.html.php
index aad54b08..650574ab 100644
--- a/modules/organize/views/organize_frame.html.php
+++ b/modules/organize/views/organize_frame.html.php
@@ -45,6 +45,7 @@
     }
 
     var current_album_id = null;
+    var current_album_editable = null;
     var load_album_data = function(id) {
       if (current_album_id) {
         // Don't show the loading message on the initial load, it
@@ -67,7 +68,9 @@
           thumb_data_view.bindStore(store);
           sort_column_combobox.setValue(album_info.sort_column);
           sort_order_combobox.setValue(album_info.sort_order);
-          if (album_info.editable) {
+
+          current_album_editable = album_info.editable;
+          if (current_album_editable) {
             thumb_data_view.dragZone.unlock();
           } else {
             thumb_data_view.dragZone.lock();
@@ -237,6 +240,9 @@
               return true;
             }
           });
+        },
+        "selectionchange": function(v, selections) {
+          delete_button.setDisabled(!selections.length || !current_album_editable);
         }
       },
       multiSelect: true,
@@ -312,6 +318,29 @@
       displayField: "value"
     });
 
+    var delete_button = new Ext.Button({
+      flex: 2,
+      text: <?= t("Delete")->for_js() ?>,
+      cls: "x-btn-text-icon",
+      iconCls: "delete",
+      id: "delete-button",
+      disabled: true,
+      listeners: {
+        "click": function() {
+          Ext.Msg.show({
+            title: <?= t("Are you sure you want to delete the selected items?")->for_js() ?>,
+            buttons: Ext.Msg.YESNO,
+            fn: function(buttonId) {
+              if (buttonId == "yes") {
+                delete_selected_items();
+              }
+            }
+          });
+          return true;
+        }
+      }
+    });
+
     var button_panel = new Ext.Panel({
       layout: "hbox",
       region: "south",
@@ -337,25 +366,9 @@
         }, {
           xtype: "spacer",
           flex: 10
-        }, {
-          xtype: "button",
-          flex: 2,
-          text: <?= t("Delete")->for_js() ?>,
-          listeners: {
-            "click": function() {
-              Ext.Msg.show({
-                title: <?= t("Are you sure you want to delete the selected items?")->for_js() ?>,
-                buttons: Ext.Msg.YESNO,
-                fn: function(buttonId) {
-                  if (buttonId == "yes") {
-                    delete_selected_items();
-                  }
-                }
-              });
-              return true;
-            }
-          }
-        }, {
+        },
+        delete_button,
+        {
           xtype: "button",
           flex: 2,
           text: <?= t("Close")->for_js() ?>,
-- 
cgit v1.2.3