Disable elements while a comment is being deleted

When a comment is being deleted the "disabled" class is added to the
comment div, which causes it to look disabled. However, the input
elements and the content editable div were not truly disabled, and thus
it was still possible to interact with them. This commit ensures that
they are properly disabled while the comment is being deleted.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

2 files changed, 13 insertions, 2 deletions

diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css
index 1ed418df2fc..6b0452da1fd 100644
--- a/apps/comments/css/comments.css
+++ b/apps/comments/css/comments.css
@@ -35,8 +35,8 @@
 	border: none;
 	opacity: .3;
 }
-#commentsTabView .newCommentForm .submit:hover,
-#commentsTabView .newCommentForm .submit:focus {
+#commentsTabView .newCommentForm .submit:not(:disabled):hover,
+#commentsTabView .newCommentForm .submit:not(:disabled):focus {
 	opacity: 1;
 }
 
diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index 7398a709421..0d2d0b0b81f 100644
--- a/apps/comments/js/commentstabview.js
+++ b/apps/comments/js/commentstabview.js
@@ -544,9 +544,16 @@
 			var $comment = $(ev.target).closest('.comment');
 			var commentId = $comment.data('id');
 			var $loading = $comment.find('.submitLoading');
+			var $commentField = $comment.find('.message');
+			var $submit = $comment.find('.submit');
+			var $cancel = $comment.find('.cancel');
 
+			$commentField.prop('contenteditable', false);
+			$submit.prop('disabled', true);
+			$cancel.prop('disabled', true);
 			$comment.addClass('disabled');
 			$loading.removeClass('hidden');
+
 			this.collection.get(commentId).destroy({
 				success: function() {
 					$comment.data('commentEl').remove();
@@ -555,6 +562,10 @@
 				error: function() {
 					$loading.addClass('hidden');
 					$comment.removeClass('disabled');
+					$commentField.prop('contenteditable', true);
+					$submit.prop('disabled', false);
+					$cancel.prop('disabled', false);
+
 					OC.Notification.showTemporary(t('comments', 'Error occurred while retrieving comment with id {id}', {id: commentId}));
 				}
 			});