From b98f498ed652f10ffc6dbdd1f7305ff9ec262f74 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Sun, 11 Jan 2009 22:14:44 +0000
Subject: Change admin/graphics to avoid using radio buttons.  Instead, when
 you hover over a toolkit it changes color and your cursor becomes a pointer. 
 Clicking changes the toolkit.

---
 core/views/admin_graphics.html.php | 174 ++++++++++++++++++-------------------
 1 file changed, 83 insertions(+), 91 deletions(-)

(limited to 'core/views')

diff --git a/core/views/admin_graphics.html.php b/core/views/admin_graphics.html.php
index 7d57ec6f..6b64da59 100644
--- a/core/views/admin_graphics.html.php
+++ b/core/views/admin_graphics.html.php
@@ -1,100 +1,92 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<div id="gGraphics">
+<script type="text/javascript">
+  $(document).ready(function() {
+    select_toolkit = function(el) {
+      if (!$(this).hasClass("selected")) {
+        window.location = '<?= url::site("admin/graphics/choose/__TK__?csrf=" . access::csrf_token()) ?>'
+          .replace("__TK__", $(this).attr("id"));
+      }
+    };
+    $("#gAdminGraphics table tr").click(select_toolkit);
+  });
+</script>
+<div id="gAdminGraphics">
   <h1> <?= t("Graphics Settings") ?> </h1>
   <p>
     <?= t("Gallery needs a graphics toolkit in order to manipulate your photos.  Please choose one from the list below.") ?>
   </p>
 
-  <form method="post" action="<?= url::site("admin/graphics/save") ?>">
-    <?= access::csrf_form_field() ?>
-    <h2> <?= t("Graphics Toolkits") ?> </h2>
-    <table>
-      <tr>
-        <td valign="top" style="width: 100px">
-          <center>
-            <input type="radio" name="graphics_toolkit" value="gd"
-                   <? if (!$tk->gd): ?> disabled="disabled" <? endif ?>
-                   <? if ($active == "gd"): ?> checked="checked" <? endif ?>
-                   >
-          </center>
-        </td>
-        <td>
-          <h3> <?= t("GD") ?> </h3>
-          <p>
-            <?= t("The GD graphics library is an extension to PHP commonly installed most webservers.  Please refer to the {{link_start}}GD website{{link_end}} for more information.",
-                  array("link_start" => "<a href=\"http://www.boutell.com/gd/\">", "link_end" => "</a>")) ?>
-          </p>
-          <? if ($tk->gd["GD Version"] && function_exists('imagerotate')): ?>
-          <p class="gSuccess">
-            <?= t("You have GD version {{version}}.", array("version" => $tk->gd["GD Version"])) ?>
-          </p>
-          <? elseif ($tk->gd["GD Version"]): ?>
-          <p class="gWarning">
-            <?= t("You have GD version {{version}}, but it lacks image rotation.",
-                  array("version" => $tk->gd["GD Version"])) ?>
-          </p>
-          <? else: ?>
-          <p class="gInfo">
-            <?= t("You do not have GD installed.") ?>
-          </p>
-          <? endif ?>
-        </td>
-      </tr>
+  <h2> <?= t("Graphics Toolkits") ?> </h2>
+  <table>
+    <tr id="gd" <?= ($active == "gd") ? "class=\"selected\"" : "" ?>>
+      <td valign="top">
+        <img width="170" height="110" src="http://www.libgd.org/skins/libgd/gdlogosmall.png">
+      </td>
+      <td>
+        <h3> <?= t("GD") ?> </h3>
+        <p>
+          <?= t("The GD graphics library is an extension to PHP commonly installed most webservers.  Please refer to the {{link_start}}GD website{{link_end}} for more information.",
+              array("link_start" => "<a href=\"http://www.boutell.com/gd/\">", "link_end" => "</a>")) ?>
+        </p>
+        <? if ($tk->gd["GD Version"] && function_exists('imagerotate')): ?>
+        <p class="gSuccess">
+          <?= t("You have GD version {{version}}.", array("version" => $tk->gd["GD Version"])) ?>
+        </p>
+        <? elseif ($tk->gd["GD Version"]): ?>
+        <p class="gWarning">
+          <?= t("You have GD version {{version}}, but it lacks image rotation.",
+              array("version" => $tk->gd["GD Version"])) ?>
+        </p>
+        <? else: ?>
+        <p class="gInfo">
+          <?= t("You do not have GD installed.") ?>
+        </p>
+        <? endif ?>
+      </td>
+    </tr>
 
-      <tr>
-        <td valign="top" style="width: 100px">
-          <center>
-            <input type="radio" name="graphics_toolkit" value="imagemagick"
-                   <? if (!$tk->imagemagick): ?> disabled="disabled" <? endif ?>
-                   <? if ($active == "imagemagick"): ?> checked="checked" <? endif ?>
-                   >
-          </center>
-        </td>
-        <td>
-          <h3> <?= t("ImageMagick") ?> </h3>
-          <p>
-            <?= t("ImageMagick is a standalone graphics program available on most Linux systems.  Please refer to the {{link_start}}ImageMagick website{{link_end}} for more information.",
-                  array("link_start" => "<a href=\"http://www.imagemagick.org/\">", "link_end" => "</a>")) ?>
-          </p>
-          <? if ($tk->imagemagick): ?>
-          <p class="gSuccess">
-            <?= t("You have ImageMagick installed in {{path}}", array("path" => $tk->imagemagick)) ?>
-          </p>
-          <? else: ?>
-          <p class="gInfo">
-            <?= t("ImageMagick is not available on your system.") ?>
-          </p>
-          <? endif ?>
-        </td>
-      </tr>
+    <tr id="imagemagick" <?= ($active == "imagemagick") ? "class=\"selected\"" : "" ?>>
+      <td valign="top">
+        <img width="114" height="118" src="http://www.imagemagick.org/image/logo.jpg">
+      </td>
+      <td>
+        <h3> <?= t("ImageMagick") ?> </h3>
+        <p>
+          <?= t("ImageMagick is a standalone graphics program available on most Linux systems.  Please refer to the {{link_start}}ImageMagick website{{link_end}} for more information.",
+              array("link_start" => "<a href=\"http://www.imagemagick.org/\">", "link_end" => "</a>")) ?>
+        </p>
+        <? if ($tk->imagemagick): ?>
+        <p class="gSuccess">
+          <?= t("You have ImageMagick installed in {{path}}", array("path" => $tk->imagemagick)) ?>
+        </p>
+        <? else: ?>
+        <p class="gInfo">
+          <?= t("ImageMagick is not available on your system.") ?>
+        </p>
+        <? endif ?>
+      </td>
+    </tr>
 
-      <tr>
-        <td valign="top" style="width: 100px">
-          <center>
-            <input type="radio" name="graphics_toolkit" value="graphicsmagick"
-                   <? if (!$tk->graphicsmagick): ?> disabled="disabled" <? endif ?>
-                   <? if ($active == "graphicsmagick"): ?> checked="checked" <? endif ?>
-                   >
-          </center>
-        </td>
-        <td>
-          <h3> <?= t("GraphicsMagick") ?> </h3>
-          <p>
-            <?= t("GraphicsMagick is a standalone graphics program available on most Linux systems.  Please refer to the {{link_start}}GraphicsMagick website{{link_end}} for more information.",
-                  array("link_start" => "<a href=\"http://www.graphicsmagick.org/\">", "link_end" => "</a>")) ?>
-          </p>
-          <? if ($tk->graphicsmagick): ?>
-          <p class="gSuccess">
-            <?= t("You have GraphicsMagick installed in {{path}}", array("path" => $tk->graphicsmagick)) ?>
-          </p>
-          <? else: ?>
-          <p class="gInfo">
-            <?= t("GraphicsMagick is not available on your system.") ?>
-          </p>
-          <? endif ?>
-        </td>
-      </tr>
-    </table>
-    <input type="submit" value="<?= t("Save") ?>"/>
-  </form>
+    <tr id="graphicsmagick" <?= ($active == "graphicsmagick") ? "class=\"selected\"" : "" ?>>
+      <td valign="top">
+        <img width="107" height="76" src="http://www.graphicsmagick.org/images/gm-107x76.png">
+      </td>
+      <td>
+        <h3> <?= t("GraphicsMagick") ?> </h3>
+        <p>
+          <?= t("GraphicsMagick is a standalone graphics program available on most Linux systems.  Please refer to the {{link_start}}GraphicsMagick website{{link_end}} for more information.",
+              array("link_start" => "<a href=\"http://www.graphicsmagick.org/\">", "link_end" => "</a>")) ?>
+        </p>
+        <? if ($tk->graphicsmagick): ?>
+        <p class="gSuccess">
+          <?= t("You have GraphicsMagick installed in {{path}}", array("path" => $tk->graphicsmagick)) ?>
+        </p>
+        <? else: ?>
+        <p class="gInfo">
+          <?= t("GraphicsMagick is not available on your system.") ?>
+        </p>
+        <? endif ?>
+      </td>
+    </tr>
+  </table>
 </div>
-- 
cgit v1.2.3