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.

7 files changed, 38 insertions, 16 deletions

diff --git a/core/libraries/Block.php b/core/libraries/Block.php
index 3689bff0..a57684b5 100644
--- a/core/libraries/Block.php
+++ b/core/libraries/Block.php
@@ -22,6 +22,7 @@ class Block_Core {
   public $css_id = null;
   public $id = null;
   public $title = null;
+  public $anchor = null;
 
   public function __toString() {
     return View::factory("block.html", get_object_vars($this))->__toString();
diff --git a/modules/comment/helpers/comment_theme.php b/modules/comment/helpers/comment_theme.php
index 3861bae0..b7e64e38 100644
--- a/modules/comment/helpers/comment_theme.php
+++ b/modules/comment/helpers/comment_theme.php
@@ -27,6 +27,7 @@ class comment_theme_Core {
     $block = new Block;
     $block->css_id = "gComments";
     $block->title = t("Comments");
+    $block->anchor = t("comments");
 
     $view = new View("comments.html");
     $view->comments = ORM::factory("comment")
diff --git a/modules/comment/js/comment.js b/modules/comment/js/comment.js
index b000a3a2..bb486bbd 100644
--- a/modules/comment/js/comment.js
+++ b/modules/comment/js/comment.js
@@ -13,9 +13,10 @@ function ajaxify_comment_form() {
       if (data.result == "success") {
         $.get(data.resource, function(data, textStatus) {
           $("#gComments .gBlockContent ul:first").append("<li>"+data+"</li>");
-          $("#gComments .gBlockContent ul:first li:last").hide().slideDown();
+          $("#gComments .gBlockContent ul:first li:last").effect("highlight", {color: "#cfc"}, 8000);
+          $("#gAddCommentForm").hide(2000);
         });
       }
     }
   });
-};
+}
diff --git a/modules/comment/views/comments.html.php b/modules/comment/views/comments.html.php
index ec7530c4..b407930e 100644
--- a/modules/comment/views/comments.html.php
+++ b/modules/comment/views/comments.html.php
@@ -1,5 +1,4 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<a name="comments"></a>
 <ul id="gComments">
   <? foreach ($comments as $comment): ?>
   <li id="gComment-<?= $comment->id ?>">
@@ -21,3 +20,4 @@
   </li>
   <? endforeach ?>
 </ul>
+<a name="add_comment_form"></a>
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index d9c54c29..9de4508c 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -463,13 +463,14 @@ form p.gError {
 }
 
 #gContent #gComments .gAuthor {
-  background-color: #e8e8e8;
+  border-bottom: 1px solid #ccc;
+  color: #999;
   height: 32px;
   line-height: 32px;
 }
 
 #gContent #gComments ul li div {
-  padding: 0 8px 8px 32px;
+  padding: 0 8px 8px 43px;
 }
 
 #gContent #gComments ul li #gRecaptcha {
@@ -481,7 +482,13 @@ form p.gError {
 }
 
 #gContent #gComments .gAvatar {
+  height: 32px;
   margin-right: .4em;
+  width: 32px;
+}
+
+#gContent #gAddCommentForm {
+  margin-top: 2em;
 }
 
 /* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */
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
diff --git a/themes/default/views/block.html.php b/themes/default/views/block.html.php
index a2357ab6..37504861 100644
--- a/themes/default/views/block.html.php
+++ b/themes/default/views/block.html.php
@@ -1,4 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
+<a name="<?= $anchor ?>"></a>
 <div id="<?= $css_id ?>" class="gBlock">
   <h2><?= $title ?></h2>
   <div class="gBlockContent">