Update quick edit markup, styles, js. One step towards jquery ui theme.

7 files changed, 33 insertions, 42 deletions

diff --git a/core/css/quick.css b/core/css/quick.css
index 5a8b21cd..7bf78464 100644
--- a/core/css/quick.css
+++ b/core/css/quick.css
@@ -1,58 +1,50 @@
 .gQuick {
   border: none !important;
-	  margin: 0 !important;
+	margin: 0 !important;
   padding: 0 !important;
 }
 
 #gQuickPane {
-  background: #fff;
-  border-bottom: 1px dashed #000;
+  background: #000;
+  border-bottom: 1px solid #fff;
   opacity: 0.8;
 }
 
-#gQuickPane div {
-  background-color: red;
+#gQuickPane a {
+  background-color: #333;
+  background-image: url(../images/d8e7f3_edit_icons.png);
+  background-repeat: no-repeat;
   cursor: pointer;
-  display: inline;
+  display: block;
   float: right;
-  margin: 8px;
-}
-
-#gQuickPane .rotate-clockwise {
-  background: url('../images/arrow_rotate_clockwise.png');
   height: 16px;
-  position: absolute;
-  right: 0px;
+  margin: 8px;
   top: 0px;
   width: 16px;
 }
 
-#gQuickPane .rotate-clockwise span {
+#gQuickPane a:hover {
+  background-color: #666;
+}
+  
+#gQuickPane a span {
   display: none;
 }
 
-#gQuickPane .rotate-counter-clockwise {
-  background: url('../images/arrow_rotate_anticlockwise.png');
-  height: 16px;
-  left: 0px;
+#gQuickPane .clockwise {
+  background-position: -16px 0;
   position: absolute;
-  top: 0px;
-  width: 16px;
+  right: 0px;
 }
 
-#gQuickPane .rotate-counter-clockwise span {
-  display: none;
+#gQuickPane .counter-clockwise {
+  background-position: 0 0;
+  left: 0px;
+  position: absolute;
 }
 
 #gQuickPane .edit {
-  background: url('../images/image_edit.png');
-  height: 16px;
-  left: 50%;
+  background-position: 0 -16px;
+  left: 42%;
   position: absolute;
-  top: 0px;
-  width: 16px;
-}
-
-#gQuickPane .edit span {
-  display: none;
 }
diff --git a/core/images/arrow_rotate_anticlockwise.png b/core/images/arrow_rotate_anticlockwise.png
deleted file mode 100644
index 46c75aa8..00000000
--- a/core/images/arrow_rotate_anticlockwise.png
+++ /dev/null
diff --git a/core/images/arrow_rotate_clockwise.png b/core/images/arrow_rotate_clockwise.png
deleted file mode 100644
index aa65210e..00000000
--- a/core/images/arrow_rotate_clockwise.png
+++ /dev/null
diff --git a/core/images/d8e7f3_edit_icons.png b/core/images/d8e7f3_edit_icons.png
new file mode 100644
index 00000000..1ca36415
--- /dev/null
+++ b/core/images/d8e7f3_edit_icons.png
diff --git a/core/images/image_edit.png b/core/images/image_edit.png
deleted file mode 100644
index 0aa4cc65..00000000
--- a/core/images/image_edit.png
+++ /dev/null
diff --git a/core/js/quick.js b/core/js/quick.js
index b1b43b73..d934bd72 100644
--- a/core/js/quick.js
+++ b/core/js/quick.js
@@ -12,7 +12,7 @@ var show_quick = function() {
     "position": "absolute",
     "top": pos.top,
     "left": pos.left,
-    "width": img.innerWidth() + 1,
+    "width": img.innerWidth(),
     "height": 32
   });
   quick.hover(function() { }, hide_quick);
@@ -21,7 +21,8 @@ var show_quick = function() {
     {},
     function(data, textStatus) {
       $("#gQuickPane").html(data);
-      $("#gQuickPane div").click(function() {
+      $("#gQuickPane a").click(function(e) {
+        e.preventDefault();
         quick_do(quick, $(this), img);
       });
     }
@@ -55,6 +56,7 @@ var quick_do = function(quick, pane, img) {
       }
     });
   }
+  return false;
 };
 
 var hide_quick = function() {
diff --git a/core/views/quick_pane.html.php b/core/views/quick_pane.html.php
index 9a0e56d5..75149e18 100644
--- a/core/views/quick_pane.html.php
+++ b/core/views/quick_pane.html.php
@@ -1,27 +1,24 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <? if ($item->type == "photo"): ?>
 <? if (graphics::can("rotate")): ?>
-<div class="rotate-counter-clockwise"
-     href="<?= url::site("quick/rotate/$item->id/ccw?csrf=" . access::csrf_token()) ?>">
+<a class="counter-clockwise" href="<?= url::site("quick/rotate/$item->id/ccw?csrf=" . access::csrf_token()) ?>">
   <span>
     <?= t("Rotate CCW") ?>
   </span>
-</div>
+</a>
 <? endif ?>
 
-<div class="edit gDialogLink"
-     href="<?= url::site("quick/form_edit/$item->id") ?>">
+<a class="edit gDialogLink" href="<?= url::site("quick/form_edit/$item->id") ?>">
   <span>
     <?= t("Edit") ?>
   </span>
-</div>
+</a>
 
 <? if (graphics::can("rotate")): ?>
-<div class="rotate-clockwise"
-     href="<?= url::site("quick/rotate/$item->id/cw?csrf=" . access::csrf_token()) ?>">
+<a class="clockwise" href="<?= url::site("quick/rotate/$item->id/cw?csrf=" . access::csrf_token()) ?>">
   <span>
     <?= t("Rotate CCW") ?>
   </span>
-</div>
+</a>
 <? endif ?>
 <? endif ?>