Dialog polishing. They now resize their height. Updated form styles in the context of dialog display (don't show legends, fieldset border, or submit button).

Let's make sure that all forms generated are complete and well formed and then use JS and CSS to control their display and behavior in different contexts.

3 files changed, 25 insertions, 23 deletions

diff --git a/modules/user/views/login.html.php b/modules/user/views/login.html.php
index 53f67641..c5057577 100644
--- a/modules/user/views/login.html.php
+++ b/modules/user/views/login.html.php
@@ -1,9 +1,12 @@
 <? defined("SYSPATH") or die("No direct script access."); ?>
 <ul id="gLoginMenu">
   <? if ($user->guest): ?>
-    <li><a href="<?= url::site("login") ?>" id="gLoginLink"><?= _("Login") ?></a></li>
+    <li><a href="<?= url::site("login") ?>" 
+        title="<?= _("Login to Gallery") ?>" 
+        id="gLoginLink"><?= _("Login") ?></a></li>
   <? else: ?>
     <li><a href="<?= url::site("user/{$user->id}?continue=" . url::current(true))?>"
+        title="<?= _("Edit Your Profile") ?>" 
         id="gUserProfileLink"><?= _("Modify Profile") ?></a></li>
     <li><a href="<?= url::site("logout?continue=" . url::current(true)) ?>" 
         id="gLogoutLink"><?= _("Logout") ?></a></li>
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 703b9bb7..af82a6db 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -720,33 +720,17 @@ span.gInPlaceEdit:hover {
   color: #6b8cb7;
 }
 
-.gClose a {
-  border: 1px solid #ccc;
-  color: #ccc;
-  display: block;
-  font-weight: bold;
-  padding: 1px 3px;
-}
-
-.gClose a:hover {
-  border: 1px solid #666;
-  color: #666;
-  text-decoration: none;
-}
-
-.gHide,
-.gClose {
-  display: none;
-}
-
 #gDialog {
   text-align: left;
 }
 
-#gDialog form {
+#gDialog fieldset {
+  border: none;
 }
 
-.gDialogLink {
+#gDialog legend,
+#gDialog button.submit {
+  display: none;
 }
 
 .gLoadingLarge {
@@ -926,6 +910,7 @@ body .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body
   text-align: left;
   border-top: 1px solid #dddddd;
   background: #f3f3f3;
+  padding-left: 36px;
 }
 .ui-dialog-buttonpane button {
   margin: .5em 0 .5em 8px;
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index 3f917ff0..7a9c69b5 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -95,6 +95,8 @@ function handleDialogEvent(event) {
  * @see handleDialogEvent()
  * 
  * @todo Set dialog attributes dynamically (width, height, drag, resize)
+ * @todo Set ui-dialog-buttonpane button values equal to the original form button value
+ * @todo Display loading animation on form submit
  */
 function openDialog(element) {
   var sHref = $(element).attr("href");
@@ -124,7 +126,7 @@ function openDialog(element) {
   $("#gDialog").dialog({
     autoResize: false,
     draggable: true,
-    height: 500,
+    height: $(window).height() - 40,
     modal: true,
     overlay: {
       opacity: 0.7,
@@ -144,6 +146,18 @@ function openDialog(element) {
   $.get(sHref, function(data) {
     $("#gDialog").removeClass("gLoadingLarge");	
     $("#gDialog").html(data).hide().fadeIn();
+    // Get dialog and it's contents' height
+    var contentHt =  $(".ui-dialog-titlebar").height() 
+        + $(".ui-dialog-content form").height() 
+        + $(".ui-dialog-buttonpane").height() 
+        + 60;
+    // Resize height if content's shorter than dialog        
+    if (contentHt < $("#gDialog").data("height.dialog")) {
+      $(".ui-dialog").animate({height: contentHt});
+    }
   });
+  
+  
+  
   return false;
 }