Rework the way we do theme selection. Show the currently active theme

and then thumbnails for all the other available themes.  If you select
one of the other available themes, it gives you a preview pane where
you can look at either the main page or the site admin page with the
new theme, then choose to activate it if you like it.

2 files changed, 53 insertions, 73 deletions

diff --git a/core/views/admin_themes.html.php b/core/views/admin_themes.html.php
index 64df7608..f8dc0812 100644
--- a/core/views/admin_themes.html.php
+++ b/core/views/admin_themes.html.php
@@ -1,80 +1,53 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<div id="gThemes">
+<script type="text/javascript">
+  var load_url = '<?= url::site("admin/themes/__TYPE__") ?>';
+  var load = function(type) {
+    $("#gThemePane").load(load_url.replace('__TYPE__', type));
+  }
+
+  var select_url = "<?= url::site("admin/themes/choose") ?>";
+  select = function(type, id) {
+    $.post(select_url, {"type": type, "id": id, "csrf": '<?= access::csrf_token() ?>'},
+           function() { load(type) });
+  }
+</script>
+<div id="gAdminThemes">
   <h1><?= t("Theme Administration") ?></h1>
-  <form method="post" id="gThemeAdmin" action="<?= url::site("admin/themes/save") ?>">
-    <?= access::csrf_form_field() ?>
-    <div id="gThemeTabs">
-      <ul>
-        <li><a href="#gtRegular"><span>Regular</span></a></li>
-        <li><a href="#gtAdmin"><span>Admin</span></a></li>
-      </ul>
-      <div id="gtRegular">
-        <table>
-          <tbody>
-            <tr>
-              <td>
-                <?= t("Current theme") ?>
-                <a href="#">
-                  <img src="<?= url::file("themes/{$active}/thumbnail.png") ?>" alt="<?= $themes[$active]->name ?>" />
-                </a>
-                <?= $themes[$active]->description ?>
-                <input type="radio" name="themes" value="<?= $active ?>" checked="checked">
-                  <?= $themes[$active]->name ?>
-                </input>
-              </td>
+  <div id="gThemeTabs">
+    <?= $menu ?>
+  </div>
+
+  <!-- @todo: move this fix into the CSS file -->
+  <div style="clear: both"></div>
 
-              <? foreach ($themes as $id => $theme): ?>
-              <? if ($id != $active) continue ?>
-              <td>
-                <a href="#">
-                  <img src="<?= url::file("themes/{$id}/thumbnail.png") ?>" alt="<?= $theme->name ?>" />
-                </a>
-                <?= $theme->description ?>
-                <input type="radio" name="themes" value="<?= $id ?>">
-                  <?= $theme->name ?>
-                </input>
-              </td>
-              <? endforeach ?>
-            </tr>
-          </tbody>
-        </table>
+  <div id="gThemePane">
+    <h1> <?= $title ?> </h1>
+    <div class="active">
+      <h2> <?= t("Selected theme") ?> </h2>
+      <div class="theme_block">
+        <h3> <?= $themes[$active]->name ?> </h3>
+        <img src="<?= url::file("themes/{$active}/thumbnail.png") ?>"
+             alt="<?= $themes[$active]->name ?>" />
+        <p>
+          <?= $themes[$active]->description ?>
+        </p>
       </div>
-      <div id="gtAdmin">
-        <table>
-          <tbody>
-            <tr>
-              <td>
-                <?= t("Current theme") ?>
-                <a href="#">
-                  <img src="<?= url::file("themes/{$active_admin}/thumbnail.png") ?>"
-                       alt="<?= $themes[$active_admin]->name ?>" />
-                </a>
-                <?= $admin_themes[$active_admin]->description ?>
-                <input type="radio" name="admin_themes" value="<?= $active_admin ?>" checked="checked">
-                  <?= $admin_themes[$active_admin]->name ?>
-                </input>
-              </td>
-              <? foreach ($admin_themes as $id => $theme): ?>
-              <? if ($id == $active_admin) continue ?>
-              <td>
-                <a href="#">
-                  <img src="<?= url::file("themes/{$id}/thumbnail.png") ?>" alt="<?= $theme->name ?>" />
-                </a>
-                <?= $theme->description ?>
-                <input type="radio" name="admin_themes" value="<?= $id ?>">
-                  <?= $theme->name ?>
-                </input>
-              </td>
-              <? endforeach ?>
-            </tr>
-          </tbody>
-        </table>
+    </div>
+
+    <div class="available">
+      <h2> <?= t("Available themes") ?> </h2>
+      <? foreach ($themes as $id => $info): ?>
+      <? if (!$info->$type) continue ?>
+      <? if ($id == $active) continue ?>
+      <div class="theme_block gDialogLink" href="<?= url::site("admin/themes/preview/$type/$id") ?>">
+        <h3> <?= $info->name ?> </h3>
+        <img src="<?= url::file("themes/{$id}/thumbnail.png") ?>"
+             alt="<?= $info->name ?>" />
+        <p>
+          <?= $info->description ?>
+        </p>
       </div>
+      <? endforeach ?>
     </div>
-    <input type="submit" value="<?= t("Save") ?>"/>
-  </form>
-</div>
-<div id="gThemeDetails">
-  <p id="gMessage"></p>
-  <?= $themes[$active]->details ?>
+  </div>
 </div>
diff --git a/core/views/admin_themes_preview.html.php b/core/views/admin_themes_preview.html.php
new file mode 100644
index 00000000..c31d4118
--- /dev/null
+++ b/core/views/admin_themes_preview.html.php
@@ -0,0 +1,7 @@
+<h1> <?= t("Theme Preview: {{theme_name}}", array("theme_name" => $info->name)) ?> </h1>
+<iframe src="<?= $url ?>" style="width: 600px; height: 500px"></iframe>
+<p>
+  <a href="<?= url::site("admin/themes/choose/$type/$theme_name?csrf=" . access::csrf_token()) ?>">
+    <?= t("Activate <b>{{theme_name}}</b>", array("theme_name" => $info->name)) ?>
+  </a>
+</p>