Added a show comment form button. Add comment form is revealed when the button is clicked. Used jQuery UI Effect to .highlight() to bring attention to newly added comments. Also added a named anchor to our block library to allow direct linking/scrolling to those blocks on the page.

1 files changed, 22 insertions, 11 deletions

diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index 10f29f23..bdfd7214 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -25,7 +25,7 @@ $(document).ready(function() {
   });
 
   // Apply jQuery UI button css to submit inputs
-  $("input[type=submit]").addClass("ui-state-default");
+  $("input[type=submit]").addClass("ui-state-default ui-corner-all");
   
   // Round view menu buttons
   if ($("#gViewMenu").length) {
@@ -35,16 +35,6 @@ $(document).ready(function() {
     $("#gViewMenu ul li:last a").addClass("ui-corner-right");
   }
 
-    // Add hover state for buttons
-  $(".ui-state-default").hover(
-	  function(){
-		  $(this).addClass("ui-state-hover");
-	  },
-	  function(){
-		  $(this).removeClass("ui-state-hover");
-	  }
-  );
-
   // Short forms
   handleShortFormEvent(shortForms);
   if ($(".gShortForm").length) {
@@ -64,12 +54,23 @@ $(document).ready(function() {
     // fit inside their container
     sizedImage();
 
+    // Collapse comments form, insert button to expand
+    if ($("#gAddCommentForm").length) {
+      var showCommentForm = '<a href="#add_comment_form" id="showCommentForm" class="gButtonLink ui-corner-all ui-icon-left ui-state-default right"><span class="ui-icon ui-icon-comment"></span>Add a comment</a>';
+      $("#gAddCommentForm").hide();
+      $("#gComments").prepend(showCommentForm);
+      $("#showCommentForm").click(function(){
+        $("#gAddCommentForm").show(1000);
+      });
+    }
+
     // Add scroll effect for links to named anchors
     $.localScroll({
       queue: true,
       duration: 1000,
       hash: true
     });
+
   }
 
   // Apply modal dialogs
@@ -80,6 +81,16 @@ $(document).ready(function() {
     $(dialogLinks[i]).bind("click", handleDialogEvent);
   }
 
+  // Add hover state for buttons
+  $(".ui-state-default").hover(
+	  function(){
+		  $(this).addClass("ui-state-hover");
+	  },
+	  function(){
+		  $(this).removeClass("ui-state-hover");
+	  }
+  );
+
 });
 
 // Vertically align a block element's content