From c383b2fc35bbe1864acb79b784b4cd3a2f82a95e Mon Sep 17 00:00:00 2001
From: Chad Kieffer <chad@2tbsp.com>
Date: Wed, 14 Jan 2009 06:36:47 +0000
Subject: 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."
---
 core/css/quick.css                |  37 ++++++++++++++++++++----------
 core/images/d8e7f3_edit_icons.png | Bin 479 -> 826 bytes
 core/js/quick.js                  |  46 ++++++++++++++++++--------------------
 core/views/quick_pane.html.php    |  46 +++++++++++++++++++++++++++++++-------
 4 files changed, 85 insertions(+), 44 deletions(-)

(limited to 'core')

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
Binary files a/core/images/d8e7f3_edit_icons.png and b/core/images/d8e7f3_edit_icons.png differ
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 ?>
-- 
cgit v1.2.3