Merge pull request #2046 from ONLYOFFICE/feature/comment-popover-sse

Feature/comment popover sse

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

@@ -74,6 +74,7 @@ define([
         subEditStrings : {},
         filter : undefined,
         hintmode : false,
+        fullInfoHintMode: false,
         viewmode: false,
         isSelectedComment : false,
         uids : [],
@@ -186,6 +187,7 @@ define([
                 this.currentUserId      =   data.config.user.id;
                 this.sdkViewName        =   data['sdkviewname'] || this.sdkViewName;
                 this.hintmode           =   data['hintmode'] || false;
+                this.fullInfoHintMode   =   data['fullInfoHintMode'] || false;
                 this.viewmode           =   data['viewmode'] || false;
             }
         },
@@ -966,11 +968,11 @@ define([
 
                     if (!comment) continue;
 
-                    if (this.subEditStrings[saveTxtId] && !hint) {
+                    if (this.subEditStrings[saveTxtId] && (comment.get('fullInfoInHint') || !hint)) {
                         comment.set('editTextInPopover', true);
                         text = this.subEditStrings[saveTxtId];
                     }
-                    else if (this.subEditStrings[saveTxtReplyId] && !hint) {
+                    else if (this.subEditStrings[saveTxtReplyId] && (comment.get('fullInfoInHint') || !hint)) {
                         comment.set('showReplyInPopover', true);
                         text = this.subEditStrings[saveTxtReplyId];
                     }
@@ -978,13 +980,16 @@ define([
                     comment.set('hint', !_.isUndefined(hint) ? hint : false);
 
                     if (!hint && this.hintmode) {
-                        if (same_uids && (this.uids.length === 0))
+                        if (same_uids)
                             animate = false;
 
                         if (this.oldUids.length && (0 === _.difference(this.oldUids, uids).length) && (0 === _.difference(uids, this.oldUids).length)) {
                             animate = false;
                             this.oldUids = [];
                         }
+
+                        if (same_uids && !apihint && !this.isModeChanged)
+                            this.api.asc_selectComment(comment.get('uid'));
                     }
 
                     if (this.animate) {
@@ -1006,7 +1011,7 @@ define([
                 this.popoverComments.reset(comments);
 
                 if (this.popoverComments.findWhere({hide: false})) {
-                    if (popover.isVisible()) {
+                    if (popover.isVisible() && (!same_uids || this.isModeChanged)) {
                         popover.hide();
                     }
 
@@ -1355,6 +1360,7 @@ define([
                 removable           : (this.mode.canDeleteComments || (data.asc_getUserId() == this.currentUserId)) && AscCommon.UserInfoParser.canDeleteComment(data.asc_getUserName()),
                 hide                : !AscCommon.UserInfoParser.canViewComment(data.asc_getUserName()),
                 hint                : !this.mode.canComments,
+                fullInfoInHint      : this.fullInfoHintMode,
                 groupName           : (groupname && groupname.length>1) ? groupname[1] : null
             });
             if (comment) {

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

@@ -82,6 +82,7 @@ define([
             hide                : false,
             filtered            : false,
             hint                : false,
+            fullInfoInHint      : false,
             dummy               : undefined,
             editable            : true,
             removable           : true

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

@@ -7,11 +7,11 @@
         <div class="color" style="display: inline-block; background-color: <% if (usercolor!==null) { %><%=usercolor%><% } else { %> #cfcfcf <% } %>; " ></div><%= scope.getEncodedName(parsedName) %>
     </div>
     <div class="user-date"><%=date%></div>
-    <% if (!editTextInPopover || hint || scope.viewmode) { %>
+    <% if (!editTextInPopover || (hint && !fullInfoInHint) || scope.viewmode) { %>
         <div oo_editor_input="true" tabindex="-1" class="user-message user-select"><%=scope.pickLink(comment)%></div>
     <% } else { %>
         <div class="inner-edit-ct">
-            <textarea class="msg-reply user-select" maxlength="maxCommLength" spellcheck="false" <% if (!!dummy) { %> placeholder="textMention"<% } %>><%=comment%></textarea>
+            <textarea class="msg-reply user-select" maxlength="maxCommLength" spellcheck="false" <% if (!!dummy) { %> placeholder="textMentionComment"<% } %>><%=comment%></textarea>
             <% if (hideAddReply) { %>
                 <button class="btn normal dlg-btn primary btn-inner-edit" id="id-comments-change-popover">textAdd</button>
             <% } else { %>
@@ -37,7 +37,7 @@
                 <div class="user-date"><%=item.get("date")%></div>
                 <% if (!item.get("editTextInPopover")) { %>
                     <div oo_editor_input="true" tabindex="-1" class="user-message user-select"><%=scope.pickLink(item.get("reply"))%></div>
-                    <% if (!hint && !scope.viewmode) { %>
+                    <% if ((fullInfoInHint || !hint) && !scope.viewmode) { %>
                         <div class="btns-reply-ct">
                             <% if (item.get("editable")) { %>
                                 <div class="btn-edit img-commonctrl" data-value="<%=item.get("id")%>"></div>
@@ -61,7 +61,7 @@
 
     <!-- add reply button -->
 
-    <% if (!showReplyInPopover && !hideAddReply && !hint && !scope.viewmode) { %>
+    <% if (!showReplyInPopover && !hideAddReply && (fullInfoInHint || !hint) && !scope.viewmode) { %>
         <% if (replys.length && !add_arrow) { %>
             <label class="user-reply" style="margin-left: 20px; margin-top: 5px;" role="presentation" tabindex="-1">textAddReply</label>
         <% } else { %>
@@ -73,7 +73,7 @@
 
     <% if (!editTextInPopover && !lock) { %>
         <div class="edit-ct">
-            <% if (!hint && !scope.viewmode) { %>
+            <% if ((fullInfoInHint || !hint) && !scope.viewmode) { %>
                 <% if (editable) { %>
                     <div class="btn-edit img-commonctrl"></div>
                 <% } %>
@@ -81,9 +81,9 @@
                     <div class="btn-delete img-commonctrl"></div>
                 <% } %>
             <% } %>
-            <% if (editable && !hint && !scope.viewmode) { %>
+            <% if (editable && (fullInfoInHint || !hint) && !scope.viewmode) { %>
                 <div class="btn-resolve <% if (resolved) print('comment-resolved') %>" data-toggle="tooltip"></div>
-            <% } else if (!hint && (!editable || scope.viewmode) && resolved) { %>
+            <% } else if ((fullInfoInHint || !hint) && (!editable || scope.viewmode) && resolved) { %>
                 <div class="icon-resolve i-comment-resolved" data-toggle="tooltip"></div>
             <% } %>
         </div>
@@ -93,7 +93,7 @@
 
     <% if (showReplyInPopover) { %>
         <div class="reply-ct">
-            <textarea class="msg-reply user-select" placeholder="textAddReply" maxlength="maxCommLength" spellcheck="false"></textarea>
+            <textarea class="msg-reply user-select" placeholder="textMentionReply" 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>

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

@@ -336,9 +336,24 @@ define([
             // text box setup autosize input text
 
             this.setupAutoSizingTextBox();
-            this.txtMessage.bind('input propertychange',  _.bind(this.updateHeightTextBox, this));
+            this.disableTextBoxButton($(this.txtMessage));
+            this.txtMessage.bind('input propertychange',  _.bind(this.onTextareaInput, this));
         },
+        onTextareaInput: function(event) {
+            this.updateHeightTextBox(event);
+            this.disableTextBoxButton($(event.target));
+        },
+        disableTextBoxButton: function(textboxEl) {
+            var button = $(textboxEl.siblings('#chat-msg-btn-add')[0]);
 
+            if(textboxEl.val().trim().length > 0) {
+                button.removeAttr('disabled');
+                button.removeClass('disabled');
+            } else {
+                button.attr('disabled', true);
+                button.addClass('disabled');
+            }
+        },
         updateLayout: function (applyUsersAutoSizig) {
             var me = this;
             var height = this.panelBox.height();

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

@@ -98,6 +98,17 @@ define([
                 var text = $(this.el).find('textarea');
                 return (text && text.length) ? text.val().trim() : '';
             },
+            disableTextBoxButton: function(textboxEl) {
+                var button = $(textboxEl.siblings('#id-comments-change')[0]);
+
+                if(textboxEl.val().trime().length > 0) {
+                    button.removeAttr('disabled');
+                    button.removeClass('disabled');
+                } else {
+                    button.attr('disabled', true);
+                    button.addClass('disabled');
+                }
+            },
             autoHeightTextBox: function () {
                 var view = this,
                     textBox = $(this.el).find('textarea'),
@@ -127,13 +138,19 @@ define([
                     view.autoScrollToEditButtons();
                 }
 
+                function onTextareaInput(event) {
+                    updateTextBoxHeight();
+                    view.disableTextBoxButton($(event.target));
+                }
+
                 if (textBox && textBox.length) {
                     domTextBox = textBox.get(0);
 
+                    view.disableTextBoxButton(textBox);
                     if (domTextBox) {
                         lineHeight = parseInt(textBox.css('lineHeight'), 10) * 0.25;
                         updateTextBoxHeight();
-                        textBox.bind('input propertychange', updateTextBoxHeight)
+                        textBox.bind('input propertychange', onTextareaInput)
                     }
                 }
 
@@ -171,7 +188,7 @@ define([
 
         addCommentHeight: 45,
         newCommentHeight: 110,
-        textBoxAutoSizeLocked: undefined, // disable autosize textbox
+        textBoxAutoSizeLocked: undefined, // disable autoHeightTextBoxsize textbox
         viewmode: false,
 
         _commentsViewOnItemClick: function (picker, item, record, e) {
@@ -694,7 +711,17 @@ define([
                 this.layout.setResizeValue(0, container.height() - this.addCommentHeight);
             }
         },
+        disableTextBoxButton: function(textboxEl) {
+            var button = $(textboxEl.parent().siblings('.add')[0]);
 
+            if(textboxEl.val().trim().length > 0) {
+                button.removeAttr('disabled');
+                button.removeClass('disabled');
+            } else {
+                button.attr('disabled', true);
+                button.addClass('disabled');
+            }
+        },
         autoHeightTextBox: function () {
             var me = this, domTextBox = null, lineHeight = 0, minHeight = 44;
             var textBox = $('#comment-msg-new', this.el);
@@ -736,9 +763,15 @@ define([
                         Math.min(height - contentHeight - textBoxMinHeightIndent, height - me.newCommentHeight)));
             }
 
+            function onTextareaInput(event) {
+                updateTextBoxHeight();
+                me.disableTextBoxButton($(event.target));
+            }
+
+            me.disableTextBoxButton(textBox);
             lineHeight = parseInt(textBox.css('lineHeight'), 10) * 0.25;
             updateTextBoxHeight();
-            textBox.bind('input propertychange', updateTextBoxHeight);
+            textBox.bind('input propertychange', onTextareaInput);
 
             this.textBox = textBox;
         },

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

@@ -173,6 +173,17 @@ define([
                         var text = $(this.el).find('textarea');
                         return (text && text.length) ? text.val().trim() : '';
                     },
+                    disableTextBoxButton: function(textboxEl) {
+                        var button = $(textboxEl.siblings('#id-comments-change-popover')[0]);
+
+                        if(textboxEl.val().trim().length > 0) {
+                            button.removeAttr('disabled');
+                            button.removeClass('disabled');
+                        } else {
+                            button.attr('disabled', true);
+                            button.addClass('disabled');
+                        }
+                    },
                     autoHeightTextBox: function () {
                         var view = this,
                             textBox = this.$el.find('textarea'),
@@ -183,6 +194,7 @@ define([
                             oldHeight = 0,
                             newHeight = 0;
 
+
                         function updateTextBoxHeight() {
                             scrollPos = parentView.scroller.getScrollTop();
                             if (domTextBox.scrollHeight > domTextBox.clientHeight) {
@@ -211,13 +223,20 @@ define([
                             parentView.autoScrollToEditButtons();
                         }
 
+                        function onTextareaInput(event) {
+                            updateTextBoxHeight();
+                            view.disableTextBoxButton($(event.target));
+                        }
+
+
                         if (textBox && textBox.length && parentView.scroller) {
                             domTextBox = textBox.get(0);
 
+                            view.disableTextBoxButton(textBox);
                             if (domTextBox) {
                                 lineHeight = parseInt(textBox.css('lineHeight'), 10) * 0.25;
                                 updateTextBoxHeight();
-                                textBox.bind('input propertychange', updateTextBoxHeight)
+                                textBox.bind('input propertychange', onTextareaInput)
                             }
                         }
 
@@ -240,13 +259,14 @@ define([
                         el: $('#id-comments-popover'),
                         itemTemplate: _.template(replaceWords(commentsTemplate, {
                                 textAddReply: me.textAddReply,
+                                textMentionReply: me.canRequestSendNotify ? (me.mentionShare ? me.textMention : me.textMentionNotify) : me.textAddReply,
                                 textAdd: me.textAdd,
                                 textCancel: me.textCancel,
                                 textEdit: me.textEdit,
                                 textReply: me.textReply,
                                 textClose: me.textClose,
                                 maxCommLength: Asc.c_oAscMaxCellOrCommentLength,
-                                textMention: me.canRequestSendNotify ? (me.mentionShare ? me.textMention : me.textMentionNotify) : ''
+                                textMentionComment: me.canRequestSendNotify ? (me.mentionShare ? me.textMention : me.textMentionNotify) : me.textEnterComment
                             })
                         )
                     });
@@ -321,6 +341,8 @@ define([
 
                             if (record.get('hint')) {
                                 me.fireEvent('comment:disableHint', [record]);
+
+                                if(!record.get('fullInfoInHint'))
                                     return;
                             }
 
@@ -516,8 +538,10 @@ define([
                         },
                         'animate:before': function () {
                             var text = me.$window.find('textarea');
-                            if (text && text.length)
+                            if (text && text.length){
                                 text.focus();
+                                me.commentsView.disableTextBoxButton(text);
+                            }
                         }
                     });
                 }
@@ -1292,6 +1316,7 @@ define([
         textFollowMove          : 'Follow Move',
         textMention             : '+mention will provide access to the document and send an email',
         textMentionNotify       : '+mention will notify the user via email',
+        textEnterComment        : 'Enter your comment here',
         textViewResolved        : 'You have not permission for reopen comment',
         txtAccept: 'Accept',
         txtReject: 'Reject',

apps/documenteditor/main/locale/en.json

@@ -615,6 +615,7 @@
   "Common.Views.ReviewPopover.textFollowMove": "Follow Move",
   "Common.Views.ReviewPopover.textMention": "+mention will provide access to the document and send an email",
   "Common.Views.ReviewPopover.textMentionNotify": "+mention will notify the user via email",
+  "Common.Views.ReviewPopover.textEnterComment": "Enter your comment here",
   "Common.Views.ReviewPopover.textOpenAgain": "Open Again",
   "Common.Views.ReviewPopover.textReply": "Reply",
   "Common.Views.ReviewPopover.textResolve": "Resolve",

apps/documenteditor/main/locale/ru.json

@@ -615,6 +615,7 @@
   "Common.Views.ReviewPopover.textFollowMove": "Перейти на прежнее место",
   "Common.Views.ReviewPopover.textMention": "+упоминание предоставит доступ к документу и отправит оповещение по почте",
   "Common.Views.ReviewPopover.textMentionNotify": "+упоминание отправит пользователю оповещение по почте",
+  "Common.Views.ReviewPopover.textEnterComment": "Введите здесь свой комментарий",
   "Common.Views.ReviewPopover.textOpenAgain": "Открыть снова",
   "Common.Views.ReviewPopover.textReply": "Ответить",
   "Common.Views.ReviewPopover.textResolve": "Решить",

apps/presentationeditor/main/locale/en.json

@@ -704,6 +704,7 @@
   "Common.Views.ReviewPopover.textEdit": "OK",
   "Common.Views.ReviewPopover.textMention": "+mention will provide access to the document and send an email",
   "Common.Views.ReviewPopover.textMentionNotify": "+mention will notify the user via email",
+  "Common.Views.ReviewPopover.textEnterComment": "Enter your comment here",
   "Common.Views.ReviewPopover.textOpenAgain": "Open Again",
   "Common.Views.ReviewPopover.textReply": "Reply",
   "Common.Views.ReviewPopover.textResolve": "Resolve",

apps/presentationeditor/main/locale/ru.json

@@ -704,6 +704,7 @@
   "Common.Views.ReviewPopover.textEdit": "OK",
   "Common.Views.ReviewPopover.textMention": "+упоминание предоставит доступ к документу и отправит оповещение по почте",
   "Common.Views.ReviewPopover.textMentionNotify": "+упоминание отправит пользователю оповещение по почте",
+  "Common.Views.ReviewPopover.textEnterComment": "Введите здесь свой комментарий",
   "Common.Views.ReviewPopover.textOpenAgain": "Открыть снова",
   "Common.Views.ReviewPopover.textReply": "Ответить",
   "Common.Views.ReviewPopover.textResolve": "Решить",

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -1472,6 +1472,7 @@ define([
                     commentsController.setConfig({
                             config      : this.editorConfig,
                             sdkviewname : '#ws-canvas-outer',
+                            fullInfoHintMode : true,
                             hintmode    : true},
                         this.api);
                 }

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -2054,7 +2054,7 @@ define([
                     }
             };
             shortcuts['command+shift+=,ctrl+shift+=' + (Common.Utils.isGecko ? ',command+shift+ff=,ctrl+shift+ff=' : '')] = function(e) {
-                        if (me.editMode && !me.toolbar.btnAddCell.isDisabled()) {
+                        if (me.editMode && !me.toolbar.mode.isEditMailMerge && !me.toolbar.mode.isEditDiagram && !me.toolbar.mode.isEditOle && !me.toolbar.btnAddCell.isDisabled()) {
                             var cellinfo = me.api.asc_getCellInfo(),
                                 selectionType = cellinfo.asc_getSelectionType();
                             if (selectionType === Asc.c_oAscSelectionType.RangeRow || selectionType === Asc.c_oAscSelectionType.RangeCol) {
@@ -2085,7 +2085,7 @@ define([
                         return false;
                     };
             shortcuts['command+shift+-,ctrl+shift+-' + (Common.Utils.isGecko ? ',command+shift+ff-,ctrl+shift+ff-' : '')] = function(e) {
-                        if (me.editMode && !me.toolbar.btnDeleteCell.isDisabled()) {
+                        if (me.editMode && !me.toolbar.mode.isEditMailMerge && !me.toolbar.mode.isEditDiagram && !me.toolbar.mode.isEditOle && !me.toolbar.btnDeleteCell.isDisabled()) {
                             var cellinfo = me.api.asc_getCellInfo(),
                                 selectionType = cellinfo.asc_getSelectionType();
                             if (selectionType === Asc.c_oAscSelectionType.RangeRow || selectionType === Asc.c_oAscSelectionType.RangeCol) {

apps/spreadsheeteditor/main/locale/en.json

@@ -550,6 +550,7 @@
   "Common.Views.ReviewPopover.textEdit": "OK",
   "Common.Views.ReviewPopover.textMention": "+mention will provide access to the document and send an email",
   "Common.Views.ReviewPopover.textMentionNotify": "+mention will notify the user via email",
+  "Common.Views.ReviewPopover.textEnterComment": "Enter your comment here",
   "Common.Views.ReviewPopover.textOpenAgain": "Open Again",
   "Common.Views.ReviewPopover.textReply": "Reply",
   "Common.Views.ReviewPopover.textResolve": "Resolve",

apps/spreadsheeteditor/main/locale/ru.json

@@ -550,6 +550,7 @@
   "Common.Views.ReviewPopover.textEdit": "OK",
   "Common.Views.ReviewPopover.textMention": "+упоминание предоставит доступ к документу и отправит оповещение по почте",
   "Common.Views.ReviewPopover.textMentionNotify": "+упоминание отправит пользователю оповещение по почте",
+  "Common.Views.ReviewPopover.textEnterComment": "Введите здесь свой комментарий",
   "Common.Views.ReviewPopover.textOpenAgain": "Открыть снова",
   "Common.Views.ReviewPopover.textReply": "Ответить",
   "Common.Views.ReviewPopover.textResolve": "Решить",