From 6e9c0b908513dd8e268f20875c5e5359fe9cbc35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Fri, 24 Nov 2017 13:34:14 +0100
Subject: [PATCH 1/2] Show submit working icon at the same position as the
 submit confirm icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The submit confirm icon is shown as the background image of an
absolutely positioned input element, so the CSS rules for the submit
working icon were modified to match those of the submit confirm icon.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 apps/comments/css/comments.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css
index 6b0452da1fdfe..428dc778a65c7 100644
--- a/apps/comments/css/comments.css
+++ b/apps/comments/css/comments.css
@@ -42,6 +42,20 @@
 
 #commentsTabView .newCommentForm .submitLoading {
 	background-position: left;
+
+	/* Match rules for '#commentsTabView .newCommentForm .submit' to place the
+	   loading icon at the same position as the confirm icon */
+	position: absolute;
+	bottom: 0px;
+	right: 8px;
+	width: 30px;
+	margin: 0;
+	padding: 7px 9px;
+
+	/* Match rules for 'input[type="submit"]' to place the loading icon at the
+	   same position as the confirm icon */
+	min-height: 34px;
+	box-sizing: border-box;
 }
 
 #commentsTabView .newCommentForm .cancel {

From 9bb2bb7870bf1f8715193c4d90d636e08faa7afd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Fri, 24 Nov 2017 14:07:39 +0100
Subject: [PATCH 2/2] Show delete working icon at the same position as the
 delete icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a comment was being deleted the submit working icon was shown. Now
the submit working icon is kept hidden in that case and a specific
delete working icon, which is shown at the same position as the delete
icon, is used instead.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 apps/comments/css/comments.css      | 3 ++-
 apps/comments/js/commentstabview.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css
index 428dc778a65c7..90b3678b21969 100644
--- a/apps/comments/css/comments.css
+++ b/apps/comments/css/comments.css
@@ -177,7 +177,8 @@
 	opacity: 1;
 }
 
-#commentsTabView .comment .action.delete {
+#commentsTabView .comment .action.delete,
+#commentsTabView .comment .deleteLoading {
 	position: absolute;
 	right: 0;
 }
diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index 0d2d0b0b81fb9..d64b70494fd22 100644
--- a/apps/comments/js/commentstabview.js
+++ b/apps/comments/js/commentstabview.js
@@ -27,6 +27,7 @@
 		'        <div class="author">{{actorDisplayName}}</div>' +
 		'{{#if isEditMode}}' +
 		'        <a href="#" class="action delete icon icon-delete has-tooltip" title="{{deleteTooltip}}"></a>' +
+		'        <div class="deleteLoading icon-loading-small hidden"></div>'+
 		'{{/if}}' +
 		'    </div>' +
 		'    <form class="newCommentForm">' +
@@ -543,7 +544,7 @@
 			ev.preventDefault();
 			var $comment = $(ev.target).closest('.comment');
 			var commentId = $comment.data('id');
-			var $loading = $comment.find('.submitLoading');
+			var $loading = $comment.find('.deleteLoading');
 			var $commentField = $comment.find('.message');
 			var $submit = $comment.find('.submit');
 			var $cancel = $comment.find('.cancel');