From 1968e4a2a7df77ec4c553eaea1f077e5ce97522b Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 13 Sep 2013 21:12:18 +0200
Subject: [PATCH] Improved comment UX

---
 com.woltlab.wcf/templates/commentList.tpl |  8 ++++----
 wcfsetup/install/files/js/WCF.Comment.js  | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/com.woltlab.wcf/templates/commentList.tpl b/com.woltlab.wcf/templates/commentList.tpl
index 38814db6e7..54e9e6eecf 100644
--- 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 d646ab6a1b..c67f083d9c 100644
--- 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':
-- 
2.20.1