Move the drawer to the bottom of the page and compress the thumb grid

when the drawer opens.  This way the drawer is never scrolled.

3 files changed, 35 insertions, 25 deletions

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index baa16d5c..8c36bcdc 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -147,8 +147,8 @@
  */
 #gOrganizeEditDrawer {
   background-color: #13A;
-  float: left;
-  margin: 0 5% 10px;
+  //float: left;
+  //margin: 0 5% 10px;
   width: 90%;
 }
 
@@ -156,15 +156,18 @@
   background-color: #fff;
   border: 1px solid #13A;
   display: none;
-  min-height: 150px; 
+}
+
+#gOrganizeEditDrawerHandle {
+  height: 30px;
 }
 
 #gOrganizeEditHandleLeft {
   background-image: url(organize_edit_drawer.png);
-  background-color: #CFDEFF;
+  background-color: #FFF;
   float: left;
   height: 30px;
-  margin: 2px 0 0;
+  //margin: 2px 0 0;
   width: 15px;
 }
 
@@ -191,12 +194,12 @@
 }
 
 #gOrganizeEditHandleRight {
-  background-color: #CFDEFF;
+  background-color: #FFF;
   background-image: url(organize_edit_drawer.png);
   background-position: -15px 0;
   float: right;
   height: 30px;
-  margin: 2px 0 0;
+  //margin: 2px 0 0;
   width: 15px;
 }
 
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index b3aa523d..43e61e67 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -2,10 +2,10 @@
  * @todo Trap resize of dialog and resize the child areas (tree, grid and edit form)
  */
 var url;
-var height;
 var paused = false;
 var task = null;
 var transitItems = [];
+var heightMicroThumbPanel;
 
 // **************************************************************************
 // JQuery UI Widgets
@@ -41,7 +41,7 @@ var draggable = {
 
       var children = $(clone).find(".gMicroThumb .gThumbnail");
       var width = new String(children.css("width")).replace(/[^0-9]/g,"") * .5;
-      height = new String(children.css("height")).replace(/[^0-9]/g,"") * .5;
+      var height = new String(children.css("height")).replace(/[^0-9]/g,"") * .5;
       var marginTop = new String(children.css("margin-top")).replace(/[^\.0-9]/g,"") * .5;
       children.attr("width", width);
       children.attr("height", height);
@@ -189,7 +189,13 @@ function drawerHandleButtonsClick(event) {
     var operation = $(this).attr("ref");
     switch (operation) {
     case "edit":
-      $("#gOrganizeEditDrawerPanel").slideToggle("normal");
+      $("#gOrganizeEditDrawerPanel").animate(
+        {"height": "toggle", "display": "block"},
+        {duration: "fast",
+          step: function() {
+            $("#gMicroThumbPanel").height(heightMicroThumbPanel - $(this).height());
+          }
+      });
       break;
     case "select-all":
       $(".gMicroThumbContainer").addClass("ui-selected");
@@ -294,14 +300,14 @@ var operationCallback = function (data, textStatus) {
  */
 function organize_dialog_init() {
   var size = getViewportSize();
-  height = size.height() - 100;
+  heightMicroThumbPanel = size.height() - 100;
   var width = size.width() - 100;
 
   // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475
   $(".sf-menu li.sfHover ul").css("z-index", 70);
 
   $("#gDialog").dialog("option", "width", width);
-  $("#gDialog").dialog("option", "height", height);
+  $("#gDialog").dialog("option", "height", heightMicroThumbPanel);
 
   $("#gDialog").dialog("open");
   if ($("#gDialog h1").length) {
@@ -314,14 +320,15 @@ function organize_dialog_init() {
     document.location.reload();
   });
 
-  height -= 2 * parseFloat($("#gDialog").css("padding-top"));
-  height -= 2 * parseFloat($("#gDialog").css("padding-bottom"));
-  height -= $("#gMicroThumbPanel").position().top;
-  height -= $("#gDialog #ft").height();
-  height = Math.round(height);
+  heightMicroThumbPanel -= 2 * parseFloat($("#gDialog").css("padding-top"));
+  heightMicroThumbPanel -= 2 * parseFloat($("#gDialog").css("padding-bottom"));
+  heightMicroThumbPanel -= $("#gMicroThumbPanel").position().top;
+  heightMicroThumbPanel -= $("#gDialog #ft").height();
+  heightMicroThumbPanel -= $("#gOrganizeEditDrawerHandle").height();
+  heightMicroThumbPanel = Math.round(heightMicroThumbPanel);
 
-  $("#gMicroThumbPanel").height(height);
-  $("#gOrganizeTreeContainer").height(height);
+  $("#gMicroThumbPanel").height(heightMicroThumbPanel);
+  $("#gOrganizeTreeContainer").height(heightMicroThumbPanel);
 
   $(".gOrganizeBranch .ui-icon").click(organizeToggleChildren);
   $(".gBranchText").droppable(treeDroppable);
@@ -340,7 +347,7 @@ function retrieveMicroThumbs() {
     var grid_width = $("#gMicroThumbPanel").width();
     url = $("#gMicroThumbPanel").attr("ref");
     url = url.replace("__WIDTH__", grid_width);
-    url = url.replace("__HEIGHT__", height);
+    url = url.replace("__HEIGHT__", heightMicroThumbPanel);
   }
   var url_data = url.replace("__OFFSET__", offset);
   url_data = url_data.replace("__ITEM_ID__", item_id);
diff --git a/modules/organize/views/organize.html.php b/modules/organize/views/organize.html.php
index c4247561..0b17a6ad 100644
--- a/modules/organize/views/organize.html.php
+++ b/modules/organize/views/organize.html.php
@@ -25,7 +25,7 @@
         <h3><?= t("Albums") ?></h3>
       </div>
       <div id="gMessage" class="yui-u">
-    <div class="gInfo"><?= t("Select one or more items to edit; drag and drop items to re-order or move between albums") ?></div>
+        <div class="gInfo"><?= t("Select one or more items to edit; drag and drop items to re-order or move between albums") ?></div>
       </div>
     </div>
     <div class="yui-gf">
@@ -34,8 +34,10 @@
       </div>
       <div id="gMicroThumbPanel" class="yui-u"
            ref="<?= url::site("organize/content/__ITEM_ID__?width=__WIDTH__&height=__HEIGHT__&offset=__OFFSET__") ?>">
-        <div id="gOrganizeEditDrawer">
-          <div id="gOrganizeEditDrawerPanel" class="yui-gf" style="display: none">
+        <ul id="gMicroThumbGrid"></ul>
+      </div>
+        <div id="gOrganizeEditDrawer" class="yui-u">
+          <div id="gOrganizeEditDrawerPanel" class="yui-gf">
             <div id="gOrganizeFormThumbs" class="yui-u first">
               <div id="gOrganizeFormNoImage">
                 <h3><?= t("No Image Selected") ?></h3>
@@ -60,8 +62,6 @@
             </div>
           </div>
         </div>
-        <ul id="gMicroThumbGrid"></ul>
-      </div>
     </div>
   </div>
 </div>