Added permanent reply textarea in comment popover

apps/common/main/lib/collection/Comments.js

@@ -58,8 +58,9 @@ define([
             this.each(function(comment) {
                 comment.set('editText', false);
                 comment.set('editTextInPopover', false);
+                comment.set('showBtnsInPopover', false);
                 comment.set('showReply', false);
-                comment.set('showReplyInPopover', false);
+                comment.set('showReplyInPopover', true);
                 comment.set('hideAddReply', false);
             });
         },

apps/common/main/lib/controller/Comments.js

@@ -966,8 +966,14 @@ define([
 
                     if (!comment) continue;
 
+
+                    if(comment.get('replys').some(function(reply){ return reply.get('editTextInPopover'); })){
+                        comment.set('showReplyInPopover', false); 
+                    }
+
                     if (this.subEditStrings[saveTxtId] && !hint) {
                         comment.set('editTextInPopover', true);
+                        comment.set('showReplyInPopover', false);
                         text = this.subEditStrings[saveTxtId];
                     }
                     else if (this.subEditStrings[saveTxtReplyId] && !hint) {
@@ -1348,7 +1354,7 @@ define([
                 editText            : false,
                 last                : undefined,
                 editTextInPopover   : (this.editPopover ? true : false),
-                showReplyInPopover  : false,
+                showReplyInPopover  : true,
                 hideAddReply        : !_.isUndefined(this.hidereply) ? this.hidereply : (this.showPopover ? true : false),
                 scope               : this.view,
                 editable            : (this.mode.canEditComments || (data.asc_getUserId() == this.currentUserId)) && AscCommon.UserInfoParser.canEditComment(data.asc_getUserName()),

apps/common/main/lib/model/Comment.js

@@ -72,7 +72,8 @@ define([
             id                  : Common.UI.getId(),        //  internal
             time                : 0,
             showReply           : false,
-            showReplyInPopover  : false,
+            showReplyInPopover  : true,
+            showBtnsInPopover   : false,
             editText            : false,
             editTextInPopover   : false,
             last                : undefined,

apps/common/main/lib/template/CommentsPopover.template

@@ -59,14 +59,16 @@
         <% }); %>
     <% } %>
 
-    <!-- add reply button -->
+    <!-- reply -->
 
-    <% if (!showReplyInPopover && !hideAddReply && !hint && !scope.viewmode) { %>
+    <% if (showReplyInPopover && !hideAddReply && !hint && !scope.viewmode) { %>
-        <% if (replys.length && !add_arrow) { %>
+        <div class="reply-ct">
-            <label class="user-reply" style="margin-left: 20px; margin-top: 5px;" role="presentation" tabindex="-1">textAddReply</label>
+            <textarea class="msg-reply user-select" placeholder="textAddReply" maxlength="maxCommLength" spellcheck="false"></textarea>
-        <% } else { %>
+            <% if(true) { %>
-            <label class="user-reply" role="presentation" tabindex="-1">textAddReply</label>
+                <button class="btn normal dlg-btn primary btn-reply" id="id-comments-change-popover" style="display:none">textReply</button>
-        <% } %>
+                <button class="btn normal dlg-btn btn-close" style="display:none">textClose</button>
+            <% } %>
+        </div>
     <% } %>
 
     <!-- edit buttons -->
@@ -89,16 +91,6 @@
         </div>
     <% } %>
 
-    <!-- reply -->
-
-    <% if (showReplyInPopover) { %>
-        <div class="reply-ct">
-            <textarea class="msg-reply user-select" placeholder="textAddReply" maxlength="maxCommLength" spellcheck="false"></textarea>
-            <button class="btn normal dlg-btn primary btn-reply" id="id-comments-change-popover">textReply</button>
-            <button class="btn normal dlg-btn btn-close">textClose</button>
-        </div>
-    <% } %>
-
     <!-- locked user -->
 
     <% if (lock) { %>

apps/common/main/lib/view/Comments.js

@@ -102,7 +102,7 @@ define([
                 var view = this,
                     textBox = $(this.el).find('textarea'),
                     domTextBox = null,
-                    minHeight = 55,
+                    minHeight = 21,
                     lineHeight = 0,
                     scrollPos = 0,
                     oldHeight = 0,

apps/common/main/lib/view/ReviewPopover.js

@@ -140,6 +140,10 @@ define([
                 body.css('position', 'relative');
             }
 
+            me.$window.on('focus', 'textarea', function(e) { me.commentsView.onFocusTextarea(e.currentTarget) });
+            me.$window.on('blur', 'textarea', function(e) { me.commentsView.onBlurTextarea(e.currentTarget) });
+
+
             var CommentsPopoverDataView = Common.UI.DataView.extend((function () {
 
                 var parentView = me;
@@ -152,6 +156,19 @@ define([
                         template: _.template('<div class="dataview-ct inner" style="overflow-y: visible;"></div>')
                     },
 
+                    onFocusTextarea: function(textarea) {
+                        if($(textarea).parent().hasClass('reply-ct'))
+                            me.$window.find('.reply-ct button').show();
+                    },
+
+                    onBlurTextarea: function(textarea) {
+                        if($(textarea).parent().hasClass('reply-ct')){
+                            setTimeout(() => {
+                                me.$window.find('.reply-ct button').hide();
+                            }, 120);
+                        }
+                    },
+
                     getTextBox: function () {
                         var text = $(this.el).find('textarea');
                         return (text && text.length) ? text : undefined;
@@ -177,7 +194,7 @@ define([
                         var view = this,
                             textBox = this.$el.find('textarea'),
                             domTextBox = null,
-                            minHeight = 55,
+                            minHeight = 21,
                             lineHeight = 0,
                             scrollPos = 0,
                             oldHeight = 0,
@@ -325,7 +342,8 @@ define([
                             }
 
                             if (btn.hasClass('btn-edit')) {
-                                var tip = btn.data('bs.tooltip');
+                                var tip = btn.data('bs.tooltip'),
+                                    isEdit = false;
                                 if (tip) tip.dontShow = true;
 
                                 if (!_.isUndefined(replyId)) {
@@ -333,7 +351,19 @@ define([
                                     me.fireEvent('comment:editReply', [commentId, replyId, true]);
 
                                     this.replyId = replyId;
+                                    isEdit = true;
+                                } else {
+                                    if (!showEditBox) {
+                                        me.fireEvent('comment:closeEditing');
+                                        record.set('editTextInPopover', true);
 
+                                        me.fireEvent('comment:show', [commentId]);
+                                        isEdit = true;
+                                    }
+                                }
+
+                                if(isEdit) {
+                                    record.set('showReplyInPopover', false);
                                     this.autoHeightTextBox();
 
                                     me.calculateSizeOfContent();
@@ -346,26 +376,6 @@ define([
 
                                     me.autoScrollToEditButtons();
                                     this.setFocusToTextBox();
-                                } else {
-                                    if (!showEditBox) {
-                                        me.fireEvent('comment:closeEditing');
-                                        record.set('editTextInPopover', true);
-
-                                        me.fireEvent('comment:show', [commentId]);
-
-                                        this.autoHeightTextBox();
-
-                                        me.calculateSizeOfContent();
-                                        me.setLeftTop(me.arrowPosX, me.arrowPosY, me.leftX);
-                                        me.calculateSizeOfContent();
-
-                                        readdresolves();
-
-                                        me.hookTextBox();
-
-                                        me.autoScrollToEditButtons();
-                                        this.setFocusToTextBox();
-                                    }
                                 }
                             } else if (btn.hasClass('btn-delete')) {
                                 var tip = btn.data('bs.tooltip');
@@ -386,23 +396,8 @@ define([
 
                                 readdresolves();
 
-                            } else if (btn.hasClass('user-reply')) {
-                                me.fireEvent('comment:closeEditing');
-                                record.set('showReplyInPopover', true);
-
-                                me.calculateSizeOfContent();
-                                me.setLeftTop(me.arrowPosX, me.arrowPosY, me.leftX);
-                                me.calculateSizeOfContent();
-
-                                readdresolves();
-
-                                this.autoHeightTextBox();
-                                me.hookTextBox();
-
-                                me.autoScrollToEditButtons();
-                                this.setFocusToTextBox();
                             } else if (btn.hasClass('btn-reply', false)) {
-                                if (showReplyBox) {
+                                if (true) {
                                     this.clearTextBoxBind();
 
                                     me.fireEvent('comment:addReply', [commentId, this.getActiveTextBoxVal()]);
@@ -412,10 +407,7 @@ define([
                                     readdresolves();
                                 }
                             } else if (btn.hasClass('btn-close', false)) {
-                                me.fireEvent('comment:closeEditing', [commentId]);
+                                me.hideComments();
-                                me.calculateSizeOfContent();
-                                me.fireEvent('comment:show', [commentId]);
-
                                 readdresolves();
 
                             } else if (btn.hasClass('btn-inner-edit', false)) {
@@ -447,9 +439,11 @@ define([
                                     me.calculateSizeOfContent();
                                 }
 
+                                record.set('showReplyInPopover', true);
                                 readdresolves();
 
                             } else if (btn.hasClass('btn-inner-close', false)) {
+
                                 if (record.get('dummy')) {
                                     me.clearDummyText();
                                     me.hide();
@@ -474,6 +468,7 @@ define([
                                 me.setLeftTop(me.arrowPosX, me.arrowPosY, me.leftX);
                                 me.calculateSizeOfContent();
 
+                                record.set('showReplyInPopover', true);
                                 readdresolves();
 
                             } else if (btn.hasClass('btn-resolve')) {
@@ -506,7 +501,7 @@ define([
                     });
 
                     me.on({
-                        'show': function () {
+                        'show': function (picker, item, record, e) {
                             me.commentsView.autoHeightTextBox();
                             me.$window.find('textarea').keydown(function (event) {
                                 if (event.keyCode == Common.UI.Keys.ESC) {
@@ -516,8 +511,9 @@ define([
                         },
                         'animate:before': function () {
                             var text = me.$window.find('textarea');
-                            if (text && text.length)
+                            if (text && text.length && !$(text).parent().hasClass('reply-ct')){
-                                text.focus();
+                                me.commentsView.setFocusToTextBox();
+                            }
                         }
                     });
                 }

apps/common/main/resources/less/comments.less

@@ -129,7 +129,7 @@
 
     textarea {
         width: 100%;
-        height: 55px;
+        height: 21px;
         resize: none;
         margin-bottom: 5px;
         border: @scaled-one-px-value-ie solid @border-regular-control-ie;