Applied jQuery UI buttons to quick edit pane. Not tested, but icons should display iin IE6 now. Rotate icons will need to be updated later.

4 files changed, 24 insertions, 67 deletions

diff --git a/core/css/quick.css b/core/css/quick.css
index 326576e0..0fe634bd 100644
--- a/core/css/quick.css
+++ b/core/css/quick.css
@@ -15,55 +15,9 @@
 }
 
 #gQuickPane a {
-  background-color: #333;
-  background-image: url(../images/d8e7f3_edit_icons.png);
-  background-repeat: no-repeat;
   cursor: pointer;
-  display: block;
   float: left;
-  height: 16px;
-  margin: 8px;
-  width: 16px;
-}
-
-#gQuickPane a:hover {
-  background-color: #666;
-}
-
-#gQuickPane a span {
-  display: none;
-}
-
-#gQuickPane .edit {
-  background-position: 0 0;
-}
-
-#gQuickPane .clockwise {
-  background-position: -16px 0;
-}
-
-#gQuickPane .counter-clockwise {
-  background-position: -32px 0;
-}
-
-#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;
+  margin: 4px;
 }
 
 #gQuickPaneOptions {
@@ -74,11 +28,5 @@
 
 #gQuickPaneOptions a {
   display: block;
-  background: none;
   width: auto;
 }
-
-#gQuickPaneOptions a:hover {
-  color: #999;
-  background: none;
-}
diff --git a/core/images/d8e7f3_edit_icons.png b/core/images/d8e7f3_edit_icons.png
deleted file mode 100644
index 374e1acd..00000000
--- a/core/images/d8e7f3_edit_icons.png
+++ /dev/null
diff --git a/core/js/quick.js b/core/js/quick.js
index a30694b5..bfef0d65 100644
--- a/core/js/quick.js
+++ b/core/js/quick.js
@@ -28,6 +28,15 @@ var show_quick = function() {
     {},
     function(data, textStatus) {
       $("#gQuickPane").html(data).slideDown("fast");
+      // @todo Move hover to a function
+      $(".ui-state-default").hover(
+        function(){
+          $(this).addClass("ui-state-hover");
+        },
+        function(){
+          $(this).removeClass("ui-state-hover");
+        }
+      );
       $("#gQuickPane a:not(.options)").click(function(e) {
         e.preventDefault();
         quick_do(cont, $(this), img);
diff --git a/core/views/quick_pane.html.php b/core/views/quick_pane.html.php
index a4ec4012..de5a8dcb 100644
--- a/core/views/quick_pane.html.php
+++ b/core/views/quick_pane.html.php
@@ -6,24 +6,24 @@
 <? elseif ($item->type == "album"): ?>
 <? $title = t("Edit this album") ?>
 <? endif ?>
-<a class="edit gDialogLink" href="<?= url::site("quick/form_edit/$item->id") ?>"
+<a class="gDialogLink gButtonLink ui-corner-all ui-state-default" href="<?= url::site("quick/form_edit/$item->id") ?>"
   title="<?= $title ?>">
-  <span>
+  <span class="ui-icon ui-icon-pencil">
     <?= $title ?>
   </span>
 </a>
 
 <? if ($item->is_photo() && graphics::can("rotate")): ?>
-<a class="counter-clockwise" href="<?= url::site("quick/rotate/$item->id/ccw?csrf=" . access::csrf_token()) ?>"
+<a class="gButtonLink ui-corner-all ui-state-default" href="<?= url::site("quick/rotate/$item->id/ccw?csrf=" . access::csrf_token()) ?>"
   title="<?= t("Rotate 90 degrees counter clockwise") ?>">
-  <span>
+  <span class="ui-icon ui-icon-arrowthick-1-w">
     <?= t("Rotate 90 degrees counter clockwise") ?>
   </span>
 </a>
 
-<a class="clockwise" href="<?= url::site("quick/rotate/$item->id/cw?csrf=" . access::csrf_token()) ?>"
+<a class="gButtonLink ui-corner-all ui-state-default" href="<?= url::site("quick/rotate/$item->id/cw?csrf=" . access::csrf_token()) ?>"
   title="<?= t("Rotate 90 degrees clockwise") ?>">
-  <span>
+  <span class="ui-icon ui-icon-arrowthick-1-e">
     <?= t("Rotate 90 degrees clockwise") ?>
   </span>
 </a>
@@ -36,9 +36,9 @@
 <? elseif ($item->type == "album"): ?>
 <? $title = t("Move this album to another album") ?>
 <? endif ?>
-<a class="move gDialogLink" href="<?= url::site("move/browse/$item->id") ?>"
+<a class="gDialogLink gButtonLink ui-corner-all ui-state-default" href="<?= url::site("move/browse/$item->id") ?>"
   title="<?= $title ?>">
-  <span>
+  <span class="ui-icon ui-icon-folder-open">
     <?= $title ?>
   </span>
 </a>
@@ -51,9 +51,9 @@
 <? elseif ($item->type == "album"): ?>
 <? $title = t("Choose this album as the album cover") ?>
 <? endif ?>
-<a class="cover" href="<?= url::site("quick/make_album_cover/$item->id?csrf=" . access::csrf_token()) ?>"
+<a class="gButtonLink ui-corner-all ui-state-default" href="<?= url::site("quick/make_album_cover/$item->id?csrf=" . access::csrf_token()) ?>"
    title="<?= $title ?>">
-  <span>
+  <span class="ui-icon ui-icon-star">
     <?= $title ?>
   </span>
 </a>
@@ -65,17 +65,17 @@
 <? elseif ($item->type == "album"): ?>
 <? $title = t("Delete this album") ?>
 <? endif ?>
-<a class="delete" href="<?= url::site("quick/delete/$item->id?csrf=" . access::csrf_token()) ?>"
+<a class="gButtonLink ui-corner-all ui-state-default" href="<?= url::site("quick/delete/$item->id?csrf=" . access::csrf_token()) ?>"
    title="<?= $title ?>">
-  <span>
+  <span class="ui-icon ui-icon-trash">
     <?= $title ?>
   </span>
 </a>
 <? endif ?>
 
 <? if ($item->is_album()): ?>
-<a class="options" href="#" title="<?= t("additional options") ?>">
-  <span>
+<a class="gButtonLink ui-corner-all ui-state-default" href="#" title="<?= t("additional options") ?>">
+  <span class="ui-icon ui-icon-triangle-1-s">
     <?= t("Additional options") ?>
   </span>
 </a>