Moved the short_form init function to gallery.common and made it jQuery plugin. Dropped gallery.form.js. Applied short forms to server_add and tag admin pages. Added tag.css to admin views. Added .g-wide {}.

15 files changed, 164 insertions, 213 deletions

diff --git a/lib/gallery.common.css b/lib/gallery.common.css
index 74a9642f..1fe85d46 100644
--- a/lib/gallery.common.css
+++ b/lib/gallery.common.css
@@ -33,6 +33,9 @@
 .g-narrow {
 }
 
+.g-wide {
+}
+
 /** *******************************************************************
  * 3) States and interactions
  **********************************************************************/
@@ -214,9 +217,15 @@ form .g-error {
 }
 
 #g-action-status {
+  margin-bottom: 1em;
   width: 100% !important;
 }
 
+#g-action-status li {
+  padding-top: .4em;
+  padding-bottom: .3em;
+}
+
 #g-site-status li {
   border-bottom: 1px solid #ccc;
   padding: .3em .3em .3em 30px;
@@ -324,3 +333,36 @@ form .g-error {
 #g-dialog .g-cancel {
   margin: .4em 1em;
 }
+
+/* Inline layout (forms, lists) ~~~~~~~~~~ */
+
+.g-short-form label {
+  display: none;
+}
+
+.g-short-form fieldset {
+  border: none;
+  padding: 0 !important;
+}
+
+.g-short-form li {
+  float: left;
+  padding: .4em 0;
+}
+
+.g-short-form input[type="text"] {
+  color: #666;
+  padding: .3em .6em;
+  width: auto;
+}
+
+.g-short-form .g-cancel {
+  display: block;
+  padding: .2em .8em;
+}
+
+/* Right to left styles ~~~~~~~~~~~~~~~~~~~~ */
+
+.rtl .g-short-form li {
+  float: right;
+}
diff --git a/lib/gallery.common.js b/lib/gallery.common.js
index 5721c779..7c52fef0 100644
--- a/lib/gallery.common.js
+++ b/lib/gallery.common.js
@@ -172,4 +172,40 @@
       };
   };
 
+  // Initialize a short form. Short forms may contain only one text input.
+  $.fn.gallery_short_form = function() {
+    return this.each(function(i){
+      var label = $(this).find("label:first");
+      var input = $(this).find("input[type=text]:first");
+      var button = $(this).find("input[type=submit]");
+
+      $(".g-short-form").addClass("ui-helper-clearfix");
+      $(".g-short-form input[type=text]").addClass("ui-corner-left");
+      $(".g-short-form input[type=submit]").addClass("ui-state-default ui-corner-right");
+
+      // Set the input value equal to label text
+      if (input.val() == "") {
+        input.val(label.html());
+        button.enable(false);
+      }
+
+      // Attach event listeners to the input
+      input.bind("focus", function(e) {
+        // Empty input value if it equals it's label
+        if ($(this).val() == label.html()) {
+          $(this).val("");
+        }
+        button.enable(true);
+      });
+
+      input.bind("blur", function(e){
+        // Reset the input value if it's empty
+        if ($(this).val() == "") {
+          $(this).val(label.html());
+          button.enable(false);
+        }
+      });
+    });
+  };
+
 })(jQuery);
diff --git a/lib/gallery.form.js b/lib/gallery.form.js
deleted file mode 100644
index 77ce3b7d..00000000
--- a/lib/gallery.form.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Initialize a short form. Short forms may contain only one text input.
- *
- * @param form_id string The form's CSS id
- */
-function short_form_init(form_id) {
-  var form = $(form_id);
-  var label = form.find("label:first");
-  var input = form.find("input[type=text]:first");
-  var button = form.find("input[type=submit]");
-
-  // Set the input value equal to label text
-  if (input.val() == "") {
-    input.val(label.html());
-    button.enable(false);
-  }
-
-  // Attach event listeners to the input
-  input.bind("focus", function(e) {
-    // Empty input value if it equals it's label
-    if ($(this).val() == label.html()) {
-      $(this).val("");
-    }
-    button.enable(true);
-  });
-
-  input.bind("blur", function(e){
-    // Reset the input value if it's empty
-    if ($(this).val() == "") {
-      $(this).val(label.html());
-      button.enable(false);
-    }
-  });
-}
diff --git a/modules/server_add/controllers/admin_server_add.php b/modules/server_add/controllers/admin_server_add.php
index 837a2c00..cb71e1f1 100644
--- a/modules/server_add/controllers/admin_server_add.php
+++ b/modules/server_add/controllers/admin_server_add.php
@@ -83,7 +83,7 @@ class Admin_Server_Add_Controller extends Admin_Controller {
 
   private function _get_admin_form() {
     $form = new Forge("admin/server_add/add_path", "", "post",
-                      array("id" => "g-server-add-admin-form"));
+                      array("id" => "g-server-add-admin-form", "class" => "g-short-form g-wide"));
     $add_path = $form->group("add_path");
     $add_path->input("path")->label(t("Path"))->rules("required")
       ->error_messages("not_readable", t("This directory is not readable by the webserver"))
diff --git a/modules/tag/css/tag.css b/modules/tag/css/tag.css
index b718de05..6dfba946 100644
--- a/modules/tag/css/tag.css
+++ b/modules/tag/css/tag.css
@@ -1,3 +1,5 @@
+/* Tag cloud ~~~~~~~~~~~~~~ */
+
 #g-tag-cloud ul {
   font-size: 1.2em;
   text-align: justify;
@@ -75,40 +77,18 @@
 }
 
 #g-tag-admin ul {
-  padding-bottom: .3em;
+  margin-bottom: 2em;
 }
 
 #g-tag-admin li {
-  padding: .1em 0 .2em .3em;
-}
-
-#g-tag-admin .g-column {
-  float: left;
-  width: 200px;
+  padding: .1em 0 .2em 0;
 }
 
-#g-edit-tag-form input {
-  padding: 0 .2em 0 .2em;
-  clear: none;
-  float: left;
-  margin: 0 .2em 0 0;
+#g-rename-tag-form ul {
+  margin-bottom: 0;
 }
 
-#g-edit-tag-form input[type="text"].g-error {
+#g-rename-tag-form input[type="text"].g-error {
   border: 2px solid red;
   background: none;
 }
-
-#g-edit-tag-form input[type="submit"] {
-  height: 25px;
-}
-
-#g-edit-tag-form a, #g-edit-tag-form span {
-  display: block;
-  float: left;
-  padding: .2em .2em 0 .1em;
-}
-
-#g-edit-tag-form span {
-  float: right;
-}
diff --git a/modules/tag/helpers/tag.php b/modules/tag/helpers/tag.php
index b1d79458..01972a65 100644
--- a/modules/tag/helpers/tag.php
+++ b/modules/tag/helpers/tag.php
@@ -79,7 +79,6 @@ class tag_Core {
     }
   }
 
-
   /**
    * Return all the tags for a given item.
    * @return array
@@ -111,7 +110,7 @@ class tag_Core {
   }
 
   static function get_rename_form($tag) {
-    $form = new Forge("admin/tags/rename/$tag->id", "", "post", array("id" => "g-edit-tag-form", "class" => "g-short-form"));
+    $form = new Forge("admin/tags/rename/$tag->id", "", "post", array("id" => "g-rename-tag-form", "class" => "g-short-form"));
     $group = $form->group("rename_tag")->label(t("Rename Tag"));
     $group->input("name")->label(t("Tag name"))->value($tag->name)->rules("required|length[1,64]");
     $group->inputs["name"]->error_messages("in_use", t("There is already a tag with that name"));
diff --git a/modules/tag/js/tag.js b/modules/tag/js/tag.js
index 17845272..41fa4d41 100644
--- a/modules/tag/js/tag.js
+++ b/modules/tag/js/tag.js
@@ -18,10 +18,10 @@ function ajaxify_tag_form() {
 
 function closeEditInPlaceForms() {
   // closes currently open inplace edit forms
-  if ($("#g-edit-tag-form").length) {
+  if ($("#g-rename-tag-form").length) {
     $("#g-edit-error-message").remove();
-    var li = $("#g-edit-tag-form").parent();
-    $("#g-edit-tag-form").parent().html($("#g-edit-tag-form").parent().data("revert"));
+    var li = $("#g-rename-tag-form").parent();
+    $("#g-rename-tag-form").parent().html($("#g-rename-tag-form").parent().data("revert"));
     li.height("");
     $(".g-editable", li).bind("click", editInPlace);
     $(".g-dialog-link", li).gallery_dialog();
@@ -41,34 +41,37 @@ function editInPlace(element) {
   var tag_name = $(this).html();
   var tag_width = $(this).width();
   $(this).parent().data("revert", $(this).parent().html());
-  var form = '<form id="g-edit-tag-form" method="post" class="g-inline ui-helper-clearfix" ';
+  var form = '<form id="g-rename-tag-form" method="post" class="g-short-form" ';
   form += 'action="' + TAG_RENAME_URL.replace('__ID__', tag_id) + '">';
   form += '<input name="csrf" type="hidden" value="' + csrf_token + '" />';
-  form += '<input id="name" name="name" type="text" class="textbox" value="' +
-          str_replace('"', "&quot;", tag_name) + '" />';
-  form += '<input type="submit" class="submit ui-state-default ui-corner-all" value="' + save_i18n + '" i/>';
-  form += '<a href="#">' + cancel_i18n + '</a>';
+  form += '<ul>';
+  form += '<li><input id="name" name="name" type="text" class="textbox" value="' +
+          str_replace('"', "&quot;", tag_name) + '" /></li>';
+  form += '<li><input type="submit" class="submit ui-state-default" value="' + save_i18n + '" /></li>';
+  form += '<li><a href="#" class="g-cancel">' + cancel_i18n + '</a></li>';
+  form += '</ul>';
   form += '</form>';
 
   // add edit form
   $(this).parent().html(form);
-  $("#g-edit-tag-form #name")
-    .width(tag_width+30)
+  $("#g-rename-tag-form #name")
+    .width(tag_width)
     .focus();
-  //$("#g-edit-tag-form").parent().height( $("#g-edit-tag-form").height() );
-  $("#g-edit-tag-form a").bind("click", closeEditInPlaceForms);
+  $(".g-short-form").gallery_short_form();
+  $("#g-rename-tag-form .g-cancel").bind("click", closeEditInPlaceForms);
 
   ajaxify_editInPlaceForm = function() {
-    $("#g-edit-tag-form").ajaxForm({
+    $("#g-rename-tag-form").ajaxForm({
       dataType: "json",
       success: function(data) {
+    console.log("success");
         if (data.result == "success") {
           closeEditInPlaceForms(); // close form
           $("#g-tag-" + data.tag_id).text(data.new_tagname); // update tagname
-          console.log(data);
           window.location.reload();
         } else if (data.result == "error") {
-          $("#g-edit-tag-form #name")
+    console.log("error");
+          $("#g-rename-tag-form #name")
             .addClass("g-error")
             .focus();
           $("#g-tag-admin").before("<p id=\"g-edit-error-message\" class=\"g-error\">" + data.message + "</p>");
diff --git a/modules/tag/views/admin_tags.html.php b/modules/tag/views/admin_tags.html.php
index edc466bb..7771f7fe 100644
--- a/modules/tag/views/admin_tags.html.php
+++ b/modules/tag/views/admin_tags.html.php
@@ -14,51 +14,50 @@
   var save_i18n = <?= html::js_string(t("save")->for_html_attr()) ?>;
   var cancel_i18n = <?= html::js_string(t("cancel")->for_html_attr()) ?>;
 </script>
-<div class="g-block">
-  <h2>
-    <?= t("Tag Admin") ?>
-  </h2>
 
-  <? $tags_per_column = $tags->count()/5 ?>
-  <? $column_tag_count = 0 ?>
+<h2>
+  <?= t("Tag Admin") ?>
+</h2>
 
-  <table id="g-tag-admin" class="g-block-content">
-    <caption class="g-understate">
-      <?= t2("There is one tag", "There are %count tags", $tags->count()) ?>
-    </caption>
-    <tr>
-      <td>
-        <? foreach ($tags as $i => $tag): ?>
-          <? $current_letter = strtoupper(mb_substr($tag->name, 0, 1)) ?>
+<? $tags_per_column = $tags->count()/5 ?>
+<? $column_tag_count = 0 ?>
 
-          <? if ($i == 0): /* first letter */ ?>
-            <strong><?= html::clean($current_letter) ?></strong>
-            <ul>
-          <? elseif ($last_letter != $current_letter): /* new letter */ ?>
-            <? if ($column_tag_count > $tags_per_column): /* new column */ ?>
-               </td>
-              <td>
-              <? $column_tag_count = 0 ?>
-            <? endif ?>
+<table id="g-tag-admin">
+  <caption class="g-understate">
+    <?= t2("There is one tag", "There are %count tags", $tags->count()) ?>
+  </caption>
+  <tr>
+    <td>
+      <? foreach ($tags as $i => $tag): ?>
+        <? $current_letter = strtoupper(mb_substr($tag->name, 0, 1)) ?>
 
-            </ul>
-            <strong><?= html::clean($current_letter) ?></strong>
-            <ul>
+        <? if ($i == 0): /* first letter */ ?>
+          <strong><?= html::clean($current_letter) ?></strong>
+          <ul>
+        <? elseif ($last_letter != $current_letter): /* new letter */ ?>
+          <? if ($column_tag_count > $tags_per_column): /* new column */ ?>
+             </td>
+            <td>
+            <? $column_tag_count = 0 ?>
           <? endif ?>
 
-          <li>
-            <span id="g-tag-<?= $tag->id ?>" class="g-editable g-tag-name"><?= html::clean($tag->name) ?></span>
-            <span class="g-understate">(<?= $tag->count ?>)</span>
-            <a href="<?= url::site("admin/tags/form_delete/$tag->id") ?>"
-               class="g-dialog-link g-delete-link g-button">
-                <span class="ui-icon ui-icon-trash"><?= t("Delete this tag") ?></span></a>
-          </li>
+          </ul>
+          <strong><?= html::clean($current_letter) ?></strong>
+          <ul>
+        <? endif ?>
 
-          <? $column_tag_count++ ?>
-          <? $last_letter = $current_letter ?>
-        <? endforeach /* $tags */ ?>
-        </ul>
-      </td>
-    </tr>
-  </table>
-</div>
+        <li>
+          <span id="g-tag-<?= $tag->id ?>" class="g-editable g-tag-name"><?= html::clean($tag->name) ?></span>
+          <span class="g-understate">(<?= $tag->count ?>)</span>
+          <a href="<?= url::site("admin/tags/form_delete/$tag->id") ?>"
+             class="g-dialog-link g-delete-link g-button">
+              <span class="ui-icon ui-icon-trash"><?= t("Delete this tag") ?></span></a>
+        </li>
+
+        <? $column_tag_count++ ?>
+        <? $last_letter = $current_letter ?>
+      <? endforeach /* $tags */ ?>
+      </ul>
+    </td>
+  </tr>
+</table>
diff --git a/themes/admin_wind/css/screen.css b/themes/admin_wind/css/screen.css
index 78358e84..1d60d392 100644
--- a/themes/admin_wind/css/screen.css
+++ b/themes/admin_wind/css/screen.css
@@ -122,8 +122,7 @@ fieldset {
 }
 
 #g-header fieldset,
-#g-sidebar fieldset,
-.g-short-form fieldset {
+#g-sidebar fieldset {
   border: none;
 }
 
@@ -135,8 +134,7 @@ legend {
 #g-header legend,
 #g-sidebar legend,
 #g-content #g-search-form legend,
-input[type="hidden"],
-.g-short-form label {
+input[type="hidden"] {
   display: none;
 }
 
@@ -298,19 +296,6 @@ tr.g-warning {
   background-color: #fff;
 }
 
-/* Inline layout (forms, lists) ~~~~~~~~~~ */
-
-.g-short-form li {
-  float: left;
-  padding: .4em 0;
-}
-
-.g-short-form input[type="text"] {
-  color: #666;
-  padding: .3em .6em;
-  width: 11em;
-}
-
 /*** ******************************************************************
  * 3) Page layout containers
  *********************************************************************/
@@ -811,36 +796,6 @@ li.g-default-group h4, li.g-default-group .g-user {
   padding: .5em
 }
 
-#g-server-add-admin {
-  margin:auto;
-  text-align: left;
-}
-
-#g-server-add-admin form fieldset {
-  border: medium none;
-}
-
-#g-server-add-admin legend {
-  display: none;
-}
-
-#g-server-add-admin .g-warning {
-  background-color: #FFFF99;
-}
-
-#g-authorized-path {
-  margin: 0 !important;
-  padding: 0.3em 1.5em 0.3em 1em;
-}
-
-#g-server-add-admin #path {
-  width: 80%;
-}
-
-.g-remove-dir:hover {
-  cursor: pointer;
-}
-
 #g-languages-form table {
 	width: 400px;
 	float: left;
@@ -904,7 +859,6 @@ li.g-default-group h4, li.g-default-group .g-user {
 .rtl form ul ul li,
 .rtl input[type="submit"],
 .rtl input[type="reset"],
-.rtl .g-short-form li,
 .rtl #g-content #g-album-grid .g-item,
 .rtl #g-site-admin-menu,
 .rtl .g-pager li,
diff --git a/themes/admin_wind/js/ui.init.js b/themes/admin_wind/js/ui.init.js
index 0954b63c..e0210ce5 100644
--- a/themes/admin_wind/js/ui.init.js
+++ b/themes/admin_wind/js/ui.init.js
@@ -1,5 +1,6 @@
 /**
  * Initialize jQuery UI and Gallery Plugins
+ * @todo Move ui-corner-all assignments to theme admin views
  */
 
 $(document).ready(function(){
@@ -22,6 +23,9 @@ $(document).ready(function(){
   // Initialize modal dialogs
   $(".g-dialog-link").gallery_dialog();
 
+  // Initialize short forms
+  $(".g-short-form").gallery_short_form();
+
   // Initialize ajax links
   $(".g-ajax-link").gallery_ajax();
 
@@ -50,13 +54,7 @@ $(document).ready(function(){
   $(".g-available .g-block").addClass("ui-corner-all");
   $(".g-unavailable").addClass("ui-corner-all");
 
-  // Add hover state for buttons
-  $(".ui-state-default").hover(
-    function() {
-      $(this).addClass("ui-state-hover");
-    },
-    function() {
-      $(this).removeClass("ui-state-hover");
-    }
-  );
+  // Initialize button hover effect
+  $.fn.gallery_hover_init();
+
 });
diff --git a/themes/night_wind/js/ui.init.js b/themes/night_wind/js/ui.init.js
index 27fb9664..bddf50c3 100644
--- a/themes/night_wind/js/ui.init.js
+++ b/themes/night_wind/js/ui.init.js
@@ -29,20 +29,6 @@ $(document).ready(function() {
     $("#g-view-menu a").addClass("ui-icon");
   }
 
-  // Initialize short forms
-  var short_forms = new Array(
-    "#g-quick-search-form",
-    "#g-add-tag-form",
-    "#g-search-form"
-  );
-
-  for (var i in short_forms) {
-    short_form_init(short_forms[i]);
-    $(short_forms[i]).addClass("g-short-form");
-  }
-  $(".g-short-form input[type=text]").addClass("ui-corner-left");
-  $(".g-short-form input[type=submit]").addClass("ui-state-default ui-corner-right");
-
   // Apply jQuery UI button css to submit inputs
   $("input[type=submit]:not(.g-short-form input)").addClass("ui-state-default ui-corner-all");
 
diff --git a/themes/night_wind/views/page.html.php b/themes/night_wind/views/page.html.php
index c8b08129..f5c6b0df 100644
--- a/themes/night_wind/views/page.html.php
+++ b/themes/night_wind/views/page.html.php
@@ -56,7 +56,6 @@
     </script>
     <?= $theme->script("gallery.ajax.js") ?>
     <?= $theme->script("gallery.dialog.js") ?>
-    <?= $theme->script("gallery.form.js") ?>
     <?= $theme->script("superfish/js/superfish.js") ?>
     <?= $theme->script("jquery.localscroll.js") ?>
     <?= $theme->script("ui.init.js") ?>
diff --git a/themes/wind/css/screen.css b/themes/wind/css/screen.css
index 36231b0d..d7eb19e6 100644
--- a/themes/wind/css/screen.css
+++ b/themes/wind/css/screen.css
@@ -120,14 +120,18 @@ td {
 
 /* Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
+#g-sidebar form {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 fieldset {
   border: 1px solid #ccc;
   padding: .8em 1em !important;
 }
 
 #g-banner fieldset,
-#g-sidebar fieldset,
-.g-short-form fieldset {
+#g-sidebar fieldset {
   border: none;
 }
 
@@ -139,8 +143,7 @@ legend {
 #g-banner legend,
 #g-sidebar legend,
 #g-content #g-search-form legend,
-input[type="hidden"],
-.g-short-form label {
+input[type="hidden"] {
   display: none;
 }
 
@@ -234,19 +237,6 @@ li.g-error select {
   margin-top: 1em;
 }
 
-/* Inline layout (forms, lists) ~~~~~~~~~~ */
-
-.g-short-form li {
-  float: left;
-  padding: .4em 0;
-}
-
-.g-short-form input[type="text"] {
-  color: #666;
-  padding: .3em .6em;
-  width: 11em;
-}
-
 /*** ******************************************************************
  * 3) Page layout containers
  *********************************************************************/
@@ -821,7 +811,6 @@ li.g-error select {
 .rtl form ul ul li,
 .rtl input[type="submit"],
 .rtl input[type="reset"],
-.rtl .g-short-form li,
 .rtl #g-header #g-logo img,
 .rtl #g-content #g-album-grid .g-item,
 .rtl #g-site-menu,
diff --git a/themes/wind/js/ui.init.js b/themes/wind/js/ui.init.js
index e9dd1dd9..0126c36b 100644
--- a/themes/wind/js/ui.init.js
+++ b/themes/wind/js/ui.init.js
@@ -22,9 +22,10 @@ $(document).ready(function() {
   // Initialize dialogs
   $(".g-dialog-link").gallery_dialog();
 
+  // Initialize short forms
+  $(".g-short-form").gallery_short_form();
+
   // Apply jQuery UI icon, hover, and rounded corner styles
-  $(".g-short-form input[type=text]").addClass("ui-corner-left");
-  $(".g-short-form input[type=submit]").addClass("ui-state-default ui-corner-right");
   $("input[type=submit]:not(.g-short-form input)").addClass("ui-state-default ui-corner-all");
   if ($("#g-view-menu").length) {
     $("#g-view-menu ul").removeClass("g-menu").removeClass("sf-menu");
diff --git a/themes/wind/views/page.html.php b/themes/wind/views/page.html.php
index c8b08129..f5c6b0df 100644
--- a/themes/wind/views/page.html.php
+++ b/themes/wind/views/page.html.php
@@ -56,7 +56,6 @@
     </script>
     <?= $theme->script("gallery.ajax.js") ?>
     <?= $theme->script("gallery.dialog.js") ?>
-    <?= $theme->script("gallery.form.js") ?>
     <?= $theme->script("superfish/js/superfish.js") ?>
     <?= $theme->script("jquery.localscroll.js") ?>
     <?= $theme->script("ui.init.js") ?>