Add Cancel link next to submit buttons in dialogs. Apply button style to buttons in dialogs.

2 files changed, 28 insertions, 3 deletions

diff --git a/lib/gallery.dialog.js b/lib/gallery.dialog.js
index ce48d995..8658f0fb 100644
--- a/lib/gallery.dialog.js
+++ b/lib/gallery.dialog.js
@@ -24,6 +24,7 @@ function openDialog(element, on_success) {
   var sHref = $(element).attr("href");
   var sTitle = $(element).attr("title");
   var eDialog = '<div id="gDialog"></div>';
+  var eCancel = '<a href="javascript: closeDialog()" class="gCancel">Cancel</a>';
   var dialogWidth;
 
   $("body").append(eDialog);
@@ -33,9 +34,7 @@ function openDialog(element, on_success) {
     autoResize: true,
     modal: true,
     resizable: false,
-    close: function (event, ui) {
-      $("#gDialog").dialog("destroy").remove();
-    }
+    close: closeDialog
   });
 
   showLoading("#gDialog");
@@ -55,6 +54,18 @@ function openDialog(element, on_success) {
 			dialogWidth = 500;
 		}
 		$("#gDialog").dialog('option', 'width', dialogWidth);
+    if ($("#gDialog .submit").length) {
+      $("#gDialog .submit").addClass("ui-state-default ui-corner-all");
+      $("#gDialog .submit").parent().append(eCancel);
+    }
+    $("#gDialog .ui-state-default").hover(
+      function(){
+        $(this).addClass("ui-state-hover");
+      },
+      function(){
+        $(this).removeClass("ui-state-hover");
+      }
+    );
     $("#gDialog").dialog("open");
     // Remove titlebar for progress dialogs or set title
     if ($("#gDialog #gProgress").length) {
@@ -91,6 +102,9 @@ function openDialog(element, on_success) {
   return false;
 }
 
+function closeDialog() {
+  $("#gDialog").dialog("destroy").remove();
+}
 /**
  * Toggle the processing indicator, both large and small
  * @param elementID Target ID, including #, to apply .gLoadingSize
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index e6b8107f..d8f9419c 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -78,6 +78,11 @@ a:hover,
   text-decoration: underline;
 }
 
+#gDialog .gCancel {
+  float: left;
+  margin: .3em 1em;
+}
+
 #gForgotPasswordLink {
   float: right;
   font-size: .9em;
@@ -190,6 +195,12 @@ textarea {
   padding: .2em;
 }
 
+input[type="submit"],
+input[type="reset"] {
+  clear: none !important;
+  float: left;
+}
+
 /* Form validation ~~~~~~~~~~~~~~~~~~~~~~~ */
 
 .gValidationRule {