Change the theme option page to display using tabs if the site theme has an admin page.

3 files changed, 55 insertions, 3 deletions

diff --git a/modules/gallery/helpers/theme.php b/modules/gallery/helpers/theme.php
index 980ee11a..a390645f 100644
--- a/modules/gallery/helpers/theme.php
+++ b/modules/gallery/helpers/theme.php
@@ -70,7 +70,7 @@ class theme_Core {
 
   static function get_edit_form_admin() {
     $form = new Forge("admin/theme_options/save/", "", null, array("id" =>"g-theme-options-form"));
-    $group = $form->group("edit_theme");
+    $group = $form->group("edit_theme")->label(t("Theme Layout"));
     $group->input("page_size")->label(t("Items per page"))->id("g-page-size")
       ->rules("required|valid_digit")
       ->error_messages("required", t("You must enter a number"))
@@ -95,7 +95,8 @@ class theme_Core {
 
     module::event("theme_edit_form", $form);
 
-    $group = $form->group("buttons");
+    $group = $form->group("buttons")
+      ->set_attr("style","border: none");
     $group->submit("")->value(t("Save"));
     return $form;
   }
diff --git a/modules/gallery/views/admin_theme_options.html.php b/modules/gallery/views/admin_theme_options.html.php
index a4bf1c4e..2cf97713 100644
--- a/modules/gallery/views/admin_theme_options.html.php
+++ b/modules/gallery/views/admin_theme_options.html.php
@@ -1,4 +1,35 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
+<script type="text/javascript">
+  $("#g-theme-options-form").ready(function() {
+     var contents = $("#g-theme-options-form fieldset:not(:last-child)");
+     if (contents.length > 1) {
+       $("<div id='g-theme-options-form-tabs'>" +
+         "  <ul class='tabnav'></ul>" +
+         "</div>").insertBefore("#g-theme-options-form fieldset:last-child");
+       $(contents).each(function(index) {
+         var text = $("legend", this).text();
+         var tabId = "tab_" + index;
+         var tabContentId = "tab_content_" + index;
+         console.log(tabId+": text='"+text+"'");
+         if (text == "") {
+           text = <?= t("Tab_")->for_js() ?> + index;
+         }
+         $(".tabnav").append("<li><a id='"+ tabId + "' href='#" + tabContentId + "'>"+text+"</a></li>");
+         $("#g-theme-options-form-tabs").append("<div id='" + tabContentId + "' class='tabdiv'></div>");
+
+         if ($("li.g-error", this).length > 0) {
+           $("#"+tabId).addClass("g-error");
+         }
+         $("#"+tabContentId).append($("ul", this));
+         $(this).remove();
+       });
+       $("#g-theme-options-form-tabs").tabs({});
+     } else {
+       $("#g-theme-options-form fieldset:first legend").hide();
+     }
+  });
+</script>
+
 <div class="g-block">
   <h1> <?= t("Theme Options") ?> </h1>
 
diff --git a/themes/admin_wind/css/screen.css b/themes/admin_wind/css/screen.css
index dbfb59e8..937c4d15 100644
--- a/themes/admin_wind/css/screen.css
+++ b/themes/admin_wind/css/screen.css
@@ -399,6 +399,26 @@ th {
   background-color: #FFF;
 }
 
+/* Theme options  ~~~~~~~~~~~~~~~~~~~~~~~~ */
+#g-theme-options-form {
+  border: 1px solid #a6c9e2;
+}
+#g-theme-options-form-tabs {
+  border: none !important;
+}
+#g-theme-options-form fieldset {
+  border: none;
+}
+
+.ui-tabs .ui-tabs-nav li a {
+  padding: 0 1em;
+}
+
+.ui-tabs .ui-tabs-nav li a.g-error {
+  background: none no-repeat scroll 0 0 transparent;
+  color: #FF0000 !important;
+}
+
 /** *******************************************************************
  * 5) Navigation and menus
  *********************************************************************/
@@ -487,4 +507,4 @@ th {
 .rtl .g-selected img,
 .rtl .g-available .g-block img {
   margin: 0 0 1em 1em;
-}
\ No newline at end of file
+}