Move comment delete action into edit mode

diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css
index f4e7d144ec5d8793d8254ce6d1d3d1053bf4c62d..b86ed38efe7bd83e0f04871dacd1ec728828bd99 100644 (file)
--- a/apps/comments/css/comments.css
+++ b/apps/comments/css/comments.css
@@ -47,7 +47,7 @@
 
 #commentsTabView .comment .date {
        position: absolute;
-       right: 20px;
+       right: 0;
 }
 
 #commentsTabView .comment .action {

diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index 9db39408c7099861c83b08dad83319f055965659..2c5e9414751f60b407c8f200b0816ee975f847e5 100644 (file)
--- a/apps/comments/js/commentstabview.js
+++ b/apps/comments/js/commentstabview.js
@@ -27,12 +27,15 @@
                '        {{/if}}' +
                '        <div class="author">{{actorDisplayName}}</div>' +
                '{{#if isEditMode}}' +
-               '        <a href="#" class="action close icon icon-close has-tooltip" title="{{closeTooltip}}"></a>' +
+               '        <a href="#" class="action delete icon icon-delete has-tooltip" title="{{deleteTooltip}}"></a>' +
                '{{/if}}' +
                '    </div>' +
                '    <form class="newCommentForm">' +
                '        <textarea class="message" placeholder="{{newMessagePlaceholder}}">{{{message}}}</textarea>' +
                '        <input class="submit" type="submit" value="{{submitText}}" />' +
+               '{{#if isEditMode}}' +
+               '        <input class="cancel" type="button" value="{{cancelText}}" />' +
+               '{{/if}}' +
                '        <div class="submitLoading icon-loading-small hidden"></div>'+
                '    </form>' +
                '</div>';
@@ -48,9 +51,6 @@
                '        <a href="#" class="action edit icon icon-rename has-tooltip" title="{{editTooltip}}"></a>' +
                '{{/if}}' +
                '        <div class="date has-tooltip" title="{{altDate}}">{{date}}</div>' +
-               '{{#if isUserAuthor}}' +
-               '        <a href="#" class="action delete icon icon-delete has-tooltip" title="{{deleteTooltip}}"></a>' +
-               '{{/if}}' +
                '    </div>' +
                '    <div class="message">{{{formattedMessage}}}</div>' +
                '</li>';
@@ -68,7 +68,7 @@
                        'click .showMore': '_onClickShowMore',
                        'click .action.edit': '_onClickEditComment',
                        'click .action.delete': '_onClickDeleteComment',
-                       'click .action.close': '_onClickCloseComment'
+                       'click .cancel': '_onClickCloseComment'
                },
 
                initialize: function() {
@@ -102,10 +102,12 @@
                        var currentUser = OC.getCurrentUser();
                        return this._editCommentTemplate(_.extend({
                                avatarEnabled: this._avatarsEnabled,
-                               userId: currentUser.uid,
-                               userDisplayName: currentUser.displayName,
+                               actorId: currentUser.uid,
+                               actorDisplayName: currentUser.displayName,
                                newMessagePlaceholder: t('comments', 'Type in a new comment...'),
-                               submitText: t('comments', 'Post')
+                               deleteTooltip: t('comments', 'Delete comment'),
+                               submitText: t('comments', 'Post'),
+                               cancelText: t('comments', 'Cancel')
                        }, params));
                },
 
@@ -115,7 +117,6 @@
                        }
                        return this._commentTemplate(_.extend({
                                avatarEnabled: this._avatarsEnabled,
-                               deleteTooltip: t('comments', 'Delete comment'),
                                editTooltip: t('comments', 'Edit comment'),
                                isUserAuthor: OC.getCurrentUser().uid === params.actorId
                        }, params));
@@ -167,9 +168,11 @@
                        this.$el.find('.loading').toggleClass('hidden', !state);
                },
 
-               _onRequest: function() {
-                       this._toggleLoading(true);
-                       this.$el.find('.showMore').addClass('hidden');
+               _onRequest: function(type) {
+                       if (type === 'REPORT') {
+                               this._toggleLoading(true);
+                               this.$el.find('.showMore').addClass('hidden');
+                       }
                },
 
                _onEndRequest: function(type) {
@@ -251,6 +254,7 @@
 
                        // copy avatar element from original to avoid flickering
                        $formRow.find('.avatar').replaceWith($comment.find('.avatar').clone());
+                       $formRow.find('.has-tooltip').tooltip();
 
                        return false;
                },
@@ -267,14 +271,17 @@
                        ev.preventDefault();
                        var $comment = $(ev.target).closest('.comment');
                        var commentId = $comment.data('id');
-                       // TODO: undo logic
+                       var $loading = $comment.find('.submitLoading');
 
                        $comment.addClass('disabled');
+                       $loading.removeClass('hidden');
                        this.collection.get(commentId).destroy({
                                success: function() {
+                                       $comment.data('commentEl').remove();
                                        $comment.remove();
                                },
                                error: function(msg) {
+                                       $loading.addClass('hidden');
                                        $comment.removeClass('disabled');
                                        OC.Notification.showTemporary(msg);
                                }