From 09954b20702581dd98283eb17eacae21f30b4de2 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 23 Aug 2022 21:50:51 +0200
Subject: [PATCH] Use a native button for the comment placeholder

---
 .../templates/commentListAddComment.tpl       |  6 +++-
 wcfsetup/install/files/style/ui/comment.scss  | 32 +++++++------------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/com.woltlab.wcf/templates/commentListAddComment.tpl b/com.woltlab.wcf/templates/commentListAddComment.tpl
index 5b14b062c5..123659df31 100644
--- a/com.woltlab.wcf/templates/commentListAddComment.tpl
+++ b/com.woltlab.wcf/templates/commentListAddComment.tpl
@@ -1,6 +1,10 @@
 <li class="box48 jsCommentAdd jsOnly">
 	{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(48)}
-	<div class="commentListAddComment collapsed jsOuterEditorContainer" data-placeholder="{lang}wcf.comment.add{/lang}">
+	<div class="commentListAddComment collapsed jsOuterEditorContainer">
+		<button type="button" class="commentListAddCommentPlaceholder">
+			{icon size=32 name='reply'}
+			{lang}wcf.comment.add{/lang}
+		</button>
 		<div class="commentListAddCommentEditorContainer">
 			{if !$commentList->getCommentManager()->canAddWithoutApproval($commentList->objectID)}
 				<p class="info jsCommentAddRequiresApproval">{lang}wcf.comment.moderation.info{/lang}</p>
diff --git a/wcfsetup/install/files/style/ui/comment.scss b/wcfsetup/install/files/style/ui/comment.scss
index c68d4b377c..15ee64ec34 100644
--- a/wcfsetup/install/files/style/ui/comment.scss
+++ b/wcfsetup/install/files/style/ui/comment.scss
@@ -104,38 +104,30 @@
 
 .commentListAddComment {
 	&.collapsed {
-		background-color: $wcfSidebarBackground;
-		cursor: pointer;
 		overflow: hidden;
-		padding: 10px 20px;
 		position: relative;
 
-		&::before {
+		.commentListAddCommentPlaceholder {
+			align-items: center;
+			background-color: $wcfSidebarBackground;
+			column-gap: 10px;
 			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;
+			display: flex;
+			padding: 10px 20px;
+			width: 100%;
 		}
 
-		&::after {
-			color: $wcfSidebarText;
-			content: attr(data-placeholder);
-			position: relative;
-			top: 2px;
-		}
-
-		> .commentListAddCommentEditorContainer {
+		.commentListAddCommentEditorContainer {
 			left: 200%;
 			position: absolute;
 			top: -100%;
 		}
 	}
 
+	&:not(.collapsed) .commentListAddCommentPlaceholder {
+		display: none;
+	}
+
 	&.loading {
 		height: 150px;
 		position: relative;
-- 
2.20.1