Merge pull request #7280 from nextcloud/fix-working-icon-position-when-sending-or-deleting-a-comment

Fix working icon position when sending or deleting a comment

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 {
@@ -168,7 +182,8 @@
 	opacity: 1;
 }
 
-#commentsTabView .comment .action.delete {
+#commentsTabView .comment .action.delete,
+#commentsTabView .comment .deleteLoading {
 	position: absolute;
 	right: 0;
 }

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');