Add spinner when submitting comments

diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css
index b1108467f685668d5f9be657e49ec514c5dffc4c..c1624dcc57b9b118c2e9a2031b16ca0920387840 100644 (file)
--- a/apps/comments/css/comments.css
+++ b/apps/comments/css/comments.css
@@ -17,8 +17,8 @@
        resize: none;
 }
 
-#commentsTabView .newCommentForm .submit {
-       display: block;
+#commentsTabView .newCommentForm .submitLoading {
+       background-position: left;
 }
 
 #commentsTabView .comment {

diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index bc496f2e599b5e8925df09b0ce394fe7c3ef24f7..fd6b7b07dcb7ceb49de107982116bd440985b3ef 100644 (file)
--- a/apps/comments/js/commentstabview.js
+++ b/apps/comments/js/commentstabview.js
@@ -20,6 +20,7 @@
                '    <form class="newCommentForm">' +
                '        <textarea class="message" placeholder="{{newMessagePlaceholder}}"></textarea>' +
                '        <input class="submit" type="submit" value="{{submitText}}" />' +
+               '        <div class="submitLoading icon-loading-small hidden"></div>'+
                '    </form>' +
                '    <ul class="comments">' +
                '    </ul>' +
@@ -125,7 +126,6 @@
                                altDate: OC.Util.formatDate(timestamp),
                                formattedMessage: this._formatMessage(commentModel.get('message'))
                        }, commentModel.attributes);
-                       // TODO: format
                        return data;
                },
 
@@ -188,9 +188,22 @@
                },
 
                _onSubmitComment: function(e) {
+                       var $form = $(e.target);
                        var currentUser = OC.getCurrentUser();
-                       var $textArea = $(e.target).find('textarea');
+                       var $submit = $form.find('.submit');
+                       var $loading = $form.find('.submitLoading');
+                       var $textArea = $form.find('textarea');
+                       var message = $textArea.val().trim();
                        e.preventDefault();
+
+                       if (!message.length) {
+                               return;
+                       }
+
+                       $textArea.prop('disabled', true);
+                       $submit.addClass('hidden');
+                       $loading.removeClass('hidden');
+
                        this.collection.create({
                                actorId: currentUser.uid,
                                actorDisplayName: currentUser.displayName,
@@ -198,10 +211,22 @@
                                verb: 'comment',
                                message: $textArea.val(),
                                creationDateTime: (new Date()).getTime()
-                       }, {at: 0});
+                       }, {
+                               at: 0,
+                               success: function() {
+                                       $submit.removeClass('hidden');
+                                       $loading.addClass('hidden');
+                                       $textArea.val('').prop('disabled', false);
+                               },
+                               error: function(msg) {
+                                       $submit.removeClass('hidden');
+                                       $loading.addClass('hidden');
+                                       $textArea.prop('disabled', false);
+
+                                       OC.Notification.showTemporary(msg);
+                               }
+                       });
 
-                       // TODO: spinner/disable field?
-                       $textArea.val('');
                        return false;
                }
        });