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.
---
 modules/organize/css/organize.css       | 60 +++++++++++++++++++++++++++++++++
 modules/organize/css/organize_theme.css | 18 ----------
 2 files changed, 60 insertions(+), 18 deletions(-)
 create mode 100644 modules/organize/css/organize.css
 delete mode 100644 modules/organize/css/organize_theme.css

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
new file mode 100644
index 00000000..00395520
--- /dev/null
+++ b/modules/organize/css/organize.css
@@ -0,0 +1,60 @@
+.g-organize {
+  font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+.g-organize div.thumb {
+  padding: 8px;
+  margin: 8px;
+}
+
+.g-organize div.selected {
+  background: #C9D8EB;
+}
+
+.g-organize div.thumb img {
+  border: 4px solid white;
+}
+
+.g-organize div.thumb:hover {
+  border: 2px solid #eee;
+  margin: 6px;
+  cursor: pointer;
+}
+
+.g-organize div.thumb {
+  display: inline-block;
+}
+
+.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.drop-target {
+  background: #eee;
+}
+
+.g-organize div.active {
+  border-left: 4px solid #C9D8EB;
+  margin-left: 4px;
+}
+
+div.multi-proxy div {
+  display: inline-block;
+}
+
+.g-organize .x-tree-node-el {
+  font-size: 12px;
+  line-height: 20px;
+}
diff --git a/modules/organize/css/organize_theme.css b/modules/organize/css/organize_theme.css
deleted file mode 100644
index e698f88d..00000000
--- a/modules/organize/css/organize_theme.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/** *******************************************************************
- * Organize styles that are theme overrideable
- *********************************************************************/
-#g-organize {
-  background-color: #FFFFFF;
-  border: 0px solid #000000;
-  color: #0E2B52;
-}
-
-#g-organize-hover {
-  background-color: #CFDEFF;
-  display: none;
-}
-
-#g-organize-active {
-  background-color: #6699CC;
-  display: none;
-}
-- 
cgit v1.2.3


From 51d66df1924b9fb835ed741042beddce4f6e899f Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Tue, 4 Jan 2011 00:14:53 -0800
Subject: Switch to using Ext.Element.mask for a custom busy message that looks
 a little cleaner.

---
 modules/organize/css/organize.css               |  9 +++++++
 modules/organize/views/organize_dialog.html.php | 32 +++++++++++++++----------
 2 files changed, 29 insertions(+), 12 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 00395520..be449138 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -58,3 +58,12 @@ div.multi-proxy div {
   font-size: 12px;
   line-height: 20px;
 }
+
+.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;
+}
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 7c812f32..a3b1a1c5 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -20,13 +20,21 @@
      * Utility functions for loading data and making changes
      * ********************************************************************************
      */
+    var start_busy = function(msg) {
+      outer.el.mask(msg, "loading");
+    }
+
+    var stop_busy = function() {
+      outer.el.unmask();
+    }
+
     var current_album_id = null;
     var load_album_data = function(id) {
-      Ext.Msg.wait(<?= t("Loading...")->for_js() ?>);
+      start_busy(<?= t("Loading...")->for_js() ?>);
       Ext.Ajax.request({
         url: '<?= url::site("organize/album_info/__ID__") ?>'.replace("__ID__", id),
         success: function(xhr, opts) {
-          Ext.Msg.hide();
+          stop_busy();
           var album_info = Ext.util.JSON.decode(xhr.responseText);
           var store = new Ext.data.JsonStore({
             autoDestroy: true,
@@ -41,7 +49,7 @@
           sort_order_combobox.setValue(album_info.sort_order);
         },
         failure: function() {
-          Ext.Msg.hide();
+          stop_busy();
           Ext.Msg.alert(
             <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
         }
@@ -55,17 +63,17 @@
     };
 
     var set_album_sort = function(params) {
-      Ext.Msg.wait(<?= t("Changing sort...")->for_js() ?>);
+      start_busy(<?= t("Changing sort...")->for_js() ?>);
       params['csrf'] = '<?= access::csrf_token() ?>';
       Ext.Ajax.request({
         url: '<?= url::site("organize/set_sort/__ID__") ?>'.replace("__ID__", current_album_id),
         method: "post",
         success: function() {
-          Ext.Msg.hide();
+          stop_busy();
           reload_album_data();
         },
         failure: function() {
-          Ext.Msg.hide();
+          stop_busy();
           Ext.Msg.alert(
             <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
         },
@@ -137,16 +145,16 @@
               for (var i = 0; i != nodes.length; i++) {
                 source_ids.push(Ext.fly(nodes[i]).getAttribute("rel"));
               }
-              Ext.Msg.wait(<?= t("Rearranging...")->for_js() ?>);
+              start_busy(<?= t("Rearranging...")->for_js() ?>);
               Ext.Ajax.request({
                 url: '<?= url::site("organize/move_before") ?>',
                 method: "post",
                 success: function() {
-                  Ext.Msg.hide();
+                  stop_busy();
                   reload_album_data();
                 },
                 failure: function() {
-                  Ext.Msg.hide();
+                  stop_busy();
                   Ext.Msg.alert(
                     <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
                 },
@@ -293,12 +301,12 @@
                 source_ids.push(node.getAttribute("rel"));
               }
               var target_id = target.getAttribute("ext:tree-node-id");
-              Ext.Msg.wait(<?= t("Moving...")->for_js() ?>);
+              start_busy(<?= t("Moving...")->for_js() ?>);
               Ext.Ajax.request({
                 url: '<?= url::site("organize/reparent") ?>',
                 method: "post",
                 success: function() {
-                  Ext.Msg.hide();
+                  stop_busy();
                   reload_album_data();
                   v.getNodeById(target_id).reload();
 
@@ -311,7 +319,7 @@
                   }
                 },
                 failure: function() {
-                  Ext.Msg.hide();
+                  stop_busy();
                   Ext.Msg.alert(
                     <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
                 },
-- 
cgit v1.2.3


From 372905bd1310fc446db795661e1eb013674e5a75 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 02:00:40 -0800
Subject: Support moving an item before or after the target.

---
 modules/organize/controllers/organize.php       | 11 ++++++++---
 modules/organize/css/organize.css               |  7 ++++++-
 modules/organize/views/organize_dialog.html.php | 23 +++++++++++++++++------
 3 files changed, 31 insertions(+), 10 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php
index 18e6054b..c23d6d61 100644
--- a/modules/organize/controllers/organize.php
+++ b/modules/organize/controllers/organize.php
@@ -103,7 +103,7 @@ class Organize_Controller extends Controller {
     json::reply(null);
   }
 
-  function move_before() {
+  function rearrange() {
     access::verify_csrf();
 
     $input = Input::instance();
@@ -125,20 +125,25 @@ class Organize_Controller extends Controller {
     }
 
     $source_ids = explode(",", $input->post("source_ids"));
+    $base_weight = $target->weight;
+    if ($input->post("relative") == "after") {
+      $base_weight++;
+    }
+
     if ($source_ids) {
       // Make a hole the right size
       db::build()
         ->update("items")
         ->set("weight", db::expr("`weight` + " . count($source_ids)))
         ->where("parent_id", "=", $album->id)
-        ->where("weight", ">=", $target->weight)
+        ->where("weight", ">=", $base_weight)
         ->execute();
 
       // Move all the source items to the right spots.
       for ($i = 0; $i < count($source_ids); $i++) {
         $source = ORM::factory("item", $source_ids[$i]);
         if ($source->parent_id = $album->id) {
-          $source->weight = $target->weight + $i;
+          $source->weight = $base_weight + $i;
           $source->save();
         }
       }
diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index be449138..82de9ad7 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -45,11 +45,16 @@
   background: #eee;
 }
 
-.g-organize div.active {
+.g-organize div.active-left {
   border-left: 4px solid #C9D8EB;
   margin-left: 4px;
 }
 
+.g-organize div.active-right {
+  border-right: 4px solid #C9D8EB;
+  margin-right: 4px;
+}
+
 div.multi-proxy div {
   display: inline-block;
 }
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 773e1955..a482fb92 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -131,13 +131,22 @@
             getTargetFromEvent: function(e) {
               return e.getTarget("div.thumb", 10);
             },
-            onNodeEnter: function(target, dd, e, data) {
-              Ext.fly(target).addClass("active");
-            },
             onNodeOut: function(target, dd, e, data) {
-              Ext.fly(target).removeClass("active");
+              Ext.fly(target).removeClass("active-left");
+              Ext.fly(target).removeClass("active-right");
             },
             onNodeOver: function(target, dd, e, data) {
+              var target_x = Ext.lib.Dom.getX(target);
+              var target_center = target_x + (target.offsetWidth / 2);
+              if (Ext.lib.Event.getPageX(e) < target_center) {
+                Ext.fly(target).addClass("active-left");
+                Ext.fly(target).removeClass("active-right");
+                this.drop_side = "before";
+              } else {
+                Ext.fly(target).removeClass("active-left");
+                Ext.fly(target).addClass("active-right");
+                this.drop_side = "after";
+              }
               return Ext.dd.DropZone.prototype.dropAllowed;
             },
             onNodeDrop: function(target, dd, e, data) {
@@ -147,8 +156,9 @@
                 source_ids.push(Ext.fly(nodes[i]).getAttribute("rel"));
               }
               start_busy(<?= t("Rearranging...")->for_js() ?>);
+              target = Ext.fly(target);
               Ext.Ajax.request({
-                url: '<?= url::site("organize/move_before") ?>',
+                url: '<?= url::site("organize/rearrange") ?>',
                 method: "post",
                 success: function() {
                   stop_busy();
@@ -161,7 +171,8 @@
                 },
                 params: {
                   source_ids: source_ids.join(","),
-                  target_id: Ext.fly(target).getAttribute("rel"),
+                  target_id: target.getAttribute("rel"),
+                  relative: this.drop_side, // calculated in onNodeOver
                   csrf: '<?= access::csrf_token() ?>'
                 }
               });
-- 
cgit v1.2.3


From 28760daaefebf802dbe28ac171ea16aef3007418 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 20:11:32 -0800
Subject: Improve IE grid compatibility by forcing a regular width/height for
 thumbnails and using float: left.

---
 modules/organize/css/organize.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 82de9ad7..81f41f21 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -5,6 +5,10 @@
 .g-organize div.thumb {
   padding: 8px;
   margin: 8px;
+  width: 128px;
+  height: 128px;
+  vertical-align: middle;
+  float: left;
 }
 
 .g-organize div.selected {
@@ -21,10 +25,6 @@
   cursor: pointer;
 }
 
-.g-organize div.thumb {
-  display: inline-block;
-}
-
 .g-organize div.thumb div.icon {
   position: relative;
   padding: 0px;
-- 
cgit v1.2.3


From ce70669b8f09a9154723df80992ab6afe02c1d5c Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 21:17:11 -0800
Subject: Visual tweaks for IE8 compatibility.

Set the min width and min height to what IE8 wants the thumbnail's box
to be when the inner image maxes out at 120 pixels (specified in
Organize_Controller::album_info()).

Avoid using inline-block.
---
 modules/organize/css/organize.css               | 9 +++------
 modules/organize/views/organize_dialog.html.php | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 81f41f21..6b034fc2 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -5,8 +5,8 @@
 .g-organize div.thumb {
   padding: 8px;
   margin: 8px;
-  width: 128px;
-  height: 128px;
+  width: 144px;
+  height: 149px;
   vertical-align: middle;
   float: left;
 }
@@ -17,6 +17,7 @@
 
 .g-organize div.thumb img {
   border: 4px solid white;
+  margin: 0px;
 }
 
 .g-organize div.thumb:hover {
@@ -55,10 +56,6 @@
   margin-right: 4px;
 }
 
-div.multi-proxy div {
-  display: inline-block;
-}
-
 .g-organize .x-tree-node-el {
   font-size: 12px;
   line-height: 20px;
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 8ba9b3cc..eaba6cdd 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -109,7 +109,7 @@
                   var div = document.createElement("div");
                   div.className = "multi-proxy";
                   for (var i = 0; i != selected_nodes.length; i++) {
-                    div.appendChild(selected_nodes[i].cloneNode(true));
+                    div.appendChild(Ext.get(selected_nodes[i]).dom.firstChild.cloneNode(true));
                     if ((i + 1) % 3 == 0) {
                       div.appendChild(document.createElement("br"));
                     }
@@ -290,7 +290,7 @@
       enableDD: true,
       dropConfig: {
         appendOnly: true,
-        ddGroup: "organizeDD",
+        ddGroup: "organizeDD"
       },
       listeners: {
         "click": function(node) {
-- 
cgit v1.2.3


From e6b3886f8f6a3a526876a80470420501bdb25612 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 22:15:13 -0800
Subject: Functional improvements: - Add support for dragging a selection box.

Visual improvements;
- The "ghost" selection now has minimized thumbnails so that
  you're dragging a smaller div around the screen.
---
 modules/organize/css/organize.css               |  12 ++
 modules/organize/vendor/ext/js/DataView-more.js | 160 ++++++++++++++++++++++++
 modules/organize/views/organize_dialog.html.php |  26 ++--
 3 files changed, 191 insertions(+), 7 deletions(-)
 create mode 100644 modules/organize/vendor/ext/js/DataView-more.js

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 6b034fc2..c14faf8c 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -42,6 +42,18 @@
   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;
 }
diff --git a/modules/organize/vendor/ext/js/DataView-more.js b/modules/organize/vendor/ext/js/DataView-more.js
new file mode 100644
index 00000000..1bab1e70
--- /dev/null
+++ b/modules/organize/vendor/ext/js/DataView-more.js
@@ -0,0 +1,160 @@
+/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+/**
+ * @class Ext.DataView.LabelEditor
+ * @extends Ext.Editor
+ * 
+ */
+Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
+    alignment: "tl-tl",
+    hideEl : false,
+    cls: "x-small-editor",
+    shim: false,
+    completeOnEnter: true,
+    cancelOnEsc: true,
+    labelSelector: 'span.x-editable',
+    
+    constructor: function(cfg, field){
+        Ext.DataView.LabelEditor.superclass.constructor.call(this,
+            field || new Ext.form.TextField({
+                allowBlank: false,
+                growMin:90,
+                growMax:240,
+                grow:true,
+                selectOnFocus:true
+            }), cfg
+        );
+    },
+    
+    init : function(view){
+        this.view = view;
+        view.on('render', this.initEditor, this);
+        this.on('complete', this.onSave, this);
+    },
+
+    initEditor : function(){
+        this.view.on({
+            scope: this,
+            containerclick: this.doBlur,
+            click: this.doBlur
+        });
+        this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
+    },
+    
+    doBlur: function(){
+        if(this.editing){
+            this.field.blur();
+        }
+    },
+
+    onMouseDown : function(e, target){
+        if(!e.ctrlKey && !e.shiftKey){
+            var item = this.view.findItemFromChild(target);
+            e.stopEvent();
+            var record = this.view.store.getAt(this.view.indexOf(item));
+            this.startEdit(target, record.data[this.dataIndex]);
+            this.activeRecord = record;
+        }else{
+            e.preventDefault();
+        }
+    },
+
+    onSave : function(ed, value){
+        this.activeRecord.set(this.dataIndex, value);
+    }
+});
+
+
+Ext.DataView.DragSelector = function(cfg){
+    cfg = cfg || {};
+    var view, proxy, tracker;
+    var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
+    var dragSafe = cfg.dragSafe === true;
+
+    this.init = function(dataView){
+        view = dataView;
+        view.on('render', onRender);
+    };
+
+    function fillRegions(){
+        rs = [];
+        view.all.each(function(el){
+            rs[rs.length] = el.getRegion();
+        });
+        bodyRegion = view.el.getRegion();
+    }
+
+    function cancelClick(){
+        return false;
+    }
+
+    function onBeforeStart(e){
+        return !dragSafe || e.target == view.el.dom;
+    }
+
+    function onStart(e){
+        view.on('containerclick', cancelClick, view, {single:true});
+        if(!proxy){
+            proxy = view.el.createChild({cls:'x-view-selector'});
+        }else{
+            if(proxy.dom.parentNode !== view.el.dom){
+                view.el.dom.appendChild(proxy.dom);
+            }
+            proxy.setDisplayed('block');
+        }
+        fillRegions();
+        view.clearSelections();
+    }
+
+    function onDrag(e){
+        var startXY = tracker.startXY;
+        var xy = tracker.getXY();
+
+        var x = Math.min(startXY[0], xy[0]);
+        var y = Math.min(startXY[1], xy[1]);
+        var w = Math.abs(startXY[0] - xy[0]);
+        var h = Math.abs(startXY[1] - xy[1]);
+
+        dragRegion.left = x;
+        dragRegion.top = y;
+        dragRegion.right = x+w;
+        dragRegion.bottom = y+h;
+
+        dragRegion.constrainTo(bodyRegion);
+        proxy.setRegion(dragRegion);
+
+        for(var i = 0, len = rs.length; i < len; i++){
+            var r = rs[i], sel = dragRegion.intersect(r);
+            if(sel && !r.selected){
+                r.selected = true;
+                view.select(i, true);
+            }else if(!sel && r.selected){
+                r.selected = false;
+                view.deselect(i);
+            }
+        }
+    }
+
+    function onEnd(e){
+        if (!Ext.isIE) {
+            view.un('containerclick', cancelClick, view);    
+        }        
+        if(proxy){
+            proxy.setDisplayed(false);
+        }
+    }
+
+    function onRender(view){
+        tracker = new Ext.dd.DragTracker({
+            onBeforeStart: onBeforeStart,
+            onStart: onStart,
+            onDrag: onDrag,
+            onEnd: onEnd
+        });
+        tracker.initEl(view.el);
+    }
+};
\ No newline at end of file
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index a1d57958..d9303075 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -9,6 +9,7 @@
 </style>
 <script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-base.js") ?>"></script>
 <script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-all.js") ?>"></script>
+<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/DataView-more.js") ?>"></script>
 <script type="text/javascript">
   Ext.BLANK_IMAGE_URL = "<?= url::file("modules/organize/vendor/ext/images/default/s.gif") ?>";
   Ext.Ajax.timeout = 1000000;  // something really large
@@ -87,6 +88,9 @@
       autoScroll: true,
       enableDragDrop: true,
       itemSelector: "div.thumb",
+      plugins: [
+        new Ext.DataView.DragSelector({dragSafe: true})
+      ],
       listeners: {
         "render": function(v) {
           v.dragZone = new Ext.dd.DragZone(v.getEl(), {
@@ -106,15 +110,23 @@
                 if (selected_nodes.length == 1) {
                   drag_data.ddel = target;
                 } else {
-                  var div = document.createElement("div");
-                  div.className = "multi-proxy";
+                  var drag_ghost = document.createElement("div");
+                  drag_ghost.className = "drag-ghost";
                   for (var i = 0; i != selected_nodes.length; i++) {
-                    div.appendChild(Ext.get(selected_nodes[i]).dom.firstChild.cloneNode(true));
-                    if ((i + 1) % 3 == 0) {
-                      div.appendChild(document.createElement("br"));
-                    }
+                    var inner = document.createElement("div");
+                    drag_ghost.appendChild(inner);
+
+                    var img = Ext.get(selected_nodes[i]).dom.firstChild;
+                    var child = inner.appendChild(img.cloneNode(true));
+                    Ext.get(child).setWidth(Ext.fly(img).getWidth() / 2);
+                    Ext.get(child).setHeight(Ext.fly(img).getHeight() / 2);
                   }
-                  drag_data.ddel = div;
+                  // The contents of the ghost float, and the ghost is wide enough for
+                  // 4 images across so make sure that the ghost is tall enough.  Thumbnails
+                  // are max 120px high max, and ghost thumbs are half of that, but leave some
+                  // padding because IE is unpredictable.
+                  drag_ghost.style.height = Math.ceil(i/4) * 72 + "px";
+                  drag_data.ddel = drag_ghost;
                 }
                 return drag_data;
               }
-- 
cgit v1.2.3


From 2167168f5112fe9337c544578baa51cc5aed7652 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 22:32:33 -0800
Subject: Get rid of the expando caret in front of empty folders

---
 modules/organize/controllers/organize.php | 4 ++--
 modules/organize/css/organize.css         | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php
index c23d6d61..2ded8a2e 100644
--- a/modules/organize/controllers/organize.php
+++ b/modules/organize/controllers/organize.php
@@ -161,9 +161,9 @@ class Organize_Controller extends Controller {
         "allowDrag" => false,
         "allowDrop" => access::can("edit", $child),
         "editable" => false,
-        "expandable" => true,
+        "expandable" => false,
         "id" => $child->id,
-        "leaf" => false,
+        "leaf" => $child->children_count(array(array("type", "=", "album"))) == 0,
         "text" => $child->title,
         "nodeType" => "async");
 
diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index c14faf8c..be0e0e18 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -73,6 +73,10 @@
   line-height: 20px;
 }
 
+.g-organize .x-tree-node-leaf .x-tree-node-icon{
+  background-image:url(../vendor/ext/images/default/tree/folder.gif);
+}
+
 .loading div {
   font-size: 1.1em;
   padding-left: 24px;
-- 
cgit v1.2.3


From 33b8ec7a6264f91db2639944bc10005c2709f0e3 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 23:47:14 -0800
Subject: Add a label for the sort order

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

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index be0e0e18..e822d407 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -77,6 +77,15 @@
   background-image:url(../vendor/ext/images/default/tree/folder.gif);
 }
 
+.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;
diff --git a/modules/organize/views/organize_frame.html.php b/modules/organize/views/organize_frame.html.php
index 7a125ec9..626a1b7d 100644
--- a/modules/organize/views/organize_frame.html.php
+++ b/modules/organize/views/organize_frame.html.php
@@ -221,6 +221,7 @@
       allowBlank: false,
       forceSelection: true,
       triggerAction: "all",
+      flex: 2,
       store: new Ext.data.ArrayStore({
         id: 0,
         fields: ["key", "value"],
@@ -241,6 +242,7 @@
       allowBlank: false,
       forceSelection: true,
       triggerAction: "all",
+      flex: 2,
       store: new Ext.data.ArrayStore({
         id: 0,
         fields: ["key", "value"],
@@ -264,13 +266,21 @@
       layoutConfig: {
         align: "stretch"
       },
-      items: [sort_column_combobox, sort_order_combobox,
+      items: [
+        {
+          xtype: "label",
+          cls: "sort",
+          flex: 2,
+          text: <?= t("Sort order: ")->for_js() ?>
+        },
+        sort_column_combobox,
+        sort_order_combobox,
         {
           xtype: "spacer",
-          flex: 4
+          flex: 10
         }, {
           xtype: "button",
-          flex: 1,
+          flex: 2,
           text: <?= t("Close")->for_js() ?>,
           listeners: {
             "click": function() {
-- 
cgit v1.2.3


From 9e6e2138dfd507dbd0ce8835072b7d950855b3d4 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 23:55:21 -0800
Subject: Only mask the data view on changes, it's a little less jarring.

---
 modules/organize/css/organize.css              | 19 ++++++++++---------
 modules/organize/views/organize_frame.html.php |  4 ++--
 2 files changed, 12 insertions(+), 11 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index e822d407..d5d8c597 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -68,15 +68,6 @@
   margin-right: 4px;
 }
 
-.g-organize .x-tree-node-el {
-  font-size: 12px;
-  line-height: 20px;
-}
-
-.g-organize .x-tree-node-leaf .x-tree-node-icon{
-  background-image:url(../vendor/ext/images/default/tree/folder.gif);
-}
-
 .g-organize label.sort {
   font: 12px tahoma, arial;
   vertical-align: middle;
@@ -94,3 +85,13 @@
   background-position: 4px 8px;
   background-repeat: no-repeat;
 }
+
+/* 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/views/organize_frame.html.php b/modules/organize/views/organize_frame.html.php
index 626a1b7d..958b7414 100644
--- a/modules/organize/views/organize_frame.html.php
+++ b/modules/organize/views/organize_frame.html.php
@@ -21,11 +21,11 @@
      * ********************************************************************************
      */
     var start_busy = function(msg) {
-      outer.el.mask(msg, "loading");
+      thumb_data_view.el.mask(msg, "loading");
     }
 
     var stop_busy = function() {
-      outer.el.unmask();
+      thumb_data_view.el.unmask();
     }
 
     var show_generic_error = function() {
-- 
cgit v1.2.3


From edf2a46b0276ca86e13fcbc66ff1b4aa1edf64fb Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Thu, 6 Jan 2011 00:05:35 -0800
Subject: horizontally center thumbnails

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

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index be0e0e18..232a35cd 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -8,6 +8,7 @@
   width: 144px;
   height: 149px;
   vertical-align: middle;
+  text-align: center;
   float: left;
 }
 
-- 
cgit v1.2.3


From 7600e224338943dbe61372020701d87b7e503ab9 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Thu, 6 Jan 2011 09:58:14 -0800
Subject: Whitespace fix.

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

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 87ee8efa..3d7b4a0c 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -93,6 +93,6 @@
   line-height: 20px;
 }
 
-.x-tree-node-leaf .x-tree-node-icon{
+.x-tree-node-leaf .x-tree-node-icon {
   background-image:url(../vendor/ext/images/default/tree/folder.gif);
 }
-- 
cgit v1.2.3


From 0c9dbc96631a95938abfd77586de017549ee2901 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Thu, 6 Jan 2011 21:40:16 -0800
Subject: Adjust CSS for IE compatibility while keeping the grid tight on
 non-IE.

---
 modules/organize/css/organize.css | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 3d7b4a0c..3f7ce8f6 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -4,11 +4,9 @@
 
 .g-organize div.thumb {
   padding: 8px;
-  margin: 8px;
-  width: 144px;
-  height: 149px;
+  width: 128px;
+  height: 128px;
   vertical-align: middle;
-  text-align: center;
   float: left;
 }
 
@@ -16,14 +14,13 @@
   background: #C9D8EB;
 }
 
-.g-organize div.thumb img {
+.g-organize div.thumb {
   border: 4px solid white;
-  margin: 0px;
 }
 
 .g-organize div.thumb:hover {
   border: 2px solid #eee;
-  margin: 6px;
+  margin: 2px;
   cursor: pointer;
 }
 
@@ -61,12 +58,10 @@
 
 .g-organize div.active-left {
   border-left: 4px solid #C9D8EB;
-  margin-left: 4px;
 }
 
 .g-organize div.active-right {
   border-right: 4px solid #C9D8EB;
-  margin-right: 4px;
 }
 
 .g-organize label.sort {
@@ -87,6 +82,12 @@
   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;
-- 
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/css')

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


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')

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')

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')

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