feat: dismiss reply

frappe/templates/discussions/discussions.js

@@ -45,19 +45,16 @@ frappe.ready(() => {
 		back_to_sidebar(e);
 	});
 
+	$(".dismiss-reply").click((e) => {
+		dismiss_reply(e);
+	})
+
 	$(".reply-card .dropdown-menu").on("click", "[data-action]", (e) => {
 		perform_action(e);
 	});
 
 	$(document).on("input", ".discussion-on-page .comment-field", (e) => {
-		if ($(e.currentTarget).val()) {
-			$(e.currentTarget).css("height", "48px");
-			$(".cancel-comment").removeClass("hide").addClass("show");
-			$(e.currentTarget).css("height", $(e.currentTarget).prop("scrollHeight"));
-		} else {
-			$(".cancel-comment").removeClass("show").addClass("hide");
-			$(e.currentTarget).css("height", "48px");
-		}
+		adjust_comment_box_height(e);
 	});
 
 });
@@ -192,17 +189,19 @@ const submit_discussion = (e) => {
 	e.preventDefault();
 	e.stopImmediatePropagation();
 
+	const target = $(e.currentTarget);
+	const reply_name = target.data("reply");
 	const title = $(".topic-title:visible").length ? $(".topic-title:visible").val().trim() : "";
-	const reply = $(".comment-field:visible").val().trim();
+	let reply = reply_name ? target.closest(".reply-card") : target.closest(".discussion-form");
+	reply = reply.find(".comment-field").val().trim();
 
 	if (reply) {
-		let doctype = $(e.currentTarget).closest(".discussions-parent").attr("data-doctype");
+		let doctype = target.closest(".discussions-parent").attr("data-doctype");
 		doctype = doctype ? decodeURIComponent(doctype) : doctype;
 
-		let docname = $(e.currentTarget).closest(".discussions-parent").attr("data-docname");
+		let docname = target.closest(".discussions-parent").attr("data-docname");
 		docname = docname ? decodeURIComponent(docname) : docname;
 
-		let reply_name = $(e.currentTarget).data("reply");
 
 		frappe.call({
 			method: "frappe.website.doctype.discussion_topic.discussion_topic.submit_discussion",
@@ -211,12 +210,12 @@ const submit_discussion = (e) => {
 				"docname": docname ? docname : "",
 				"reply": reply,
 				"title": title,
-				"topic_name": $(e.currentTarget).closest(".discussion-on-page").attr("data-topic"),
+				"topic_name": target.closest(".discussion-on-page").attr("data-topic"),
 				"reply_name": reply_name
 			},
 			callback: (data) => {
 				if (reply_name) {
-					const reply_card = $(e.currentTarget).closest(".reply-card");
+					const reply_card = target.closest(".reply-card");
 					reply_card.find(".reply-body").removeClass("hide");
 					reply_card.find(".reply-edit-card").addClass("hide");
 					reply_card.find(".reply-text").text(reply);
@@ -279,8 +278,26 @@ const perform_action = (e) => {
 	if (action === "edit") {
 		reply_card.find(".reply-edit-card").removeClass("hide");
 		reply_card.find(".reply-body").addClass("hide");
-		reply_card.find(".reply-actions").removeClass("hide")
+		reply_card.find(".reply-actions").removeClass("hide");
 	} else if (action === "delete") {
 
 	}
+};
+
+const dismiss_reply = (e) => {
+	const reply_card = $(e.currentTarget).closest(".reply-card");
+	reply_card.find(".reply-edit-card").addClass("hide");
+	reply_card.find(".reply-body").removeClass("hide");
+	reply_card.find(".reply-actions").addClass("hide");
+}
+
+const adjust_comment_box_height = (e) => {
+	if ($(e.currentTarget).val()) {
+		$(e.currentTarget).css("height", "3rem");
+		$(".cancel-comment").removeClass("hide").addClass("show");
+		$(e.currentTarget).css("height", $(e.currentTarget).prop("scrollHeight"));
+	} else {
+		$(".cancel-comment").removeClass("show").addClass("hide");
+		$(e.currentTarget).css("height", "3rem");
+	}
 }

frappe/templates/discussions/reply_card.html

@@ -10,7 +10,7 @@
 		<div class="ml-2 frappe-timestamp small" data-timestamp="{{ reply.creation }}"> {{ frappe.utils.pretty_date(reply.creation) }} </div>
 		<div class="reply-actions hide">
 			<div class="submit-discussion mr-2" data-reply="{{ reply.name }}"> {{ _("Post") }} </div>
-			<div class="cancel-comment"> {{ _("Clear") }} </div>
+			<div class="dismiss-reply"> {{ _("Dismiss") }} </div>
 		</div>
 	</div>
 	<div class="reply-body">

frappe/templates/styles/discussion_style.css

@@ -4,7 +4,6 @@
 }
 
 .discussion-on-page .comment-field {
-	height: 3rem;
 	padding: 1rem;
 }
 
@@ -263,3 +262,7 @@
 	align-items: center;
 	margin-bottom: 1rem;
 }
+
+.dismiss-reply {
+	cursor: pointer;
+}