jQuery-based buttons! Form updates, short form updates. Need to fix add user/group buttons and search form on search results page.

9 files changed, 49 insertions, 86 deletions

diff --git a/core/js/fullsize.js b/core/js/fullsize.js
index 9092dc30..7428adb5 100644
--- a/core/js/fullsize.js
+++ b/core/js/fullsize.js
@@ -25,7 +25,7 @@ $(document).ready(function() {
       '<img id="gFullSizeImage" src="' + fullsize_detail.url + '"' +
       'height="' + image_size.height + '" width="' + image_size.width + '"/></div>');
 
-    $("#gFullsize").append('<span id="gFullsizeClose" class="ui-icon ' +
+    $("#gFullsize").append('<span id="gFullsizeClose" class="fg-button ui-icon ui-state-default ' +
       'ui-icon-closethick ui-corner-all" style="z-index: 1003; position: absolute; ' +
       'right: 1em; top: 1em;"></span>');
     $("#gFullsizeClose").click(function() {
diff --git a/modules/search/views/search.html.php b/modules/search/views/search.html.php
index 86a29db5..8d47eed4 100644
--- a/modules/search/views/search.html.php
+++ b/modules/search/views/search.html.php
@@ -1,5 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<div id="gSearch">
+<div id="gSearchForm">
   <form action="<?= url::site("/search") ?>">
     <fieldset>
       <legend>
diff --git a/modules/search/views/search_link.html.php b/modules/search/views/search_link.html.php
index 7be2b101..3f1bca91 100644
--- a/modules/search/views/search_link.html.php
+++ b/modules/search/views/search_link.html.php
@@ -1,5 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<form action="<?= url::site("search") ?>" id="gSearchForm">
+<form action="<?= url::site("search") ?>" id="gQuickSearchForm">
   <ul>
     <li>
       <label for="gSearch"><?= t("Search the gallery") ?></label>
diff --git a/modules/user/views/admin_users.html.php b/modules/user/views/admin_users.html.php
index 157a084e..af3960b5 100644
--- a/modules/user/views/admin_users.html.php
+++ b/modules/user/views/admin_users.html.php
@@ -44,7 +44,7 @@
   <a href="<?= url::site("admin/users/add_user_form") ?>"
      class="gDialogLink gButtonLink right"
      title="<?= t("Create a new user") ?>">
-    + <?= t("Add a new user") ?>
+     <?= t("Add a new user") ?>
   </a>
 
   <h2>
@@ -100,7 +100,7 @@
       <a href="<?= url::site("admin/users/add_user_form") ?>"
          class="gDialogLink gButtonLink"
          title="<?= t("Create a new user") ?>">
-        + <?= t("Add a new user") ?>
+         <?= t("Add a new user") ?>
       </a>
     </p>
   </div>
@@ -110,7 +110,7 @@
   <a href="<?= url::site("admin/users/add_group_form") ?>"
      class="gDialogLink gButtonLink right"
      title="<?= t("Create a new group") ?>">
-    + <?= t("Add a new group") ?>
+     <?= t("Add a new group") ?>
   </a>
 
   <h2>
diff --git a/themes/admin_default/css/screen.css b/themes/admin_default/css/screen.css
index 12006e46..cc7d4cd2 100644
--- a/themes/admin_default/css/screen.css
+++ b/themes/admin_default/css/screen.css
@@ -140,19 +140,6 @@
   margin-right: 1em;
 }
 
-.gButtonLink {
-  border-width: 1px;
-  border-style: solid;
-  border-color: #ececec #c8c8c8 #c8c8c8 #ececec;
-  background-image: url('../images/backg-buttonlink.png');
-  padding: .2em .3em;
-  font-weight: bold;
-}
-
-.gButtonLink:hover {
-  border-color: #c8c8c8 #ececec #ececec #c8c8c8;
-}
-
 #gUserAdminList {
   margin-bottom: 1em;
 }
diff --git a/themes/admin_default/images/backg-buttonlink.png b/themes/admin_default/images/backg-buttonlink.png
deleted file mode 100644
index b44c7a3f..00000000
--- a/themes/admin_default/images/backg-buttonlink.png
+++ /dev/null
diff --git a/themes/admin_default/js/ui.init.js b/themes/admin_default/js/ui.init.js
index efc2af04..c8e21c9c 100644
--- a/themes/admin_default/js/ui.init.js
+++ b/themes/admin_default/js/ui.init.js
@@ -14,6 +14,9 @@ $(document).ready(function(){
     speed: 'fast'
   });
 
+  $(".gButtonLink").addClass("fg-button fg-button-icon-left ui-state-default ui-corner-all");
+  $(".gButtonLink").prepend('<span class="ui-icon ui-icon-circle-plus"></span>');
+
   // Apply modal dialogs
   var dialogLinks = $(".gDialogLink");
   for (var i=0; i < dialogLinks.length; i++) {
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index d873f805..2d02f132 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -145,59 +145,27 @@ input[type="password"] {
 
 input[type="text"],
 input[type="password"],
-textarea,
-.gValidationRule {
-}
-
-input[type="button"] {
-}
-
-input[type="checkbox"] {
-}
-
-input[type="file"] {
+textarea {
+  border: 1px solid #e8e8e8;
+  border-top-color: #ccc;
+  border-left-color: #ccc;
+  color: #333;
 }
 
 input[type="hidden"] {
   display: none;
 }
 
-input[type="password"] {
-}
-
-input[type="radio"] {
-}
-
-input[type="reset"] {
-}
-
-input[type="submit"] {
-}
-
-#gHeader input[type="text"],
-#gSidebar input[type="text"] {
-  color: #999;
-}
-
-option {
-}
-
-select {
-}
-
 textarea {
   width: 100%;
   height: 12em;
 }
 
-button {
-}
-
 input:focus,
 textarea:focus,
 option:focus {
   background-color: #ffc;
-  color: #000;
+  color: #000 !important;
 }
 
 /* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@@ -366,20 +334,19 @@ form p.gError {
 
 /* Inline layout (forms, lists) ~~~~~~~~~~ */
 
-#gHeader #gSearchForm li,
-#gSidebar #gAddTagForm li {
+.gShortForm li {
   float: left;
-  padding: .4em .5em;
+  padding: .4em 0;
 }
 
-#gHeader #gSearchForm label,
-#gSidebar #gAddTagForm label {
+.gShortForm label {
   display: none;
 }
 
-#gHeader #gSearchForm input[type="text"],
-#gSidebar #gAddTagForm input[type="text"] {
-  width: 10em;
+.gShortForm input[type="text"] {
+  color: #666;
+  padding: .3em .6em;
+  width: 11em;
 }
 
 /*** ******************************************************************
@@ -432,9 +399,14 @@ form p.gError {
   margin: 5px 10px 10px 20px;
 }
 
-#gHeader #gSearchForm {
+#gHeader #gQuickSearchForm {
+  clear: right;
   float: right;
-  margin-right: 20px;
+  margin: 1.4em 20px;
+}
+
+#gHeader #gQuickSearchForm input[type='text'] {
+  width: 17em;
 }
 
 #gContent .gBlock h2 {
@@ -563,22 +535,12 @@ form p.gError {
   margin-bottom: 0;
 }
 
-#gViewMenu #gAlbumLink,
-#gViewMenu #gRemoveWatchLink,
-#gViewMenu #gAddWatchLink,
-#gViewMenu #gHybridLink,
-#gViewMenu #gSlideshowLink,
-#gViewMenu .gFullSizeLink,
-#gViewMenu #gCommentsLink {
+#gViewMenu a {
   background-repeat: no-repeat;
   background-position: 10px 50%;
   display: block;
-  font-size: .9em;
   height: 22px;
-  overflow: hidden;
-  text-indent: 1000px;
-  white-space: nowrap;
-  width: 32px;
+  width: 29px;
 }
 
 #gViewMenu #gAlbumLink {
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index 2b8db1b7..04459890 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -5,16 +5,16 @@
  */
 
 var shortForms = new Array(
-  "#gSearchForm",
-  "#gAddTagForm"
+  "#gQuickSearchForm",
+  "#gAddTagForm",
+  "#gSearchForm"
 );
 
 $(document).ready(function() {
   
   // Initilize menus  
   $("ul.gMenu").addClass("sf-menu");
-  $("#gViewMenu ul.gMenu").addClass("sf-menu");
-  
+
   // Superfish menu options
   $('ul.sf-menu').superfish({
     delay: 500,
@@ -25,6 +25,18 @@ $(document).ready(function() {
     speed: 'fast'
   });
 
+  // Apply jQuery UI button css
+  $("input[type=submit]").addClass("fg-button ui-state-default");
+  $("#gViewMenu ul.gMenu").addClass("fg-buttonset");
+  $("#gViewMenu ul.gMenu li a").addClass("fg-button ui-state-default ui-icon");
+  $("#gViewMenu ul.gMenu li:first a").addClass("ui-corner-left");
+  $("#gViewMenu ul.gMenu li:last a").addClass("ui-corner-right");
+
+  // Short forms
+  handleShortFormEvent(shortForms);
+  $(".gShortForm input[type=text]").addClass("ui-corner-left");
+  $(".gShortForm input[type=submit]").addClass("ui-corner-right");
+
   // Album view only
   if ($("#gAlbumGrid").length) {
     // Vertical align thumbnails/metadata in album grid
@@ -53,9 +65,6 @@ $(document).ready(function() {
     $(dialogLinks[i]).bind("click", handleDialogEvent);
   }
 
-  // Short forms
-  handleShortFormEvent(shortForms);
-
 });
 
 // Vertically align a block element's content
@@ -107,6 +116,8 @@ function handleShortFormEvent(shortForms) {
  * @param formID string The form's ID, including #
  */
 function shortFormInit(formID) {
+  $(formID).addClass("gShortForm");
+
   // Get the input ID and it's label text
   var labelValue = $(formID + " label:first").html();
   var inputID = "#" + $(formID + " input[type='text']:first").attr("id");