From 0a9008b034cbada6963f798bc3263ac00412059e Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 2 Mar 2017 13:15:01 +0100
Subject: [PATCH] Added placeholder support, improved styles

See #2222
---
 .../templates/commentListAddComment.tpl       | 23 ++++----
 .../js/WoltLabSuite/Core/Ui/Comment/Add.js    | 16 +++++
 wcfsetup/install/files/style/ui/comment.scss  | 59 +++++++++++++++++++
 3 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/com.woltlab.wcf/templates/commentListAddComment.tpl b/com.woltlab.wcf/templates/commentListAddComment.tpl
index fb8d280903..831c6420a8 100644
--- a/com.woltlab.wcf/templates/commentListAddComment.tpl
+++ b/com.woltlab.wcf/templates/commentListAddComment.tpl
@@ -1,16 +1,19 @@
 <li class="box48 jsCommentAdd jsOnly">
 	{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(48)}
-	<div class="commentListAddComment">
-		<textarea id="text" name="text" class="wysiwygTextarea"
-		          data-disable-attachments="true"
-		          data-support-mention="true"
-		></textarea>
-		{include file='wysiwyg' userProfileCommentList=$commentListContainerID}
-		
-		<div class="formSubmit">
-			<button class="buttonPrimary" data-type="save" accesskey="s">{lang}wcf.global.button.submit{/lang}</button>
+	<div class="commentListAddComment collapsed" data-placeholder="{lang}wcf.comment.add{/lang}">
+		<div class="commentListAddCommentEditorContainer">
+			<textarea id="text" name="text" class="wysiwygTextarea"
+			          data-disable-attachments="true"
+			          data-disable-media="true"
+			          data-support-mention="true"
+			></textarea>
+			{include file='wysiwyg' userProfileCommentList=$commentListContainerID}
 			
-			{include file='messageFormPreviewButton' previewMessageObjectType='com.woltlab.wcf.comment' previewMessageObjectID=0}
+			<div class="formSubmit">
+				<button class="buttonPrimary" data-type="save" accesskey="s">{lang}wcf.global.button.submit{/lang}</button>
+				
+				{include file='messageFormPreviewButton' previewMessageObjectType='com.woltlab.wcf.comment' previewMessageObjectID=0}
+			</div>
 		</div>
 	</div>
 </li>
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js
index cf6816df23..990678b8a1 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js
@@ -35,6 +35,18 @@ define(['Ajax', 'Core', 'EventHandler', 'Language', 'Dom/ChangeListener', 'Dom/U
 			this._editor = null;
 			this._loadingOverlay = null;
 			
+			this._content.addEventListener(WCF_CLICK_EVENT, (function (event) {
+				if (this._content.classList.contains('collapsed')) {
+					event.preventDefault();
+					
+					this._content.classList.remove('collapsed');
+					
+					UiScroll.element(this._container, (function() {
+						window.jQuery(this._textarea).redactor('WoltLabCaret.endOfEditor');
+					}).bind(this));
+				}	
+			}).bind(this));
+			
 			// handle submit button
 			var submitButton = elBySel('button[data-type="save"]', this._container);
 			submitButton.addEventListener(WCF_CLICK_EVENT, this._submit.bind(this));
@@ -287,6 +299,10 @@ define(['Ajax', 'Core', 'EventHandler', 'Language', 'Dom/ChangeListener', 'Dom/U
 				this._reset();
 				
 				this._hideLoadingOverlay();
+				
+				window.setTimeout((function () {
+					UiScroll.element(this._container.nextElementSibling);
+				}).bind(this), 100);
 			}
 		},
 		
diff --git a/wcfsetup/install/files/style/ui/comment.scss b/wcfsetup/install/files/style/ui/comment.scss
index 8583bd92ea..8be172dfcb 100644
--- a/wcfsetup/install/files/style/ui/comment.scss
+++ b/wcfsetup/install/files/style/ui/comment.scss
@@ -7,6 +7,10 @@
 				opacity: 0;
 			}
 		}
+		
+		&.jsCommentAdd {
+			padding-right: 0;
+		}
 	}
 	
 	.commentContent {
@@ -54,3 +58,58 @@
 		margin-top: 2px;
 	}
 }
+
+.commentListAddComment {
+	&.collapsed {
+		background-color: $wcfSidebarBackground;
+		cursor: pointer;
+		overflow: hidden;
+		padding: 10px 20px;
+		position: relative;
+		
+		&::before {
+			color: $wcfSidebarText;
+			content: $fa-var-reply;
+			font-family: FontAwesome;
+			font-size: 28px;
+			height: 32px;
+			line-height: 32px;
+			margin-right: 10px;
+			width: 32px;
+			vertical-align: -5px;
+		}
+		
+		&::after {
+			color: $wcfSidebarText;
+			content: attr(data-placeholder);
+			position: relative;
+			top: 2px;
+			
+			@include screen-sm-up {
+				@include wcfFontSection;
+			}
+		}
+		
+		> .commentListAddCommentEditorContainer {
+			left: 200%;
+			position: absolute;
+			top: -100%;
+		}
+	}
+	
+	&.loading {
+		height: 150px;
+		position: relative;
+		
+		> .commentListAddCommentEditorContainer {
+			display: none;
+		}
+		
+		> .commentLoadingOverlay {
+			left: 50%;
+			position: absolute;
+			top: 50%;
+			transform: translateX(-50%) translateY(-50%);
+		}
+	}
+}
-- 
2.20.1