Visually attach the quick edit menu to the thumbnail container. Added more edit options (move, select as album cover, delete, additional options).

Need to decide which belong in the bar and which belong in a dropdown menu under "options."

5 files changed, 87 insertions, 46 deletions

diff --git a/core/css/quick.css b/core/css/quick.css
index 7bf78464..fef92c22 100644
--- a/core/css/quick.css
+++ b/core/css/quick.css
@@ -6,7 +6,7 @@
 
 #gQuickPane {
   background: #000;
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid #ccc;
   opacity: 0.8;
 }
 
@@ -16,10 +16,9 @@
   background-repeat: no-repeat;
   cursor: pointer;
   display: block;
-  float: right;
+  float: left;
   height: 16px;
   margin: 8px;
-  top: 0px;
   width: 16px;
 }
 
@@ -31,20 +30,34 @@
   display: none;
 }
 
+#gQuickPane .edit {
+  background-position: 0 0;
+}
+
 #gQuickPane .clockwise {
   background-position: -16px 0;
-  position: absolute;
-  right: 0px;
 }
 
 #gQuickPane .counter-clockwise {
-  background-position: 0 0;
-  left: 0px;
-  position: absolute;
+  background-position: -32px 0;
 }
 
-#gQuickPane .edit {
-  background-position: 0 -16px;
-  left: 42%;
-  position: absolute;
+#gQuickPane .delete {
+  background-position: -48px 0;
 }
+
+#gQuickPane .move {
+  background-position: -64px 0;
+}
+
+#gQuickPane .tag {
+  background-position: -80px 0;
+}
+
+#gQuickPane .cover {
+  background-position: -96px 0;
+}
+
+#gQuickPane .options {
+  background-position: -112px 0;
+}
\ No newline at end of file
diff --git a/core/images/d8e7f3_edit_icons.png b/core/images/d8e7f3_edit_icons.png
index 1ca36415..374e1acd 100644
--- a/core/images/d8e7f3_edit_icons.png
+++ b/core/images/d8e7f3_edit_icons.png
diff --git a/core/js/quick.js b/core/js/quick.js
index d934bd72..0462e939 100644
--- a/core/js/quick.js
+++ b/core/js/quick.js
@@ -1,21 +1,22 @@
 $(document).ready(function() {
-  $(".gQuick").hover(show_quick, function() {});
+  $(".gItem").hover(show_quick, function() {});
 });
 
 var show_quick = function() {
-  var quick = $(this);
+  var cont = $(this);
+  var quick = $(this).find(".gQuick");
   $("#gQuickPane").remove();
-  quick.append("<div id=\"gQuickPane\"></div>");
-  var img = quick.find("img");
-  var pos = img.position();
+  cont.append("<div id=\"gQuickPane\"></div>");
+  var img = cont.find(".gThumbnail");
+  var pos = cont.position();
   $("#gQuickPane").css({
     "position": "absolute",
     "top": pos.top,
     "left": pos.left,
-    "width": img.innerWidth(),
+    "width": cont.innerWidth(),
     "height": 32
   });
-  quick.hover(function() { }, hide_quick);
+  cont.hover(function() { }, hide_quick);
   $.get(
     quick.attr("href"),
     {},
@@ -23,36 +24,33 @@ var show_quick = function() {
       $("#gQuickPane").html(data);
       $("#gQuickPane a").click(function(e) {
         e.preventDefault();
-        quick_do(quick, $(this), img);
+        quick_do(cont, $(this), img);
       });
     }
   );
 };
 
-var quick_do = function(quick, pane, img) {
+var quick_do = function(cont, pane, img) {
   if (pane.hasClass("gDialogLink")) {
     openDialog(pane, function() { window.location.reload(); });
   } else {
-    img.css("opacity", "0.2");
-    quick.addClass("gLoadingLarge");
+    img.css("opacity", "0.1");
+    cont.addClass("gLoadingLarge");
     $.ajax({
       type: "GET",
       url: pane.attr("href"),
       dataType: "json",
       success: function(data) {
-	img.css("opacity", "1");
-	img.attr("width", data.width);
-	img.attr("height", data.height);
-	img.attr("src", data.src);
-	var pos = img.position();
-	quick.removeClass("gLoadingLarge");
-	$("#gQuickPane").css({
-	  "position": "absolute",
-	  "top": pos.top,
-	  "left": pos.left,
-	  "width": img.innerWidth() + 1,
-	  "height": 32
-	});
+		img.css("opacity", "1");
+		img.attr("width", data.width);
+		img.attr("height", data.height);
+		img.attr("src", data.src);
+		if (data.height > data.width) {
+		  img.css("margin-top", -$("#gQuickPane").height());
+		} else {
+		  img.css("margin-top", 0);			
+		}
+		cont.removeClass("gLoadingLarge");
       }
     });
   }
diff --git a/core/views/quick_pane.html.php b/core/views/quick_pane.html.php
index 75149e18..2a8c66ef 100644
--- a/core/views/quick_pane.html.php
+++ b/core/views/quick_pane.html.php
@@ -1,24 +1,54 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <? if ($item->type == "photo"): ?>
+
+<a class="edit gDialogLink" href="<?= url::site("quick/form_edit/$item->id") ?>"
+      title="<?= t("Edit this item's metadata") ?>">
+  <span>
+    <?= t("Edit this item") ?>
+  </span>
+</a>
+
 <? if (graphics::can("rotate")): ?>
-<a class="counter-clockwise" href="<?= url::site("quick/rotate/$item->id/ccw?csrf=" . access::csrf_token()) ?>">
+<a class="clockwise" href="<?= url::site("quick/rotate/$item->id/cw?csrf=" . access::csrf_token()) ?>"
+      title="<?= t("Rotate 90 degrees clockwise") ?>">
   <span>
-    <?= t("Rotate CCW") ?>
+    <?= t("Rotate 90 degrees clockwise") ?>
+  </span>
+</a>
+<a class="counter-clockwise" href="<?= url::site("quick/rotate/$item->id/ccw?csrf=" . access::csrf_token()) ?>"
+      title="<?= t("Rotate 90 degrees counter clockwise") ?>">
+  <span>
+    <?= t("Rotate 90 degrees counter clockwise") ?>
   </span>
 </a>
 <? endif ?>
 
-<a class="edit gDialogLink" href="<?= url::site("quick/form_edit/$item->id") ?>">
+<a class="move" href="<?= url::site("quick/form_edit/$item->id") ?>"
+      title="<?= t("Move this item to another album") ?>">
   <span>
-    <?= t("Edit") ?>
+    <?= t("Move this item to another album") ?>
   </span>
 </a>
 
-<? if (graphics::can("rotate")): ?>
-<a class="clockwise" href="<?= url::site("quick/rotate/$item->id/cw?csrf=" . access::csrf_token()) ?>">
+<a class="cover" href="#"
+      title="<?= t("Select as album cover") ?>">
   <span>
-    <?= t("Rotate CCW") ?>
+    <?= t("Select as album cover") ?>
   </span>
 </a>
-<? endif ?>
+
+<a class="delete" href="#"
+      title="<?= t("Delete this item") ?>">
+  <span>
+    <?= t("Delete this item") ?>
+  </span>
+</a>
+
+<a class="options" href="#"
+      title="<?= t("Additional options") ?>">
+  <span>
+    <?= t("Additional options") ?>
+  </span>
+</a>
+
 <? endif ?>
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index d1670921..8963120b 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -705,12 +705,12 @@ li.gError select {
 /* Ajax loading indicator ~~~~~~~~~~~~~~~~ */
 
 .gLoadingLarge {
-  background: #fff url('../images/loading-lg.gif') no-repeat center center;
+  background: #e8e8e8 url('../images/loading-lg.gif') no-repeat center center;
   font-size: 0;
 }
 
 .gLoadingSmall {
-  background: #fff url('../images/loading-sm.gif') no-repeat center center;
+  background: #e8e8e8 url('../images/loading-sm.gif') no-repeat center center;
   font-size: 0;
 }