Improved comment UX

diff --git a/com.woltlab.wcf/templates/commentList.tpl b/com.woltlab.wcf/templates/commentList.tpl
index 38814db6e736a790321de14ef36c5b5cafc572cc..54e9e6eecfd92abb60b4b1816431d153895e30d4 100644 (file)
--- a/com.woltlab.wcf/templates/commentList.tpl
+++ b/com.woltlab.wcf/templates/commentList.tpl
@@ -34,11 +34,11 @@
                                        </nav>
                                </div>
                                
-                               <ul data-responses="{@$comment->responses}" class="commentResponseList">
-                                       {if $comment|count}
+                               {if $comment|count}
+                                       <ul data-responses="{@$comment->responses}" class="commentResponseList">
                                                {include file='commentResponseList' responseList=$comment}
-                                       {/if}
-                               </ul>
+                                       </ul>
+                               {/if}
                        </div>
                </div>
        </li>

diff --git a/wcfsetup/install/files/js/WCF.Comment.js b/wcfsetup/install/files/js/WCF.Comment.js
index d646ab6a1b1b54b9714df8b50495be346ddcbc64..c67f083d9ccf4e378688b87a951685273846fdc6 100644 (file)
--- a/wcfsetup/install/files/js/WCF.Comment.js
+++ b/wcfsetup/install/files/js/WCF.Comment.js
@@ -228,7 +228,10 @@ WCF.Comment.Handler = Class.extend({
                        var $commentID = $comment.data('commentID');
                        self._comments[$commentID] = $comment;
                        
-                       var $container = $('<div class="commentOptionContainer" />').hide().insertAfter($comment.find('ul.commentResponseList'));
+                       var $insertAfter = $comment.find('ul.commentResponseList');
+                       if (!$insertAfter.length) $insertAfter = $comment.find('.commentContent');
+                       
+                       $container = $('<div class="commentOptionContainer" />').hide().insertAfter($insertAfter);
                        self._commentButtonList[$commentID] = $('<ul />').appendTo($container);
                        
                        self._handleLoadNextResponses($commentID);
@@ -330,6 +333,9 @@ WCF.Comment.Handler = Class.extend({
                if ($placeholder !== null) {
                        $listItem.hide();
                }
+               else {
+                       this._commentButtonList[commentID].parent().addClass('jsAddResponseActive');
+               }
                $listItem.appendTo(this._commentButtonList[commentID].parent().show());
                
                var $inputContainer = $listItem.children('div');
@@ -389,6 +395,8 @@ WCF.Comment.Handler = Class.extend({
                
                var $responseInput = this._comments[$commentID].data('responseInput').show();
                $responseInput.find('input').focus();
+               
+               $responseInput.parents('.commentOptionContainer').addClass('jsAddResponseActive');
        },
        
        /**
@@ -488,7 +496,10 @@ WCF.Comment.Handler = Class.extend({
                        break;
                        
                        case 'addResponse':
-                               $(data.returnValues.template).appendTo(this._comments[data.returnValues.commentID].find('ul.commentResponseList')).wcfFadeIn();
+                               var $comment = this._comments[data.returnValues.commentID];
+                               var $responseList = $comment.find('ul.commentResponseList');
+                               if (!$responseList.length) $responseList = $('<ul class="commentResponseList" />').insertBefore($comment.find('.commentOptionContainer'));
+                               $(data.returnValues.template).appendTo($responseList).wcfFadeIn();
                        break;
                        
                        case 'edit':