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.

5 files changed, 151 insertions, 112 deletions

diff --git a/core/controllers/admin_themes.php b/core/controllers/admin_themes.php
index 6d5d3d45..6f2eeaf7 100644
--- a/core/controllers/admin_themes.php
+++ b/core/controllers/admin_themes.php
@@ -19,34 +19,90 @@
  */
 class Admin_Themes_Controller extends Admin_Controller {
   public function index() {
-    $theme_dir = scandir(THEMEPATH);
-    $themes = $admin_themes = array();
-    foreach ($theme_dir as $theme_name) {
-      if (substr($theme_name, 0, 1) == ".") {
+    $this->regular();
+  }
+
+  public function regular() {
+    $view = new Admin_View("admin.html");
+    $view->content = new View("admin_themes.html");
+    $view->content->menu = $this->_get_menu();
+    $view->content->title = _("Regular Themes");
+    $view->content->type = "regular";
+    $view->content->active = module::get_var("core", "active_theme");
+    $view->content->themes = $this->_get_themes();
+    print $view;
+  }
+
+  public function admin() {
+    $view = new Admin_View("admin.html");
+    $view->content = new View("admin_themes.html");
+    $view->content->menu = $this->_get_menu();
+    $view->content->title = _("Admin Themes");
+    $view->content->type = "admin";
+    $view->content->active = module::get_var("core", "active_admin_theme");
+    $view->content->themes = $this->_get_themes();
+    print $view;
+  }
+
+  private function _get_menu() {
+    return Menu::factory("root")
+      ->append(Menu::factory("link")
+               ->id("regular")
+               ->label(t("Regular Theme"))
+               ->url(url::site("admin/themes/regular")))
+      ->append(Menu::factory("link")
+               ->id("admin")
+               ->label(t("Admin Theme"))
+               ->url(url::site("admin/themes/admin")));
+  }
+
+  private function _get_themes() {
+    $themes = array();
+    foreach (scandir(THEMEPATH) as $theme_name) {
+      if ($theme_name[0] == ".") {
         continue;
       }
 
-      $file = THEMEPATH . $theme_name . "/theme.info";
+      $file = THEMEPATH . "$theme_name/theme.info";
       $theme_info = new ArrayObject(parse_ini_file($file), ArrayObject::ARRAY_AS_PROPS);
-      $theme_info['id'] = $theme_name;
-      $details = theme::get_edit_form_admin($theme_info);
-      $theme_info['details'] = $details;
-      if ($theme_info->admin) {
-        $admin_themes[$theme_name] = $theme_info;
-      } else {
-        $themes[$theme_name] = $theme_info;
-      }
+      $themes[$theme_name] = $theme_info;
     }
+    return $themes;
+  }
 
-    $view = new Admin_View("admin.html");
-    $view->content = new View("admin_themes.html");
-    $view->content->themes = $themes;
-    $view->content->admin_themes = $admin_themes;
-    $view->content->active = module::get_var("core", "active_theme");
-    $view->content->active_admin = module::get_var("core", "active_admin_theme");
+  public function preview($type, $theme_name) {
+    $view = new View("admin_themes_preview.html");
+    $view->info = new ArrayObject(
+      parse_ini_file(THEMEPATH . "$theme_name/theme.info"), ArrayObject::ARRAY_AS_PROPS);
+    $view->theme_name = $theme_name;
+    $view->type = $type;
+    if ($type == "admin") {
+      $view->url = url::site("admin?theme=$theme_name");
+    } else {
+      $view->url = url::site("albums/1?theme=$theme_name");
+    }
     print $view;
   }
 
+  public function choose($type, $theme_name) {
+    access::verify_csrf();
+
+    $info = new ArrayObject(
+      parse_ini_file(THEMEPATH . "$theme_name/theme.info"), ArrayObject::ARRAY_AS_PROPS);
+
+    if ($type == "admin" && $info->admin) {
+      module::set_var("core", "active_admin_theme", $theme_name);
+      message::success(t("Successfully changed your site theme to <b>{{theme_name}}</b>",
+                         array("theme_name" => $info->name)));
+    } else if ($type == "regular" && $info->regular) {
+      module::set_var("core", "active_theme", $theme_name);
+      message::success(t("Successfully changed your admin theme to <b>{{theme_name}}</b>",
+                         array("theme_name" => $info->name)));
+    }
+
+    url::redirect("admin/themes/$type");
+  }
+
   public function edit_form($theme_name) {
     $file = THEMEPATH . $theme_name . "/theme.info";
     $theme_info = new ArrayObject(parse_ini_file($file), ArrayObject::ARRAY_AS_PROPS);
@@ -55,7 +111,7 @@ class Admin_Themes_Controller extends Admin_Controller {
   }
 
   public function edit($theme_name) {
-    $file = THEMEPATH . $theme_name . "/theme.info"; 
+    $file = THEMEPATH . $theme_name . "/theme.info";
     $theme_info = new ArrayObject(parse_ini_file($file), ArrayObject::ARRAY_AS_PROPS);
     $theme_info['id'] = $theme_name;
     $form = theme::get_edit_form_admin($theme_info);
@@ -75,7 +131,7 @@ class Admin_Themes_Controller extends Admin_Controller {
                               "message" => t("Error saving theme values")));
     }
   }
-  
+
   public function save() {
     access::verify_csrf();
     $theme = $this->input->post("themes");
@@ -85,6 +141,6 @@ class Admin_Themes_Controller extends Admin_Controller {
       log::success("graphics", t("Changed theme to {{theme_name}}", array("theme_name" => $theme)));
     }
     url::redirect("admin/themes");
-  }  
+  }
 }
 
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>
diff --git a/themes/admin_default/js/ui.init.js b/themes/admin_default/js/ui.init.js
index 95d516fe..cca5e738 100644
--- a/themes/admin_default/js/ui.init.js
+++ b/themes/admin_default/js/ui.init.js
@@ -1,5 +1,4 @@
 $(document).ready(function(){
-
   // Add Superfish menu class
   $("#gSiteAdminMenu ul.gMenu").addClass("sf-menu");
   $("ul.gMenu").addClass("sf-menu");
@@ -23,12 +22,6 @@ $(document).ready(function(){
     $(dialogLinks[i]).bind("click", {element: dialogLinks[i]}, handleDialogEvent);
   };
   
-  $("#gThemeAdmin :radio").click(function(event) {
-      $("#gThemeDetails").load("themes/edit_form/" + event.target.value);
-  });
-  
-  $("#gThemeTabs > ul").tabs({ select: updateThemeDetails });
-  
   $("#gThemeDetailsForm").ajaxForm( {
     dataType: "json",
     success: function(body, result, set) {
@@ -39,13 +32,3 @@ $(document).ready(function(){
       }
   }});
 });
-
-function updateThemeDetails(evt, ui) {
-  var themeName;
-  if (ui.index == 0) {
-    themeName = $("#gtRegular :checked").val();
-  } else {
-    themeName = $("#gtAdmin :checked").val();
-  }
-  $("#gThemeDetails").load("themes/edit_form/" + themeName);
-}
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index a268a0b3..9794fcfc 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -759,3 +759,23 @@ li.gError select {
 #gDialog legend {
   display: none;
 }
+
+
+/* stuff that needs a home */
+#gAdminThemes div.theme_block {
+  background: white;
+}
+#gAdminThemes div.active {
+  padding: 10px;
+}
+#gAdminThemes div.available div.theme_block:hover {
+  background: #eee;
+}
+#gAdminThemes div.available div {
+  padding: 10px;
+  cursor: pointer;
+}
+#gAdminThemes div.available div {
+  width: 250px;
+  float: left;
+}