[mobile] Comments (refactoring, moved comment editing)

apps/common/mobile/lib/controller/Collaboration.js

@@ -803,8 +803,7 @@ define([
             },
 
             updateViewComment: function() {
-                var appPrefix = !!window.DE ? DE : !!window.PE ? PE : SSE;
+                this.view.renderViewComments(this.showComments, this.indexCurrentComment);
-                appPrefix.getController('Common.Controllers.Collaboration').getView('Common.Views.Collaboration').renderViewComments(this.showComments, this.indexCurrentComment);
                 $('.comment-menu').single('click', _.bind(this.initMenuComments, this));
                 $('.reply-menu').single('click', _.bind(this.initReplyMenu, this));
                 $('.comment-resolve').single('click', _.bind(this.onClickResolveComment, this, false));
@@ -815,7 +814,6 @@ define([
 
             showCommentModal: function() {
                 var me = this,
-                    isAndroid = Framework7.prototype.device.android === true,
                     appPrefix = !!window.DE ? DE : !!window.PE ? PE : SSE,
                     mainView = appPrefix.getController('Editor').getView('Editor').f7View;
 
@@ -829,54 +827,17 @@ define([
                         '<div class="swipe-container">' +
                         '<div class="icon-swipe"></div>' +
                         '</div>' +
-                        '<div class="toolbar toolbar-bottom" style="bottom: 0;">' +
+                        me.view.getTemplateContainerViewComments() +
-                        '<div class="toolbar-inner">' +
-                        '<div class="button-left">' +
-                        (!me.view.viewmode ? '<a href="#" class="link add-reply">' + me.textAddReply + '</a>' : '') +
-                        '</div>' +
-                        '<div class="button-right">' +
-                        '<a href="#" class="link prev-comment"><i class="icon icon-prev-comment"></i></a>' +
-                        '<a href="#" class="link next-comment"><i class="icon icon-next-comment"></i></a>' +
-                        '</div>' +
-                        '</div>' +
-                        '</div>' +
-                        '<div class="pages">' +
-                        '<div class="page page-view-comments view-comment" data-page="comments-view">' +
-                        '<div class="page-content">' +
-                        '</div>' +
-                        '</div>' +
-                        '</div>' +
                         '</div>'
-                    )).on('opened', function () {
+                    )).on('close', function (e) {
-                        if (_.isFunction(me.api.asc_OnShowContextMenu)) {
-                            me.api.asc_OnShowContextMenu()
-                        }
-                    }).on('close', function (e) {
                         mainView.showNavbar();
-                    }).on('closed', function () {
-                        if (_.isFunction(me.api.asc_OnHideContextMenu)) {
-                            me.api.asc_OnHideContextMenu()
-                        }
                     });
                     mainView.hideNavbar();
                 } else {
                     me.modalViewComment = uiApp.popover(
                         '<div class="popover container-view-comment">' +
                         '<div class="popover-inner">' +
-                        '<div class="toolbar toolbar-bottom" style="bottom: 0;">' +
+                        me.view.getTemplateContainerViewComments() +
-                        '<div class="toolbar-inner">' +
-                        '<div class="button-left">' +
-                        (!me.view.viewmode ? '<a href="#" class="link add-reply">' + me.textAddReply + '</a>' : '') +
-                        '</div>' +
-                        '<div class="button-right">' +
-                        '<a href="#" class="link prev-comment"><i class="icon icon-prev-comment"></i></a>' +
-                        '<a href="#" class="link next-comment"><i class="icon icon-next-comment"></i></a>' +
-                        '</div>' +
-                        '</div>' +
-                        '</div>' +
-                        '<div class="view-comment page">' +
-                        '<div class="page-content"></div>' +
-                        '</div>' +
                         '</div>' +
                         '</div>',
                         $$('#toolbar-collaboration')
@@ -987,8 +948,8 @@ define([
                     } else {
                         this.indexCurrentComment -= 1;
                     }
+                    this.view.renderViewComments(this.showComments, this.indexCurrentComment);
                     var me = this;
-                    me.getView('Common.Views.Collaboration').renderViewComments(me.showComments, me.indexCurrentComment);
                     _.defer(function () {
                         $('.comment-menu').single('click', _.bind(me.initMenuComments, me));
                         $('.reply-menu').single('click', _.bind(me.initReplyMenu, me));
@@ -1004,8 +965,8 @@ define([
                     } else {
                         this.indexCurrentComment += 1;
                     }
+                    this.view.renderViewComments(this.showComments, this.indexCurrentComment);
                     var me = this;
-                    me.getView('Common.Views.Collaboration').renderViewComments(me.showComments, me.indexCurrentComment);
                     _.defer(function () {
                         $('.comment-menu').single('click', _.bind(me.initMenuComments, me));
                         $('.reply-menu').single('click', _.bind(me.initReplyMenu, me));
@@ -1016,14 +977,8 @@ define([
 
             onClickAddReply: function(id) {
                 var me = this;
-                var isAndroid = Framework7.prototype.device.android === true,
+                var phone = Common.SharedSettings.get('phone');
-                    phone = Common.SharedSettings.get('phone');
+                var idComment = !id ? $('.page-view-comments').find('.comment').data('uid') : id;
-                var idComment;
-                if (!id) {
-                    idComment = $('.view-comment').find('.comment').data('uid');
-                } else {
-                    idComment = id;
-                }
                 if (_.isNumber(idComment)) {
                     idComment = idComment.toString();
                 }
@@ -1031,32 +986,14 @@ define([
                 me.getCurrentUser();
                 var date = me.dateToLocaleTimeString(new Date());
                 if (comment) {
-                    var addReplyView;
                     if ($('.container-view-comment').length > 0) {
                         if (phone) {
-                            addReplyView = uiApp.popup(
+                            var colorUser = me.currentUser.asc_getColor(),
-                                '<div class="popup container-add-reply">' +
+                                name = me.currentUser.asc_getUserName(),
-                                '<div class="navbar">' +
+                                initialUser = me.getInitials(name);
-                                '<div class="navbar-inner">' +
+                            var templatePopup = me.getView('Common.Views.Collaboration').getTemplateAddReplyPopup(name, colorUser, initialUser, date);
-                                '<div class="left sliding"><a href="#" class="back link close-popup">' + (isAndroid ? '<i class="icon icon-close-comment"></i>' : '<span>' + me.textCancel + '</span>') + '</a></div>' +
+                            me.addReplyView = uiApp.popup(
-                                '<div class="center sliding">' + me.textAddReply + '</div>' +
+                                templatePopup
-                                '<div class="right sliding"><a href="#" class="link" id="add-new-reply">' + (isAndroid ? '<i class="icon icon-done-comment"></i>' : '<span>' + me.textDone + '</span>') + '</a></div>' +
-                                '</div>' +
-                                '</div>' +
-                                '<div class="pages">' +
-                                '<div class="page page-add-comment">' +
-                                '<div class="page-content">' +
-                                '<div class="wrap-reply">' +
-                                (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: ' + me.currentUser.asc_getColor() + ';">' + me.getInitials(me.currentUser.asc_getUserName()) + '</div><div>' : '') +
-                                '<div class="user-name">' + me.currentUser.asc_getUserName() + '</div>' +
-                                '<div class="comment-date">' + date + '</div>' +
-                                (isAndroid ? '</div></div>' : '') +
-                                '<div><textarea class="reply-textarea">' + '</textarea></div>' +
-                                '</div>' +
-                                '</div>' +
-                                '</div>' +
-                                '</div>' +
-                                '</div>'
                             );
                             $('.popup').css('z-index', '20000');
                         } else {
@@ -1067,7 +1004,7 @@ define([
                             template = _.template('<a href="#" class="link cancel-reply">' + me.textCancel + '</a>');
                             $('.container-view-comment .button-left').append(template);
                             template = _.template('<div class="block-reply"><textarea class="reply-textarea" autofocus placeholder="' + me.textAddReply + '"></textarea></div>');
-                            $('.view-comment .page-content').append(template);
+                            $('.page-view-comments .page-content').append(template);
                         }
                     } else if ($('.container-collaboration').length > 0) {
                         me.getView('Common.Views.Collaboration').showPage('#comments-add-reply-view', false);
@@ -1079,123 +1016,46 @@ define([
                         var $textarea = $('.reply-textarea')[0];
                         $textarea.focus();
                     });
-                    $('#add-new-reply').single('click', _.bind(function (uid) {
+                    $('#add-new-reply').single('click', _.bind(me.onDoneAddNewReply, me, comment.uid));
-                        var reply = $('.reply-textarea')[0].value;
+                    $('.cancel-reply').single('click', _.bind(me.onCancelAddNewReply, me));
-                        if ($('.container-view-comment').length > 0) {
+                }
-                            var $viewComment = $('.container-view-comment');
+            },
-                            if (reply && reply.length > 0) {
+
-                                this.addReply(uid, reply);
+            onDoneAddNewReply: function(uid) {
-                                this.updateViewComment(this.showComments, this.indexCurrentComment);
+                var phone = Common.SharedSettings.get('phone');
-                                if (!phone) {
+                var reply = $('.reply-textarea')[0].value;
-                                    $viewComment.find('a#add-new-reply, a.cancel-reply').remove();
+                if ($('.container-view-comment').length > 0) {
-                                    $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
+                    var $viewComment = $('.container-view-comment');
-                                } else {
+                    if (reply && reply.length > 0) {
-                                    uiApp.closeModal($$(addReplyView));
+                        this.addReply && this.addReply(uid, reply, _userId);
-                                }
+                        if (!phone) {
-                                this.disabledViewComments(false);
+                            $viewComment.find('a#add-new-reply, a.cancel-reply').remove();
+                            $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
+                            if ($('.block-reply').length > 0) {
+                                $('.block-reply').remove();
                             }
-                        } else if ($('.container-collaboration').length > 0) {
+                        } else {
-                            this.addReply(uid, reply);
+                            uiApp.closeModal($$(this.addReplyView));
-                            rootView.router.back();
                         }
-                    }, me, comment.uid));
-                    $('.cancel-reply').single('click', _.bind(function () {
-                        var $viewComment = $('.container-view-comment');
-                        if ($viewComment.find('.block-reply').length > 0) {
-                            $viewComment.find('.block-reply').remove();
-                        }
-                        $viewComment.find('a#add-new-reply, a.cancel-reply').css('display', 'none');
-                        $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
                         this.disabledViewComments(false);
-                    }, me));
-                }
-            },
-
-            addReply: function(id, replyVal) {
-                if (replyVal.length > 0) {
-                    var me = this,
-                        reply = null,
-                        addReply = null,
-                        ascComment = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)),
-                        comment = this.findComment(id);
-
-                    if (ascComment && comment) {
-
-                        ascComment.asc_putText(comment.comment);
-                        ascComment.asc_putQuoteText(comment.quote);
-                        ascComment.asc_putTime(me.utcDateToString(new Date(comment.time)));
-                        ascComment.asc_putOnlyOfficeTime(me.ooDateToString(new Date(comment.time)));
-                        ascComment.asc_putUserId(comment.userid);
-                        ascComment.asc_putUserName(comment.username);
-                        ascComment.asc_putSolved(comment.resolved);
-                        ascComment.asc_putGuid(comment.guid);
-
-                        if (!_.isUndefined(ascComment.asc_putDocumentFlag)) {
-                            ascComment.asc_putDocumentFlag(comment.unattached);
-                        }
-
-                        reply = comment.replys;
-                        if (reply && reply.length) {
-                            reply.forEach(function (reply) {
-
-                                addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
-                                if (addReply) {
-                                    addReply.asc_putText(reply.reply);
-                                    addReply.asc_putTime(me.utcDateToString(new Date(reply.time)));
-                                    addReply.asc_putOnlyOfficeTime(me.ooDateToString(new Date(reply.time)));
-                                    addReply.asc_putUserId(reply.userid);
-                                    addReply.asc_putUserName(reply.username);
-
-                                    ascComment.asc_addReply(addReply);
-                                }
-                            });
-                        }
-
-                        addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
-                        if (addReply) {
-                            addReply.asc_putText(replyVal);
-                            addReply.asc_putTime(me.utcDateToString(new Date()));
-                            addReply.asc_putOnlyOfficeTime(me.ooDateToString(new Date()));
-                            me.getCurrentUser();
-                            addReply.asc_putUserId(_userId);
-                            addReply.asc_putUserName(me.currentUser.asc_getUserName());
-
-                            ascComment.asc_addReply(addReply);
-
-                            me.api.asc_changeComment(id, ascComment);
-                        }
                     }
+                } else if ($('.container-collaboration').length > 0) {
+                    this.addReply && this.addReply(uid, reply, _userId);
+                    rootView.router.back();
                 }
             },
 
-            onAddNewComment: function(value, documentFlag) {
+            onCancelAddNewReply: function() {
-                var comment;
+                var $viewComment = $('.container-view-comment');
-                if (typeof Asc.asc_CCommentDataWord !== 'undefined') {
+                if ($viewComment.find('.block-reply').length > 0) {
-                    comment = new Asc.asc_CCommentDataWord(null);
+                    $viewComment.find('.block-reply').remove();
-                } else {
-                    comment = new Asc.asc_CCommentData(null);
                 }
+                $viewComment.find('a#add-new-reply, a.cancel-reply').css('display', 'none');
+                $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
+                this.disabledViewComments(false);
+            },
 
-                var textComment = value;
+            onAddNewComment: function() {
-
-                if (textComment.length > 0) {
-                    comment.asc_putText(textComment);
-                    comment.asc_putTime(this.utcDateToString(new Date()));
-                    comment.asc_putOnlyOfficeTime(this.ooDateToString(new Date()));
-                    comment.asc_putUserId(this.currentUser.asc_getIdOriginal());
-                    comment.asc_putUserName(this.currentUser.asc_getUserName());
-                    comment.asc_putSolved(false);
-
-                    if (!_.isUndefined(comment.asc_putDocumentFlag))
-                        comment.asc_putDocumentFlag(documentFlag);
-
-                    this.api.asc_addComment(comment);
-
-                    uiApp.closeModal();
-
-                    return true;
-                }
-                return false;
             },
 
             initMenuComments: function(e) {
@@ -1319,7 +1179,7 @@ define([
                         break;
                     case 'delete':
                         addOverlay();
-                        uiApp.modal({
+                        $$(uiApp.modal({
                             title: this.textDeleteComment,
                             text: this.textMessageDeleteComment,
                             buttons: [
@@ -1329,9 +1189,11 @@ define([
                                 {
                                     text: this.textYes,
                                     onClick: function () {
-                                        me.onDeleteComment(idComment);
+                                        me.onDeleteComment && me.onDeleteComment(idComment);
                                     }
                                 }]
+                        })).on('close', function () {
+                            addOverlay();
                         });
                         me.disabledViewComments(false);
                         break;
@@ -1341,7 +1203,22 @@ define([
                         break;
                     case 'deletereply':
                         addOverlay();
-                        me.onDeleteReply(idComment, indReply);
+                        $$(uiApp.modal({
+                            title: this.textDeleteReply,
+                            text: this.textMessageDeleteReply,
+                            buttons: [
+                                {
+                                    text: this.textCancel
+                                },
+                                {
+                                    text: this.textYes,
+                                    onClick: function () {
+                                        me.onDeleteReply && me.onDeleteReply(idComment, indReply);
+                                    }
+                                }]
+                        })).on('close', function () {
+                            addOverlay();
+                        });
                         me.disabledViewComments(false);
                         break;
                     case 'addreply':
@@ -1354,147 +1231,18 @@ define([
                 }
             },
 
-            onChangeComment: function(comment) {
-                if (this.api) {
-                    var ascComment,
-                        me = this;
-                    if (typeof Asc.asc_CCommentDataWord !== 'undefined') {
-                        ascComment = new Asc.asc_CCommentDataWord(null);
-                    } else {
-                        ascComment = new Asc.asc_CCommentData(null);
-                    }
-
-                    if (ascComment && comment) {
-                        var uid = comment.uid;
-                        ascComment.asc_putText(comment.comment);
-                        ascComment.asc_putQuoteText(comment.quote);
-                        ascComment.asc_putTime(me.utcDateToString(new Date(comment.time)));
-                        ascComment.asc_putOnlyOfficeTime(me.ooDateToString(new Date(comment.time)));
-                        ascComment.asc_putUserId(comment.userid);
-                        ascComment.asc_putUserName(comment.username);
-                        ascComment.asc_putSolved(!comment.resolved);
-                        ascComment.asc_putGuid(comment.guid);
-
-                        if (!_.isUndefined(ascComment.asc_putDocumentFlag)) {
-                            ascComment.asc_putDocumentFlag(comment.unattached);
-                        }
-
-                        var reply = comment.replys;
-                        if (reply && reply.length > 0) {
-                            reply.forEach(function (reply) {
-                                var addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
-                                if (addReply) {
-                                    addReply.asc_putText(reply.reply);
-                                    addReply.asc_putTime(me.utcDateToString(new Date(reply.time)));
-                                    addReply.asc_putOnlyOfficeTime(me.ooDateToString(new Date(reply.time)));
-                                    addReply.asc_putUserId(reply.userid);
-                                    addReply.asc_putUserName(reply.username);
-
-                                    ascComment.asc_addReply(addReply);
-                                }
-                            });
-                        }
-
-                        this.api.asc_changeComment(uid, ascComment);
-                        return true;
-                    }
-                }
-                return  false;
-            },
-
-            onDeleteComment: function(uid) {
-                var comment = this.findComment(uid);
-                if (this.api && comment) {
-                    this.api.asc_removeComment(uid);
-                    if ($('.container-view-comment').length > 0) {
-                        if (this.showComments.length === 0) {
-                            uiApp.closeModal();
-                        } else {
-                            this.indexCurrentComment = this.indexCurrentComment - 1 > -1 ? this.indexCurrentComment - 1 : 0;
-                            this.updateViewComment();
-                        }
-                    }
-                }
-            },
-
-            onDeleteReply: function(idComment, indReply) {
-                if (!_.isUndefined(idComment) && !_.isUndefined(indReply)) {
-                    var me = this,
-                        replies = null,
-                        addReply = null,
-                        ascComment = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)),
-                        comment = me.findComment(idComment);
-
-                    if (ascComment && comment) {
-                        var id = comment.uid;
-                        ascComment.asc_putText(comment.comment);
-                        ascComment.asc_putQuoteText(comment.quote);
-                        ascComment.asc_putTime(me.utcDateToString(new Date(comment.time)));
-                        ascComment.asc_putOnlyOfficeTime(me.ooDateToString(new Date(comment.time)));
-                        ascComment.asc_putUserId(comment.userid);
-                        ascComment.asc_putUserName(comment.username);
-                        ascComment.asc_putSolved(comment.resolved);
-                        ascComment.asc_putGuid(comment.guid);
-
-                        if (!_.isUndefined(ascComment.asc_putDocumentFlag)) {
-                            ascComment.asc_putDocumentFlag(comment.unattached);
-                        }
-
-                        replies = comment.replys;
-                        if (replies && replies.length) {
-                            replies.forEach(function (reply) {
-                                if (reply.ind !== indReply) {
-                                    addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
-                                    if (addReply) {
-                                        addReply.asc_putText(reply.reply);
-                                        addReply.asc_putTime(me.utcDateToString(new Date(reply.time)));
-                                        addReply.asc_putOnlyOfficeTime(me.ooDateToString(new Date(reply.time)));
-                                        addReply.asc_putUserId(reply.userid);
-                                        addReply.asc_putUserName(reply.username);
-
-                                        ascComment.asc_addReply(addReply);
-                                    }
-                                }
-                            });
-                        }
-
-                        me.api.asc_changeComment(id, ascComment);
-                        if($('.container-view-comment').length > 0) {
-                            me.updateViewComment();
-                        }
-                    }
-                }
-            },
-
             showEditComment: function(idComment) {
-                var me = this,
+                var me = this;
-                    isAndroid = Framework7.prototype.device.android === true;
                 if (idComment) {
                     var comment = this.findComment(idComment);
                     if ($('.container-view-comment').length > 0) {
                         if (Common.SharedSettings.get('phone')) {
                             me.editView = uiApp.popup(
-                                '<div class="popup container-edit-comment">' +
+                                me.view.getTemplateEditCommentPopup(comment)
-                                '<div class="navbar">' +
-                                '<div class="navbar-inner">' +
-                                '<div class="left sliding"><a href="#" class="back link close-popup">' + (isAndroid ? ' <i class="icon icon-close-comment"></i>' : '<span>' + me.textCancel + '</span>') + '</a></div>' +
-                                '<div class="center sliding">' + me.textEditComment + '</div>' +
-                                '<div class="right sliding"><a href="#" class="link" id="edit-comment">' + (isAndroid ? '<i class="icon icon-done-comment"></i>' : '<span>' + me.textDone + '</span>') + '</a></div>' +
-                                '</div>' +
-                                '</div>' +
-                                '<div class="page-edit-comment">' +
-                                '<div class="page-content">' +
-                                '<div class="wrap-comment">' +
-                                (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: ' + comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') +
-                                '<div class="user-name">' + comment.username + '</div>' +
-                                '<div class="comment-date">' + comment.date + '</div>' +
-                                (isAndroid ? '</div></div>' : '') +
-                                '<div><textarea id="comment-text" class="comment-textarea">' + comment.comment + '</textarea></div>' +
-                                '</div>' +
-                                '</div>' +
-                                '</div>' +
-                                '</div>'
                             );
+                            $$(me.editView).on('close', function(){
+                                me.disabledViewComments(false);
+                            });
                             $('.popup').css('z-index', '20000');
                             _.delay(function () {
                                 var $textarea = $('.comment-textarea')[0];
@@ -1524,74 +1272,62 @@ define([
                         $textarea.focus();
                         $textarea.selectionStart = $textarea.value.length;
                     });
-                    $('#edit-comment').single('click', _.bind(function (comment) {
+                    $('#edit-comment').single('click', _.bind(me.onEditComment, me, comment));
-                        var value = $('#comment-text')[0].value;
+                    $('.cancel-edit-comment').single('click', _.bind(me.onCancelEditComment, me));
-                        if (value && value.length > 0) {
+                }
-                            comment.comment = value;
+            },
-                            if (!this.onChangeComment(comment)) return;
+
-                            if ($('.container-view-comment').length > 0) {
+            onEditComment: function(comment) {
-                                this.showComments[this.indexCurrentComment] = comment;
+                var value = $('#comment-text')[0].value;
-                                if (Common.SharedSettings.get('phone')) {
+                if (value && value.length > 0) {
-                                    uiApp.closeModal($$(me.editView));
+                    if (!_.isUndefined(this.onChangeComment)) {
-                                } else {
+                        comment.comment = value;
-                                    var $viewComment = $('.container-view-comment');
+                        this.onChangeComment(comment);
-                                    $viewComment.find('a.done-edit-comment, a.cancel-edit-comment').remove();
+                    }
-                                    $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
+                    if ($('.container-view-comment').length > 0) {
-                                }
+                        if (Common.SharedSettings.get('phone')) {
-                                this.updateViewComment();
+                            uiApp.closeModal($$(this.editView));
-                                this.disabledViewComments(false);
+                        } else {
-                            } else if ($('.container-collaboration').length > 0) {
+                            var $viewComment = $('.container-view-comment');
-                                rootView.router.back();
+                            $viewComment.find('a.done-edit-comment, a.cancel-edit-comment').remove();
+                            $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
+                            if ($viewComment.find('.comment-textarea').length > 0) {
+                                $viewComment.find('.comment-textarea').remove();
+                                $viewComment.find('.comment-text span').css('display', 'block');
                             }
                         }
-                    }, me, comment));
-                    $('.cancel-edit-comment').single('click', _.bind(function () {
-                        var $viewComment = $('.container-view-comment');
-                        $viewComment.find('a.done-edit-comment, a.cancel-edit-comment, .comment-textarea').remove();
-                        $viewComment.find('.comment-text span').css('display', 'block');
-                        $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
                         this.disabledViewComments(false);
-                    }, me));
+                    } else if ($('.container-collaboration').length > 0) {
+                        rootView.router.back();
+                    }
                 }
             },
 
+            onCancelEditComment: function() {
+                var $viewComment = $('.container-view-comment');
+                $viewComment.find('a.done-edit-comment, a.cancel-edit-comment, .comment-textarea').remove();
+                $viewComment.find('.comment-text span').css('display', 'block');
+                $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
+                this.disabledViewComments(false);
+            },
+
             showEditReply: function(idComment, indReply) {
                 var me = this;
                 var comment = me.findComment(idComment);
                 if (comment) {
-                    var editView,
+                    var replies,
-                        replies,
                         reply;
-                    var isAndroid = Framework7.prototype.device.android === true;
                     replies = comment.replys;
                     reply = replies[indReply];
                     if (reply) {
                         if ($('.container-view-comment').length > 0) {
                             if (Common.SharedSettings.get('phone')) {
-                                editView = uiApp.popup(
+                                me.editReplyView = uiApp.popup(
-                                    '<div class="popup container-edit-comment">' +
+                                    me.view.getTemplateEditReplyPopup(reply)
-                                    '<div class="navbar">' +
-                                    '<div class="navbar-inner">' +
-                                    '<div class="left sliding"><a href="#" class="back link close-popup">' + (isAndroid ? '<i class="icon icon-close-comment"></i>' : '<span>' + me.textCancel + '</span>') + '</a></div>' +
-                                    '<div class="center sliding">' + me.textEditReply + '</div>' +
-                                    '<div class="right sliding"><a href="#" class="link" id="edit-reply">' + (isAndroid ? '<i class="icon icon-done-comment"></i>' : '<span>' + me.textDone + '</span>') + '</a></div>' +
-                                    '</div>' +
-                                    '</div>' +
-                                    '<div class="pages">' +
-                                    '<div class="page add-comment">' +
-                                    '<div class="page-content">' +
-                                    '<div class="wrap-comment">' +
-                                    (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: ' + reply.usercolor + ';">' + reply.userInitials + '</div><div>' : '') +
-                                    '<div class="user-name">' + reply.username + '</div>' +
-                                    '<div class="comment-date">' + reply.date + '</div>' +
-                                    (isAndroid ? '</div></div>' : '') +
-                                    '<div><textarea id="comment-text" class="edit-reply-textarea">' + reply.reply + '</textarea></div>' +
-                                    '</div>' +
-                                    '</div>' +
-                                    '</div>' +
-                                    '</div>' +
-                                    '</div>'
                                 );
+                                $$(me.editReplyView).on('close', function () {
+                                    me.disabledViewComments(false);
+                                });
                                 $('.popup').css('z-index', '20000');
                             } else {
                                 var $reply = $('.reply-item[data-ind=' + indReply + ']');
@@ -1614,37 +1350,49 @@ define([
                             $textarea.focus();
                             $textarea.selectionStart = $textarea.value.length;
                         });
-                        $('#edit-reply').single('click', _.bind(function (comment, indReply) {
+                        $('#edit-reply').single('click', _.bind(me.onEditReply, me, comment, indReply));
-                            var value = $('.edit-reply-textarea')[0].value;
+                        $('.cancel-reply').single('click', _.bind(me.onCancelEditReply, me));
-                            if (value && value.length > 0) {
-                                if ($('.container-view-comment').length > 0) {
-                                    comment.replys[indReply].reply = value;
-                                    this.onChangeComment(comment);
-                                    if (Common.SharedSettings.get('phone')) {
-                                        uiApp.closeModal($$(editView));
-                                    } else {
-                                        $viewComment.find('a#edit-reply, a.cancel-reply').remove();
-                                        $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
-                                    }
-                                    this.updateViewComment();
-                                } else {
-                                    comment.replys[indReply].reply = value;
-                                    this.onChangeComment(comment);
-                                    rootView.router.back();
-                                }
-                                this.disabledViewComments(false);
-                            }
-                        }, me, comment, indReply));
-                        $('.cancel-reply').single('click', _.bind(function () {
-                            $viewComment.find('a#edit-reply, a.cancel-reply, .edit-reply-textarea').remove();
-                            $reply.find('.reply-text').css('display', 'block');
-                            $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
-                            this.disabledViewComments(false);
-                        }, me));
                     }
                 }
             },
 
+            onEditReply: function(comment, indReply) {
+                var value = $('.edit-reply-textarea')[0].value;
+                if (value && value.length > 0) {
+                    if ($('.container-view-comment').length > 0) {
+                        if (!_.isUndefined(this.onChangeComment)) {
+                            comment.replys[indReply].reply = value;
+                            this.onChangeComment(comment);
+                        }
+                        if (Common.SharedSettings.get('phone')) {
+                            uiApp.closeModal($$(this.editReplyView));
+                        } else {
+                            var $viewComment = $('.container-view-comment');
+                            $viewComment.find('a#edit-reply, a.cancel-reply').remove();
+                            $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
+                            if ($viewComment.find('.edit-reply-textarea').length > 0) {
+                                $viewComment.find('.edit-reply-textarea').remove();
+                                $viewComment.find('.reply-text').css('display', 'block');
+                            }
+                        }
+                    } else {
+                        if (!_.isUndefined(this.onChangeComment)) {
+                            comment.replys[indReply].reply = value;
+                            this.onChangeComment(comment);
+                        }
+                        rootView.router.back();
+                    }
+                    this.disabledViewComments(false);
+                }
+            },
+
+            onCancelEditReply: function() {
+                $viewComment.find('a#edit-reply, a.cancel-reply, .edit-reply-textarea').remove();
+                $reply.find('.reply-text').css('display', 'block');
+                $viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
+                this.disabledViewComments(false);
+            },
+
             onClickResolveComment: function(uid, e) {
                 var idComment;
                 if (!uid) {
@@ -1658,57 +1406,10 @@ define([
                 }
                 var comment = this.findComment(idComment);
                 if (comment) {
-                    if (this.resolveComment(comment.uid)) {
+                    this.resolveComment && this.resolveComment(comment.uid);
-                        if ($('.container-view-comment').length > 0) {
-                            $('.comment[data-uid=' + idComment + '] .comment-resolve .icon-resolve-comment').toggleClass('check');
-                        }
-                    }
                 }
             },
 
-            resolveComment: function (uid) {
-                var me = this,
-                    reply = null,
-                    addReply = null,
-                    ascComment = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)),
-                    comment = me.findComment(uid);
-
-                if (ascComment && comment && me.api) {
-                    ascComment.asc_putText(comment.comment);
-                    ascComment.asc_putQuoteText(comment.quote);
-                    ascComment.asc_putTime(me.utcDateToString(new Date(comment.time)));
-                    ascComment.asc_putOnlyOfficeTime(me.ooDateToString(new Date(comment.time)));
-                    ascComment.asc_putUserId(comment.userid);
-                    ascComment.asc_putUserName(comment.username);
-                    ascComment.asc_putSolved(!comment.resolved);
-                    ascComment.asc_putGuid(comment.guid);
-
-                    if (!_.isUndefined(ascComment.asc_putDocumentFlag)) {
-                        ascComment.asc_putDocumentFlag(comment.unattached);
-                    }
-
-                    reply = comment.replys;
-                    if (reply && reply.length) {
-                        reply.forEach(function (reply) {
-                            addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
-                            if (addReply) {
-                                addReply.asc_putText(reply.reply);
-                                addReply.asc_putTime(me.utcDateToString(new Date(reply.time)));
-                                addReply.asc_putOnlyOfficeTime(me.ooDateToString(new Date(reply.time)));
-                                addReply.asc_putUserId(reply.userid);
-                                addReply.asc_putUserName(reply.username);
-
-                                ascComment.asc_addReply(addReply);
-                            }
-                        });
-                    }
-
-                    me.api.asc_changeComment(uid, ascComment);
-                    return true;
-                }
-                return false;
-            },
-
             // utils
             timeZoneOffsetInMs: (new Date()).getTimezoneOffset() * 60000,
             utcDateToString: function (date) {
@@ -1857,6 +1558,9 @@ define([
                             showComment = comment;
                         }
                     }
+                    if ($('.container-view-comment').length > 0) {
+                        this.updateViewComment();
+                    }
                 }
             },
 
@@ -2047,6 +1751,7 @@ define([
             textEditReply: 'Edit reply',
             textReopen: 'Reopen',
             textMessageDeleteComment: 'Do you really want to delete this comment?',
+            textMessageDeleteReply: 'Do you really want to delete this reply?',
             textYes: 'Yes'
 
         }

apps/common/mobile/lib/view/Collaboration.js

@@ -154,7 +154,7 @@ define([
             renderViewComments: function(comments, indCurComment) {
                 var isAndroid = Framework7.prototype.device.android === true;
                 var me = this;
-                if ($('.view-comment .page-content').length > 0) {
+                if ($('.page-view-comments .page-content').length > 0) {
                     var template = '';
                     if (comments && comments.length > 0) {
                         template = '<div class="list-block">' +
@@ -210,10 +210,10 @@ define([
                         template += '</div>' +
                             '</li>';
                         template += '</ul></div>';
-                        $('.view-comment .page-content').html(template);
+                        $('.page-view-comments .page-content').html(template);
                     }
                 }
-                Common.Utils.addScrollIfNeed('.view-comment.page', '.view-comment .page-content');
+                Common.Utils.addScrollIfNeed('.page-view-comments.page', '.page-view-comments .page-content');
             },
 
             renderComments: function (comments) {
@@ -326,6 +326,107 @@ define([
                 $pageEdit.html(_.template(template));
             },
 
+            //view comments
+            getTemplateAddReplyPopup: function(name, color, initial, date) {
+                var isAndroid = Framework7.prototype.device.android === true;
+                var template = '<div class="popup container-add-reply">' +
+                    '<div class="navbar">' +
+                    '<div class="navbar-inner">' +
+                    '<div class="left sliding"><a href="#" class="back link close-popup">' + (isAndroid ? '<i class="icon icon-close-comment"></i>' : '<span>' + this.textCancel + '</span>') + '</a></div>' +
+                    '<div class="center sliding">' + this.textAddReply + '</div>' +
+                    '<div class="right sliding"><a href="#" class="link" id="add-new-reply">' + (isAndroid ? '<i class="icon icon-done-comment"></i>' : '<span>' + this.textDone + '</span>') + '</a></div>' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="pages">' +
+                    '<div class="page page-add-comment">' +
+                    '<div class="page-content">' +
+                    '<div class="wrap-reply">' +
+                    (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: ' + color + ';">' + initial + '</div><div>' : '') +
+                    '<div class="user-name">' + name + '</div>' +
+                    '<div class="comment-date">' + date + '</div>' +
+                    (isAndroid ? '</div></div>' : '') +
+                    '<div><textarea class="reply-textarea">' + '</textarea></div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>';
+                return template;
+            },
+
+            getTemplateContainerViewComments: function() {
+                var template = '<div class="toolbar toolbar-bottom" style="bottom: 0;">' +
+                    '<div class="toolbar-inner">' +
+                    '<div class="button-left">' +
+                    (!this.viewmode ? '<a href="#" class="link add-reply">' + this.textAddReply + '</a>' : '') +
+                    '</div>' +
+                    '<div class="button-right">' +
+                    '<a href="#" class="link prev-comment"><i class="icon icon-prev-comment"></i></a>' +
+                    '<a href="#" class="link next-comment"><i class="icon icon-next-comment"></i></a>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="pages">' +
+                    '<div class="page page-view-comments" data-page="comments-view">' +
+                    '<div class="page-content">' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>';
+                return template;
+            },
+
+            getTemplateEditCommentPopup: function(comment) {
+                var isAndroid = Framework7.prototype.device.android === true;
+                var template = '<div class="popup container-edit-comment">' +
+                    '<div class="navbar">' +
+                    '<div class="navbar-inner">' +
+                    '<div class="left sliding"><a href="#" class="back link close-popup">' + (isAndroid ? ' <i class="icon icon-close-comment"></i>' : '<span>' + this.textCancel + '</span>') + '</a></div>' +
+                    '<div class="center sliding">' + this.textEditСomment + '</div>' +
+                    '<div class="right sliding"><a href="#" class="link" id="edit-comment">' + (isAndroid ? '<i class="icon icon-done-comment"></i>' : '<span>' + this.textDone + '</span>') + '</a></div>' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="page-edit-comment">' +
+                    '<div class="page-content">' +
+                    '<div class="wrap-comment">' +
+                    (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: ' + comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') +
+                    '<div class="user-name">' + comment.username + '</div>' +
+                    '<div class="comment-date">' + comment.date + '</div>' +
+                    (isAndroid ? '</div></div>' : '') +
+                    '<div><textarea id="comment-text" class="comment-textarea">' + comment.comment + '</textarea></div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>';
+                return template;
+            },
+
+            getTemplateEditReplyPopup: function(reply) {
+                var isAndroid = Framework7.prototype.device.android === true;
+                var template = '<div class="popup container-edit-comment">' +
+                    '<div class="navbar">' +
+                    '<div class="navbar-inner">' +
+                    '<div class="left sliding"><a href="#" class="back link close-popup">' + (isAndroid ? '<i class="icon icon-close-comment"></i>' : '<span>' + this.textCancel + '</span>') + '</a></div>' +
+                    '<div class="center sliding">' + this.textEditReply + '</div>' +
+                    '<div class="right sliding"><a href="#" class="link" id="edit-reply">' + (isAndroid ? '<i class="icon icon-done-comment"></i>' : '<span>' + this.textDone + '</span>') + '</a></div>' +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="pages">' +
+                    '<div class="page add-comment">' +
+                    '<div class="page-content">' +
+                    '<div class="wrap-comment">' +
+                    (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: ' + reply.usercolor + ';">' + reply.userInitials + '</div><div>' : '') +
+                    '<div class="user-name">' + reply.username + '</div>' +
+                    '<div class="comment-date">' + reply.date + '</div>' +
+                    (isAndroid ? '</div></div>' : '') +
+                    '<div><textarea id="comment-text" class="edit-reply-textarea">' + reply.reply + '</textarea></div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>';
+                return template;
+            },
+
             textCollaboration: 'Collaboration',
             textReviewing: 'Review',
             textСomments: 'Сomments',
@@ -343,7 +444,8 @@ define([
             textEditСomment: "Edit Comment",
             textDone: "Done",
             textAddReply: "Add Reply",
-            textEditReply: "Edit Reply"
+            textEditReply: "Edit Reply",
+            textCancel: 'Cancel'
         }
     })(), Common.Views.Collaboration || {}))
 });

apps/common/mobile/resources/less/ios/_collaboration.less

@@ -92,7 +92,7 @@
 }
 
 //Comments
-.page-comments, .add-comment, .page-view-comments, .container-edit-comment, .container-add-reply, .view-comment, .page-edit-comment, .page-add-reply, .page-edit-reply {
+.page-comments, .add-comment, .page-view-comments, .container-edit-comment, .container-add-reply, .page-edit-comment, .page-add-reply, .page-edit-reply {
   .header-comment {
     display: flex;
     justify-content: space-between;
@@ -215,7 +215,7 @@
   .pages {
     background-color: #FFFFFF;
   }
-  .page-view-comments, .view-comment {
+  .page-view-comments {
     background-color: #FFFFFF;
     .list-block {
       margin-bottom: 100px;
@@ -282,54 +282,60 @@
       }
     }
 
-    .page {
+    .pages {
-      border-radius: 13px;
+      position: absolute;
-      .page-content {
-        padding: 16px;
-        padding-bottom: 80px;
 
-        .list-block {
+      .page {
-          margin-bottom: 0px;
+        border-radius: 13px;
 
-          .item-content {
+        .page-content {
-            padding-left: 0;
+          padding: 16px;
+          padding-bottom: 80px;
 
-            .header-comment, .reply-item {
+          .list-block {
-              padding-right: 0;
+            margin-bottom: 0px;
+
+            .item-content {
+              padding-left: 0;
+
+              .header-comment, .reply-item {
+                padding-right: 0;
+              }
             }
           }
-        }
 
-        .block-reply {
+          .block-reply {
-          margin-top: 10px;
+            margin-top: 10px;
-          .reply-textarea {
+
-            min-height: 70px;
+            .reply-textarea {
-            width: 278px;
+              min-height: 70px;
+              width: 278px;
+              border: 1px solid #c4c4c4;
+              border-radius: 6px;
+              padding: 5px;
+            }
+          }
+
+          .edit-reply-textarea {
+            min-height: 60px;
+            width: 100%;
             border: 1px solid #c4c4c4;
             border-radius: 6px;
             padding: 5px;
+            height: 60px;
+            margin-top: 10px;
           }
-        }
 
-        .edit-reply-textarea {
+          .comment-text {
-          min-height: 60px;
+            padding-right: 0;
-          width: 100%;
-          border: 1px solid #c4c4c4;
-          border-radius: 6px;
-          padding: 5px;
-          height: 60px;
-          margin-top: 10px;
-        }
 
-        .comment-text {
+            .comment-textarea {
-          padding-right: 0;
+              border: 1px solid #c4c4c4;
-
+              border-radius: 6px;
-          .comment-textarea {
+              padding: 8px;
-            border: 1px solid #c4c4c4;
+              min-height: 80px;
-            border-radius: 6px;
+              height: 80px;
-            padding: 8px;
+            }
-            min-height: 80px;
-            height: 80px;
           }
         }
       }

apps/common/mobile/resources/less/material/_collaboration.less

@@ -90,7 +90,7 @@
 }
 
 //Comments
-.page-comments, .page-add-comment, .page-view-comments, .container-edit-comment, .container-add-reply, .view-comment, .page-edit-comment, .page-add-reply, .page-edit-reply {
+.page-comments, .page-add-comment, .page-view-comments, .container-edit-comment, .container-add-reply, .page-edit-comment, .page-add-reply, .page-edit-reply {
   .list-block {
     ul {
       &:before, &:after {
@@ -236,7 +236,7 @@
   border-top-right-radius: 4px;
   height: 50%;
   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
-  .page-view-comments, .view-comment {
+  .page-view-comments {
     background-color: #FFFFFF;
     .list-block {
       margin-bottom: 120px;
@@ -312,54 +312,60 @@
       }
     }
 
-    .page {
+    .pages {
-      border-radius: 13px;
+      position: absolute;
-      .page-content {
-        padding: 16px;
-        padding-bottom: 80px;
 
-        .list-block {
+      .page {
-          margin-bottom: 0px;
+        border-radius: 13px;
 
-          .item-content {
+        .page-content {
-            padding-left: 0;
+          padding: 16px;
+          padding-bottom: 80px;
 
-            .header-comment, .reply-item {
+          .list-block {
-              padding-right: 0;
+            margin-bottom: 0px;
+
+            .item-content {
+              padding-left: 0;
+
+              .header-comment, .reply-item {
+                padding-right: 0;
+              }
             }
           }
-        }
 
-        .block-reply {
+          .block-reply {
-          margin-top: 10px;
+            margin-top: 10px;
-          .reply-textarea {
+
-            min-height: 70px;
+            .reply-textarea {
-            width: 278px;
+              min-height: 70px;
+              width: 278px;
+              border: 1px solid #c4c4c4;
+              border-radius: 6px;
+              padding: 5px;
+            }
+          }
+
+          .edit-reply-textarea {
+            min-height: 60px;
+            width: 100%;
             border: 1px solid #c4c4c4;
             border-radius: 6px;
             padding: 5px;
+            height: 60px;
+            margin-top: 10px;
           }
-        }
 
-        .edit-reply-textarea {
+          .comment-text {
-          min-height: 60px;
+            padding-right: 0;
-          width: 100%;
-          border: 1px solid #c4c4c4;
-          border-radius: 6px;
-          padding: 5px;
-          height: 60px;
-          margin-top: 10px;
-        }
 
-        .comment-text {
+            .comment-textarea {
-          padding-right: 0;
+              border: 1px solid #c4c4c4;
-
+              border-radius: 6px;
-          .comment-textarea {
+              padding: 8px;
-            border: 1px solid #c4c4c4;
+              min-height: 80px;
-            border-radius: 6px;
+              height: 80px;
-            padding: 8px;
+            }
-            min-height: 80px;
-            height: 80px;
           }
         }
       }

apps/documenteditor/mobile/resources/css/app-ios.css

@@ -6487,7 +6487,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .header-comment,
 .container-edit-comment .header-comment,
 .container-add-reply .header-comment,
-.view-comment .header-comment,
 .page-edit-comment .header-comment,
 .page-add-reply .header-comment,
 .page-edit-reply .header-comment {
@@ -6500,7 +6499,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .header-comment .comment-right,
 .container-edit-comment .header-comment .comment-right,
 .container-add-reply .header-comment .comment-right,
-.view-comment .header-comment .comment-right,
 .page-edit-comment .header-comment .comment-right,
 .page-add-reply .header-comment .comment-right,
 .page-edit-reply .header-comment .comment-right {
@@ -6513,7 +6511,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .list-block .item-inner,
 .container-edit-comment .list-block .item-inner,
 .container-add-reply .list-block .item-inner,
-.view-comment .list-block .item-inner,
 .page-edit-comment .list-block .item-inner,
 .page-add-reply .list-block .item-inner,
 .page-edit-reply .list-block .item-inner {
@@ -6526,7 +6523,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments p,
 .container-edit-comment p,
 .container-add-reply p,
-.view-comment p,
 .page-edit-comment p,
 .page-add-reply p,
 .page-edit-reply p {
@@ -6538,7 +6534,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .list-reply,
 .container-edit-comment .list-reply,
 .container-add-reply .list-reply,
-.view-comment .list-reply,
 .page-edit-comment .list-reply,
 .page-add-reply .list-reply,
 .page-edit-reply .list-reply {
@@ -6549,7 +6544,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6558,7 +6552,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6567,7 +6560,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6578,7 +6570,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .user-name,
 .container-edit-comment .user-name,
 .container-add-reply .user-name,
-.view-comment .user-name,
 .page-edit-comment .user-name,
 .page-add-reply .user-name,
 .page-edit-reply .user-name {
@@ -6593,7 +6584,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-date,
 .container-edit-comment .comment-date,
 .container-add-reply .comment-date,
-.view-comment .comment-date,
 .page-edit-comment .comment-date,
 .page-add-reply .comment-date,
 .page-edit-reply .comment-date,
@@ -6602,7 +6592,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-date,
 .container-edit-comment .reply-date,
 .container-add-reply .reply-date,
-.view-comment .reply-date,
 .page-edit-comment .reply-date,
 .page-add-reply .reply-date,
 .page-edit-reply .reply-date {
@@ -6617,7 +6606,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-text,
 .container-edit-comment .comment-text,
 .container-add-reply .comment-text,
-.view-comment .comment-text,
 .page-edit-comment .comment-text,
 .page-add-reply .comment-text,
 .page-edit-reply .comment-text,
@@ -6626,7 +6614,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-text,
 .container-edit-comment .reply-text,
 .container-add-reply .reply-text,
-.view-comment .reply-text,
 .page-edit-comment .reply-text,
 .page-add-reply .reply-text,
 .page-edit-reply .reply-text {
@@ -6642,7 +6629,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item,
 .container-edit-comment .reply-item,
 .container-add-reply .reply-item,
-.view-comment .reply-item,
 .page-edit-comment .reply-item,
 .page-add-reply .reply-item,
 .page-edit-reply .reply-item {
@@ -6655,7 +6641,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item .header-reply,
 .container-edit-comment .reply-item .header-reply,
 .container-add-reply .reply-item .header-reply,
-.view-comment .reply-item .header-reply,
 .page-edit-comment .reply-item .header-reply,
 .page-add-reply .reply-item .header-reply,
 .page-edit-reply .reply-item .header-reply {
@@ -6667,7 +6652,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item .user-name,
 .container-edit-comment .reply-item .user-name,
 .container-add-reply .reply-item .user-name,
-.view-comment .reply-item .user-name,
 .page-edit-comment .reply-item .user-name,
 .page-add-reply .reply-item .user-name,
 .page-edit-reply .reply-item .user-name {
@@ -6678,7 +6662,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item:before,
 .container-edit-comment .reply-item:before,
 .container-add-reply .reply-item:before,
-.view-comment .reply-item:before,
 .page-edit-comment .reply-item:before,
 .page-add-reply .reply-item:before,
 .page-edit-reply .reply-item:before {
@@ -6701,7 +6684,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-quote,
 .container-edit-comment .comment-quote,
 .container-add-reply .comment-quote,
-.view-comment .comment-quote,
 .page-edit-comment .comment-quote,
 .page-add-reply .comment-quote,
 .page-edit-reply .comment-quote {
@@ -6716,7 +6698,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .wrap-comment,
 .container-edit-comment .wrap-comment,
 .container-add-reply .wrap-comment,
-.view-comment .wrap-comment,
 .page-edit-comment .wrap-comment,
 .page-add-reply .wrap-comment,
 .page-edit-reply .wrap-comment,
@@ -6725,7 +6706,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .wrap-reply,
 .container-edit-comment .wrap-reply,
 .container-add-reply .wrap-reply,
-.view-comment .wrap-reply,
 .page-edit-comment .wrap-reply,
 .page-add-reply .wrap-reply,
 .page-edit-reply .wrap-reply {
@@ -6736,7 +6716,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6745,7 +6724,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6754,7 +6732,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6790,22 +6767,17 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-view-comment .pages {
   background-color: #FFFFFF;
 }
-.container-view-comment .page-view-comments,
+.container-view-comment .page-view-comments {
-.container-view-comment .view-comment {
   background-color: #FFFFFF;
 }
-.container-view-comment .page-view-comments .list-block,
+.container-view-comment .page-view-comments .list-block {
-.container-view-comment .view-comment .list-block {
   margin-bottom: 100px;
 }
 .container-view-comment .page-view-comments .list-block ul:before,
-.container-view-comment .view-comment .list-block ul:before,
+.container-view-comment .page-view-comments .list-block ul:after {
-.container-view-comment .page-view-comments .list-block ul:after,
-.container-view-comment .view-comment .list-block ul:after {
   content: none;
 }
-.container-view-comment .page-view-comments .list-block .item-inner,
+.container-view-comment .page-view-comments .list-block .item-inner {
-.container-view-comment .view-comment .list-block .item-inner {
   padding: 0;
 }
 .container-view-comment .toolbar {
@@ -6861,34 +6833,37 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-view-comment.popover .toolbar .toolbar-inner {
   padding-right: 0;
 }
-.container-view-comment.popover .page {
+.container-view-comment.popover .pages {
+  position: absolute;
+}
+.container-view-comment.popover .pages .page {
   border-radius: 13px;
 }
-.container-view-comment.popover .page .page-content {
+.container-view-comment.popover .pages .page .page-content {
   padding: 16px;
   padding-bottom: 80px;
 }
-.container-view-comment.popover .page .page-content .list-block {
+.container-view-comment.popover .pages .page .page-content .list-block {
   margin-bottom: 0px;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content {
   padding-left: 0;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content .header-comment,
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .header-comment,
-.container-view-comment.popover .page .page-content .list-block .item-content .reply-item {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .reply-item {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .block-reply {
+.container-view-comment.popover .pages .page .page-content .block-reply {
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .block-reply .reply-textarea {
+.container-view-comment.popover .pages .page .page-content .block-reply .reply-textarea {
   min-height: 70px;
   width: 278px;
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 5px;
 }
-.container-view-comment.popover .page .page-content .edit-reply-textarea {
+.container-view-comment.popover .pages .page .page-content .edit-reply-textarea {
   min-height: 60px;
   width: 100%;
   border: 1px solid #c4c4c4;
@@ -6897,10 +6872,10 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   height: 60px;
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .comment-text {
+.container-view-comment.popover .pages .page .page-content .comment-text {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .comment-text .comment-textarea {
+.container-view-comment.popover .pages .page .page-content .comment-text .comment-textarea {
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 8px;

apps/documenteditor/mobile/resources/css/app-material.css

@@ -6061,7 +6061,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block ul:before,
 .container-edit-comment .list-block ul:before,
 .container-add-reply .list-block ul:before,
-.view-comment .list-block ul:before,
 .page-edit-comment .list-block ul:before,
 .page-add-reply .list-block ul:before,
 .page-edit-reply .list-block ul:before,
@@ -6070,7 +6069,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block ul:after,
 .container-edit-comment .list-block ul:after,
 .container-add-reply .list-block ul:after,
-.view-comment .list-block ul:after,
 .page-edit-comment .list-block ul:after,
 .page-add-reply .list-block ul:after,
 .page-edit-reply .list-block ul:after {
@@ -6081,7 +6079,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block .item-inner,
 .container-edit-comment .list-block .item-inner,
 .container-add-reply .list-block .item-inner,
-.view-comment .list-block .item-inner,
 .page-edit-comment .list-block .item-inner,
 .page-add-reply .list-block .item-inner,
 .page-edit-reply .list-block .item-inner {
@@ -6094,7 +6091,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block .item-inner:after,
 .container-edit-comment .list-block .item-inner:after,
 .container-add-reply .list-block .item-inner:after,
-.view-comment .list-block .item-inner:after,
 .page-edit-comment .list-block .item-inner:after,
 .page-add-reply .list-block .item-inner:after,
 .page-edit-reply .list-block .item-inner:after {
@@ -6105,7 +6101,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments p,
 .container-edit-comment p,
 .container-add-reply p,
-.view-comment p,
 .page-edit-comment p,
 .page-add-reply p,
 .page-edit-reply p {
@@ -6117,7 +6112,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-reply,
 .container-edit-comment .list-reply,
 .container-add-reply .list-reply,
-.view-comment .list-reply,
 .page-edit-comment .list-reply,
 .page-add-reply .list-reply,
 .page-edit-reply .list-reply {
@@ -6128,7 +6122,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6137,7 +6130,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6146,7 +6138,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6157,7 +6148,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .user-name,
 .container-edit-comment .user-name,
 .container-add-reply .user-name,
-.view-comment .user-name,
 .page-edit-comment .user-name,
 .page-add-reply .user-name,
 .page-edit-reply .user-name {
@@ -6171,7 +6161,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-date,
 .container-edit-comment .comment-date,
 .container-add-reply .comment-date,
-.view-comment .comment-date,
 .page-edit-comment .comment-date,
 .page-add-reply .comment-date,
 .page-edit-reply .comment-date,
@@ -6180,7 +6169,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-date,
 .container-edit-comment .reply-date,
 .container-add-reply .reply-date,
-.view-comment .reply-date,
 .page-edit-comment .reply-date,
 .page-add-reply .reply-date,
 .page-edit-reply .reply-date {
@@ -6195,7 +6183,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-text,
 .container-edit-comment .comment-text,
 .container-add-reply .comment-text,
-.view-comment .comment-text,
 .page-edit-comment .comment-text,
 .page-add-reply .comment-text,
 .page-edit-reply .comment-text,
@@ -6204,7 +6191,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-text,
 .container-edit-comment .reply-text,
 .container-add-reply .reply-text,
-.view-comment .reply-text,
 .page-edit-comment .reply-text,
 .page-add-reply .reply-text,
 .page-edit-reply .reply-text {
@@ -6220,7 +6206,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-item,
 .container-edit-comment .reply-item,
 .container-add-reply .reply-item,
-.view-comment .reply-item,
 .page-edit-comment .reply-item,
 .page-add-reply .reply-item,
 .page-edit-reply .reply-item {
@@ -6232,7 +6217,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-item .header-reply,
 .container-edit-comment .reply-item .header-reply,
 .container-add-reply .reply-item .header-reply,
-.view-comment .reply-item .header-reply,
 .page-edit-comment .reply-item .header-reply,
 .page-add-reply .reply-item .header-reply,
 .page-edit-reply .reply-item .header-reply {
@@ -6244,7 +6228,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-item .user-name,
 .container-edit-comment .reply-item .user-name,
 .container-add-reply .reply-item .user-name,
-.view-comment .reply-item .user-name,
 .page-edit-comment .reply-item .user-name,
 .page-add-reply .reply-item .user-name,
 .page-edit-reply .reply-item .user-name {
@@ -6255,7 +6238,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-quote,
 .container-edit-comment .comment-quote,
 .container-add-reply .comment-quote,
-.view-comment .comment-quote,
 .page-edit-comment .comment-quote,
 .page-add-reply .comment-quote,
 .page-edit-reply .comment-quote {
@@ -6270,7 +6252,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .wrap-comment,
 .container-edit-comment .wrap-comment,
 .container-add-reply .wrap-comment,
-.view-comment .wrap-comment,
 .page-edit-comment .wrap-comment,
 .page-add-reply .wrap-comment,
 .page-edit-reply .wrap-comment,
@@ -6279,7 +6260,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .wrap-reply,
 .container-edit-comment .wrap-reply,
 .container-add-reply .wrap-reply,
-.view-comment .wrap-reply,
 .page-edit-comment .wrap-reply,
 .page-add-reply .wrap-reply,
 .page-edit-reply .wrap-reply {
@@ -6290,7 +6270,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6299,7 +6278,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6308,7 +6286,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6326,7 +6303,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment,
 .container-edit-comment .header-comment,
 .container-add-reply .header-comment,
-.view-comment .header-comment,
 .page-edit-comment .header-comment,
 .page-add-reply .header-comment,
 .page-edit-reply .header-comment {
@@ -6339,7 +6315,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment .comment-right,
 .container-edit-comment .header-comment .comment-right,
 .container-add-reply .header-comment .comment-right,
-.view-comment .header-comment .comment-right,
 .page-edit-comment .header-comment .comment-right,
 .page-add-reply .header-comment .comment-right,
 .page-edit-reply .header-comment .comment-right {
@@ -6352,7 +6327,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment .comment-left,
 .container-edit-comment .header-comment .comment-left,
 .container-add-reply .header-comment .comment-left,
-.view-comment .header-comment .comment-left,
 .page-edit-comment .header-comment .comment-left,
 .page-add-reply .header-comment .comment-left,
 .page-edit-reply .header-comment .comment-left {
@@ -6364,7 +6338,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment .initials-comment,
 .container-edit-comment .header-comment .initials-comment,
 .container-add-reply .header-comment .initials-comment,
-.view-comment .header-comment .initials-comment,
 .page-edit-comment .header-comment .initials-comment,
 .page-add-reply .header-comment .initials-comment,
 .page-edit-reply .header-comment .initials-comment {
@@ -6383,7 +6356,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-reply .reply-left,
 .container-edit-comment .header-reply .reply-left,
 .container-add-reply .header-reply .reply-left,
-.view-comment .header-reply .reply-left,
 .page-edit-comment .header-reply .reply-left,
 .page-add-reply .header-reply .reply-left,
 .page-edit-reply .header-reply .reply-left {
@@ -6396,7 +6368,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-reply .initials-reply,
 .container-edit-comment .header-reply .initials-reply,
 .container-add-reply .header-reply .initials-reply,
-.view-comment .header-reply .initials-reply,
 .page-edit-comment .header-reply .initials-reply,
 .page-add-reply .header-reply .initials-reply,
 .page-edit-reply .header-reply .initials-reply {
@@ -6429,22 +6400,17 @@ html.phone .document-menu .list-block .item-link {
   height: 50%;
   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
 }
-.container-view-comment .page-view-comments,
+.container-view-comment .page-view-comments {
-.container-view-comment .view-comment {
   background-color: #FFFFFF;
 }
-.container-view-comment .page-view-comments .list-block,
+.container-view-comment .page-view-comments .list-block {
-.container-view-comment .view-comment .list-block {
   margin-bottom: 120px;
 }
 .container-view-comment .page-view-comments .list-block ul:before,
-.container-view-comment .view-comment .list-block ul:before,
+.container-view-comment .page-view-comments .list-block ul:after {
-.container-view-comment .page-view-comments .list-block ul:after,
-.container-view-comment .view-comment .list-block ul:after {
   content: none;
 }
-.container-view-comment .page-view-comments .list-block .item-inner,
+.container-view-comment .page-view-comments .list-block .item-inner {
-.container-view-comment .view-comment .list-block .item-inner {
   padding: 0;
 }
 .container-view-comment .toolbar {
@@ -6507,34 +6473,37 @@ html.phone .document-menu .list-block .item-link {
 .container-view-comment.popover .toolbar .toolbar-inner {
   padding-right: 0;
 }
-.container-view-comment.popover .page {
+.container-view-comment.popover .pages {
+  position: absolute;
+}
+.container-view-comment.popover .pages .page {
   border-radius: 13px;
 }
-.container-view-comment.popover .page .page-content {
+.container-view-comment.popover .pages .page .page-content {
   padding: 16px;
   padding-bottom: 80px;
 }
-.container-view-comment.popover .page .page-content .list-block {
+.container-view-comment.popover .pages .page .page-content .list-block {
   margin-bottom: 0px;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content {
   padding-left: 0;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content .header-comment,
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .header-comment,
-.container-view-comment.popover .page .page-content .list-block .item-content .reply-item {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .reply-item {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .block-reply {
+.container-view-comment.popover .pages .page .page-content .block-reply {
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .block-reply .reply-textarea {
+.container-view-comment.popover .pages .page .page-content .block-reply .reply-textarea {
   min-height: 70px;
   width: 278px;
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 5px;
 }
-.container-view-comment.popover .page .page-content .edit-reply-textarea {
+.container-view-comment.popover .pages .page .page-content .edit-reply-textarea {
   min-height: 60px;
   width: 100%;
   border: 1px solid #c4c4c4;
@@ -6543,10 +6512,10 @@ html.phone .document-menu .list-block .item-link {
   height: 60px;
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .comment-text {
+.container-view-comment.popover .pages .page .page-content .comment-text {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .comment-text .comment-textarea {
+.container-view-comment.popover .pages .page .page-content .comment-text .comment-textarea {
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 8px;

apps/presentationeditor/mobile/resources/css/app-ios.css

@@ -6487,7 +6487,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .header-comment,
 .container-edit-comment .header-comment,
 .container-add-reply .header-comment,
-.view-comment .header-comment,
 .page-edit-comment .header-comment,
 .page-add-reply .header-comment,
 .page-edit-reply .header-comment {
@@ -6500,7 +6499,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .header-comment .comment-right,
 .container-edit-comment .header-comment .comment-right,
 .container-add-reply .header-comment .comment-right,
-.view-comment .header-comment .comment-right,
 .page-edit-comment .header-comment .comment-right,
 .page-add-reply .header-comment .comment-right,
 .page-edit-reply .header-comment .comment-right {
@@ -6513,7 +6511,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .list-block .item-inner,
 .container-edit-comment .list-block .item-inner,
 .container-add-reply .list-block .item-inner,
-.view-comment .list-block .item-inner,
 .page-edit-comment .list-block .item-inner,
 .page-add-reply .list-block .item-inner,
 .page-edit-reply .list-block .item-inner {
@@ -6526,7 +6523,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments p,
 .container-edit-comment p,
 .container-add-reply p,
-.view-comment p,
 .page-edit-comment p,
 .page-add-reply p,
 .page-edit-reply p {
@@ -6538,7 +6534,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .list-reply,
 .container-edit-comment .list-reply,
 .container-add-reply .list-reply,
-.view-comment .list-reply,
 .page-edit-comment .list-reply,
 .page-add-reply .list-reply,
 .page-edit-reply .list-reply {
@@ -6549,7 +6544,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6558,7 +6552,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6567,7 +6560,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6578,7 +6570,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .user-name,
 .container-edit-comment .user-name,
 .container-add-reply .user-name,
-.view-comment .user-name,
 .page-edit-comment .user-name,
 .page-add-reply .user-name,
 .page-edit-reply .user-name {
@@ -6593,7 +6584,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-date,
 .container-edit-comment .comment-date,
 .container-add-reply .comment-date,
-.view-comment .comment-date,
 .page-edit-comment .comment-date,
 .page-add-reply .comment-date,
 .page-edit-reply .comment-date,
@@ -6602,7 +6592,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-date,
 .container-edit-comment .reply-date,
 .container-add-reply .reply-date,
-.view-comment .reply-date,
 .page-edit-comment .reply-date,
 .page-add-reply .reply-date,
 .page-edit-reply .reply-date {
@@ -6617,7 +6606,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-text,
 .container-edit-comment .comment-text,
 .container-add-reply .comment-text,
-.view-comment .comment-text,
 .page-edit-comment .comment-text,
 .page-add-reply .comment-text,
 .page-edit-reply .comment-text,
@@ -6626,7 +6614,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-text,
 .container-edit-comment .reply-text,
 .container-add-reply .reply-text,
-.view-comment .reply-text,
 .page-edit-comment .reply-text,
 .page-add-reply .reply-text,
 .page-edit-reply .reply-text {
@@ -6642,7 +6629,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item,
 .container-edit-comment .reply-item,
 .container-add-reply .reply-item,
-.view-comment .reply-item,
 .page-edit-comment .reply-item,
 .page-add-reply .reply-item,
 .page-edit-reply .reply-item {
@@ -6655,7 +6641,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item .header-reply,
 .container-edit-comment .reply-item .header-reply,
 .container-add-reply .reply-item .header-reply,
-.view-comment .reply-item .header-reply,
 .page-edit-comment .reply-item .header-reply,
 .page-add-reply .reply-item .header-reply,
 .page-edit-reply .reply-item .header-reply {
@@ -6667,7 +6652,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item .user-name,
 .container-edit-comment .reply-item .user-name,
 .container-add-reply .reply-item .user-name,
-.view-comment .reply-item .user-name,
 .page-edit-comment .reply-item .user-name,
 .page-add-reply .reply-item .user-name,
 .page-edit-reply .reply-item .user-name {
@@ -6678,7 +6662,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item:before,
 .container-edit-comment .reply-item:before,
 .container-add-reply .reply-item:before,
-.view-comment .reply-item:before,
 .page-edit-comment .reply-item:before,
 .page-add-reply .reply-item:before,
 .page-edit-reply .reply-item:before {
@@ -6701,7 +6684,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-quote,
 .container-edit-comment .comment-quote,
 .container-add-reply .comment-quote,
-.view-comment .comment-quote,
 .page-edit-comment .comment-quote,
 .page-add-reply .comment-quote,
 .page-edit-reply .comment-quote {
@@ -6716,7 +6698,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .wrap-comment,
 .container-edit-comment .wrap-comment,
 .container-add-reply .wrap-comment,
-.view-comment .wrap-comment,
 .page-edit-comment .wrap-comment,
 .page-add-reply .wrap-comment,
 .page-edit-reply .wrap-comment,
@@ -6725,7 +6706,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .wrap-reply,
 .container-edit-comment .wrap-reply,
 .container-add-reply .wrap-reply,
-.view-comment .wrap-reply,
 .page-edit-comment .wrap-reply,
 .page-add-reply .wrap-reply,
 .page-edit-reply .wrap-reply {
@@ -6736,7 +6716,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6745,7 +6724,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6754,7 +6732,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6790,22 +6767,17 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-view-comment .pages {
   background-color: #FFFFFF;
 }
-.container-view-comment .page-view-comments,
+.container-view-comment .page-view-comments {
-.container-view-comment .view-comment {
   background-color: #FFFFFF;
 }
-.container-view-comment .page-view-comments .list-block,
+.container-view-comment .page-view-comments .list-block {
-.container-view-comment .view-comment .list-block {
   margin-bottom: 100px;
 }
 .container-view-comment .page-view-comments .list-block ul:before,
-.container-view-comment .view-comment .list-block ul:before,
+.container-view-comment .page-view-comments .list-block ul:after {
-.container-view-comment .page-view-comments .list-block ul:after,
-.container-view-comment .view-comment .list-block ul:after {
   content: none;
 }
-.container-view-comment .page-view-comments .list-block .item-inner,
+.container-view-comment .page-view-comments .list-block .item-inner {
-.container-view-comment .view-comment .list-block .item-inner {
   padding: 0;
 }
 .container-view-comment .toolbar {
@@ -6861,34 +6833,37 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-view-comment.popover .toolbar .toolbar-inner {
   padding-right: 0;
 }
-.container-view-comment.popover .page {
+.container-view-comment.popover .pages {
+  position: absolute;
+}
+.container-view-comment.popover .pages .page {
   border-radius: 13px;
 }
-.container-view-comment.popover .page .page-content {
+.container-view-comment.popover .pages .page .page-content {
   padding: 16px;
   padding-bottom: 80px;
 }
-.container-view-comment.popover .page .page-content .list-block {
+.container-view-comment.popover .pages .page .page-content .list-block {
   margin-bottom: 0px;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content {
   padding-left: 0;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content .header-comment,
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .header-comment,
-.container-view-comment.popover .page .page-content .list-block .item-content .reply-item {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .reply-item {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .block-reply {
+.container-view-comment.popover .pages .page .page-content .block-reply {
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .block-reply .reply-textarea {
+.container-view-comment.popover .pages .page .page-content .block-reply .reply-textarea {
   min-height: 70px;
   width: 278px;
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 5px;
 }
-.container-view-comment.popover .page .page-content .edit-reply-textarea {
+.container-view-comment.popover .pages .page .page-content .edit-reply-textarea {
   min-height: 60px;
   width: 100%;
   border: 1px solid #c4c4c4;
@@ -6897,10 +6872,10 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   height: 60px;
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .comment-text {
+.container-view-comment.popover .pages .page .page-content .comment-text {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .comment-text .comment-textarea {
+.container-view-comment.popover .pages .page .page-content .comment-text .comment-textarea {
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 8px;

apps/presentationeditor/mobile/resources/css/app-material.css

@@ -6061,7 +6061,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block ul:before,
 .container-edit-comment .list-block ul:before,
 .container-add-reply .list-block ul:before,
-.view-comment .list-block ul:before,
 .page-edit-comment .list-block ul:before,
 .page-add-reply .list-block ul:before,
 .page-edit-reply .list-block ul:before,
@@ -6070,7 +6069,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block ul:after,
 .container-edit-comment .list-block ul:after,
 .container-add-reply .list-block ul:after,
-.view-comment .list-block ul:after,
 .page-edit-comment .list-block ul:after,
 .page-add-reply .list-block ul:after,
 .page-edit-reply .list-block ul:after {
@@ -6081,7 +6079,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block .item-inner,
 .container-edit-comment .list-block .item-inner,
 .container-add-reply .list-block .item-inner,
-.view-comment .list-block .item-inner,
 .page-edit-comment .list-block .item-inner,
 .page-add-reply .list-block .item-inner,
 .page-edit-reply .list-block .item-inner {
@@ -6094,7 +6091,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block .item-inner:after,
 .container-edit-comment .list-block .item-inner:after,
 .container-add-reply .list-block .item-inner:after,
-.view-comment .list-block .item-inner:after,
 .page-edit-comment .list-block .item-inner:after,
 .page-add-reply .list-block .item-inner:after,
 .page-edit-reply .list-block .item-inner:after {
@@ -6105,7 +6101,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments p,
 .container-edit-comment p,
 .container-add-reply p,
-.view-comment p,
 .page-edit-comment p,
 .page-add-reply p,
 .page-edit-reply p {
@@ -6117,7 +6112,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-reply,
 .container-edit-comment .list-reply,
 .container-add-reply .list-reply,
-.view-comment .list-reply,
 .page-edit-comment .list-reply,
 .page-add-reply .list-reply,
 .page-edit-reply .list-reply {
@@ -6128,7 +6122,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6137,7 +6130,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6146,7 +6138,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6157,7 +6148,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .user-name,
 .container-edit-comment .user-name,
 .container-add-reply .user-name,
-.view-comment .user-name,
 .page-edit-comment .user-name,
 .page-add-reply .user-name,
 .page-edit-reply .user-name {
@@ -6171,7 +6161,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-date,
 .container-edit-comment .comment-date,
 .container-add-reply .comment-date,
-.view-comment .comment-date,
 .page-edit-comment .comment-date,
 .page-add-reply .comment-date,
 .page-edit-reply .comment-date,
@@ -6180,7 +6169,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-date,
 .container-edit-comment .reply-date,
 .container-add-reply .reply-date,
-.view-comment .reply-date,
 .page-edit-comment .reply-date,
 .page-add-reply .reply-date,
 .page-edit-reply .reply-date {
@@ -6195,7 +6183,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-text,
 .container-edit-comment .comment-text,
 .container-add-reply .comment-text,
-.view-comment .comment-text,
 .page-edit-comment .comment-text,
 .page-add-reply .comment-text,
 .page-edit-reply .comment-text,
@@ -6204,7 +6191,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-text,
 .container-edit-comment .reply-text,
 .container-add-reply .reply-text,
-.view-comment .reply-text,
 .page-edit-comment .reply-text,
 .page-add-reply .reply-text,
 .page-edit-reply .reply-text {
@@ -6220,7 +6206,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-item,
 .container-edit-comment .reply-item,
 .container-add-reply .reply-item,
-.view-comment .reply-item,
 .page-edit-comment .reply-item,
 .page-add-reply .reply-item,
 .page-edit-reply .reply-item {
@@ -6232,7 +6217,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-item .header-reply,
 .container-edit-comment .reply-item .header-reply,
 .container-add-reply .reply-item .header-reply,
-.view-comment .reply-item .header-reply,
 .page-edit-comment .reply-item .header-reply,
 .page-add-reply .reply-item .header-reply,
 .page-edit-reply .reply-item .header-reply {
@@ -6244,7 +6228,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-item .user-name,
 .container-edit-comment .reply-item .user-name,
 .container-add-reply .reply-item .user-name,
-.view-comment .reply-item .user-name,
 .page-edit-comment .reply-item .user-name,
 .page-add-reply .reply-item .user-name,
 .page-edit-reply .reply-item .user-name {
@@ -6255,7 +6238,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-quote,
 .container-edit-comment .comment-quote,
 .container-add-reply .comment-quote,
-.view-comment .comment-quote,
 .page-edit-comment .comment-quote,
 .page-add-reply .comment-quote,
 .page-edit-reply .comment-quote {
@@ -6270,7 +6252,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .wrap-comment,
 .container-edit-comment .wrap-comment,
 .container-add-reply .wrap-comment,
-.view-comment .wrap-comment,
 .page-edit-comment .wrap-comment,
 .page-add-reply .wrap-comment,
 .page-edit-reply .wrap-comment,
@@ -6279,7 +6260,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .wrap-reply,
 .container-edit-comment .wrap-reply,
 .container-add-reply .wrap-reply,
-.view-comment .wrap-reply,
 .page-edit-comment .wrap-reply,
 .page-add-reply .wrap-reply,
 .page-edit-reply .wrap-reply {
@@ -6290,7 +6270,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6299,7 +6278,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6308,7 +6286,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6326,7 +6303,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment,
 .container-edit-comment .header-comment,
 .container-add-reply .header-comment,
-.view-comment .header-comment,
 .page-edit-comment .header-comment,
 .page-add-reply .header-comment,
 .page-edit-reply .header-comment {
@@ -6339,7 +6315,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment .comment-right,
 .container-edit-comment .header-comment .comment-right,
 .container-add-reply .header-comment .comment-right,
-.view-comment .header-comment .comment-right,
 .page-edit-comment .header-comment .comment-right,
 .page-add-reply .header-comment .comment-right,
 .page-edit-reply .header-comment .comment-right {
@@ -6352,7 +6327,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment .comment-left,
 .container-edit-comment .header-comment .comment-left,
 .container-add-reply .header-comment .comment-left,
-.view-comment .header-comment .comment-left,
 .page-edit-comment .header-comment .comment-left,
 .page-add-reply .header-comment .comment-left,
 .page-edit-reply .header-comment .comment-left {
@@ -6364,7 +6338,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment .initials-comment,
 .container-edit-comment .header-comment .initials-comment,
 .container-add-reply .header-comment .initials-comment,
-.view-comment .header-comment .initials-comment,
 .page-edit-comment .header-comment .initials-comment,
 .page-add-reply .header-comment .initials-comment,
 .page-edit-reply .header-comment .initials-comment {
@@ -6383,7 +6356,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-reply .reply-left,
 .container-edit-comment .header-reply .reply-left,
 .container-add-reply .header-reply .reply-left,
-.view-comment .header-reply .reply-left,
 .page-edit-comment .header-reply .reply-left,
 .page-add-reply .header-reply .reply-left,
 .page-edit-reply .header-reply .reply-left {
@@ -6396,7 +6368,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-reply .initials-reply,
 .container-edit-comment .header-reply .initials-reply,
 .container-add-reply .header-reply .initials-reply,
-.view-comment .header-reply .initials-reply,
 .page-edit-comment .header-reply .initials-reply,
 .page-add-reply .header-reply .initials-reply,
 .page-edit-reply .header-reply .initials-reply {
@@ -6429,22 +6400,17 @@ html.phone .document-menu .list-block .item-link {
   height: 50%;
   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
 }
-.container-view-comment .page-view-comments,
+.container-view-comment .page-view-comments {
-.container-view-comment .view-comment {
   background-color: #FFFFFF;
 }
-.container-view-comment .page-view-comments .list-block,
+.container-view-comment .page-view-comments .list-block {
-.container-view-comment .view-comment .list-block {
   margin-bottom: 120px;
 }
 .container-view-comment .page-view-comments .list-block ul:before,
-.container-view-comment .view-comment .list-block ul:before,
+.container-view-comment .page-view-comments .list-block ul:after {
-.container-view-comment .page-view-comments .list-block ul:after,
-.container-view-comment .view-comment .list-block ul:after {
   content: none;
 }
-.container-view-comment .page-view-comments .list-block .item-inner,
+.container-view-comment .page-view-comments .list-block .item-inner {
-.container-view-comment .view-comment .list-block .item-inner {
   padding: 0;
 }
 .container-view-comment .toolbar {
@@ -6507,34 +6473,37 @@ html.phone .document-menu .list-block .item-link {
 .container-view-comment.popover .toolbar .toolbar-inner {
   padding-right: 0;
 }
-.container-view-comment.popover .page {
+.container-view-comment.popover .pages {
+  position: absolute;
+}
+.container-view-comment.popover .pages .page {
   border-radius: 13px;
 }
-.container-view-comment.popover .page .page-content {
+.container-view-comment.popover .pages .page .page-content {
   padding: 16px;
   padding-bottom: 80px;
 }
-.container-view-comment.popover .page .page-content .list-block {
+.container-view-comment.popover .pages .page .page-content .list-block {
   margin-bottom: 0px;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content {
   padding-left: 0;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content .header-comment,
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .header-comment,
-.container-view-comment.popover .page .page-content .list-block .item-content .reply-item {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .reply-item {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .block-reply {
+.container-view-comment.popover .pages .page .page-content .block-reply {
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .block-reply .reply-textarea {
+.container-view-comment.popover .pages .page .page-content .block-reply .reply-textarea {
   min-height: 70px;
   width: 278px;
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 5px;
 }
-.container-view-comment.popover .page .page-content .edit-reply-textarea {
+.container-view-comment.popover .pages .page .page-content .edit-reply-textarea {
   min-height: 60px;
   width: 100%;
   border: 1px solid #c4c4c4;
@@ -6543,10 +6512,10 @@ html.phone .document-menu .list-block .item-link {
   height: 60px;
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .comment-text {
+.container-view-comment.popover .pages .page .page-content .comment-text {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .comment-text .comment-textarea {
+.container-view-comment.popover .pages .page .page-content .comment-text .comment-textarea {
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 8px;

apps/spreadsheeteditor/mobile/resources/css/app-ios.css

@@ -6480,7 +6480,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .header-comment,
 .container-edit-comment .header-comment,
 .container-add-reply .header-comment,
-.view-comment .header-comment,
 .page-edit-comment .header-comment,
 .page-add-reply .header-comment,
 .page-edit-reply .header-comment {
@@ -6493,7 +6492,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .header-comment .comment-right,
 .container-edit-comment .header-comment .comment-right,
 .container-add-reply .header-comment .comment-right,
-.view-comment .header-comment .comment-right,
 .page-edit-comment .header-comment .comment-right,
 .page-add-reply .header-comment .comment-right,
 .page-edit-reply .header-comment .comment-right {
@@ -6506,7 +6504,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .list-block .item-inner,
 .container-edit-comment .list-block .item-inner,
 .container-add-reply .list-block .item-inner,
-.view-comment .list-block .item-inner,
 .page-edit-comment .list-block .item-inner,
 .page-add-reply .list-block .item-inner,
 .page-edit-reply .list-block .item-inner {
@@ -6519,7 +6516,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments p,
 .container-edit-comment p,
 .container-add-reply p,
-.view-comment p,
 .page-edit-comment p,
 .page-add-reply p,
 .page-edit-reply p {
@@ -6531,7 +6527,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .list-reply,
 .container-edit-comment .list-reply,
 .container-add-reply .list-reply,
-.view-comment .list-reply,
 .page-edit-comment .list-reply,
 .page-add-reply .list-reply,
 .page-edit-reply .list-reply {
@@ -6542,7 +6537,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6551,7 +6545,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6560,7 +6553,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6571,7 +6563,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .user-name,
 .container-edit-comment .user-name,
 .container-add-reply .user-name,
-.view-comment .user-name,
 .page-edit-comment .user-name,
 .page-add-reply .user-name,
 .page-edit-reply .user-name {
@@ -6586,7 +6577,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-date,
 .container-edit-comment .comment-date,
 .container-add-reply .comment-date,
-.view-comment .comment-date,
 .page-edit-comment .comment-date,
 .page-add-reply .comment-date,
 .page-edit-reply .comment-date,
@@ -6595,7 +6585,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-date,
 .container-edit-comment .reply-date,
 .container-add-reply .reply-date,
-.view-comment .reply-date,
 .page-edit-comment .reply-date,
 .page-add-reply .reply-date,
 .page-edit-reply .reply-date {
@@ -6610,7 +6599,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-text,
 .container-edit-comment .comment-text,
 .container-add-reply .comment-text,
-.view-comment .comment-text,
 .page-edit-comment .comment-text,
 .page-add-reply .comment-text,
 .page-edit-reply .comment-text,
@@ -6619,7 +6607,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-text,
 .container-edit-comment .reply-text,
 .container-add-reply .reply-text,
-.view-comment .reply-text,
 .page-edit-comment .reply-text,
 .page-add-reply .reply-text,
 .page-edit-reply .reply-text {
@@ -6635,7 +6622,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item,
 .container-edit-comment .reply-item,
 .container-add-reply .reply-item,
-.view-comment .reply-item,
 .page-edit-comment .reply-item,
 .page-add-reply .reply-item,
 .page-edit-reply .reply-item {
@@ -6648,7 +6634,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item .header-reply,
 .container-edit-comment .reply-item .header-reply,
 .container-add-reply .reply-item .header-reply,
-.view-comment .reply-item .header-reply,
 .page-edit-comment .reply-item .header-reply,
 .page-add-reply .reply-item .header-reply,
 .page-edit-reply .reply-item .header-reply {
@@ -6660,7 +6645,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item .user-name,
 .container-edit-comment .reply-item .user-name,
 .container-add-reply .reply-item .user-name,
-.view-comment .reply-item .user-name,
 .page-edit-comment .reply-item .user-name,
 .page-add-reply .reply-item .user-name,
 .page-edit-reply .reply-item .user-name {
@@ -6671,7 +6655,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-item:before,
 .container-edit-comment .reply-item:before,
 .container-add-reply .reply-item:before,
-.view-comment .reply-item:before,
 .page-edit-comment .reply-item:before,
 .page-add-reply .reply-item:before,
 .page-edit-reply .reply-item:before {
@@ -6694,7 +6677,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-quote,
 .container-edit-comment .comment-quote,
 .container-add-reply .comment-quote,
-.view-comment .comment-quote,
 .page-edit-comment .comment-quote,
 .page-add-reply .comment-quote,
 .page-edit-reply .comment-quote {
@@ -6709,7 +6691,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .wrap-comment,
 .container-edit-comment .wrap-comment,
 .container-add-reply .wrap-comment,
-.view-comment .wrap-comment,
 .page-edit-comment .wrap-comment,
 .page-add-reply .wrap-comment,
 .page-edit-reply .wrap-comment,
@@ -6718,7 +6699,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .wrap-reply,
 .container-edit-comment .wrap-reply,
 .container-add-reply .wrap-reply,
-.view-comment .wrap-reply,
 .page-edit-comment .wrap-reply,
 .page-add-reply .wrap-reply,
 .page-edit-reply .wrap-reply {
@@ -6729,7 +6709,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6738,7 +6717,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6747,7 +6725,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6783,22 +6760,17 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-view-comment .pages {
   background-color: #FFFFFF;
 }
-.container-view-comment .page-view-comments,
+.container-view-comment .page-view-comments {
-.container-view-comment .view-comment {
   background-color: #FFFFFF;
 }
-.container-view-comment .page-view-comments .list-block,
+.container-view-comment .page-view-comments .list-block {
-.container-view-comment .view-comment .list-block {
   margin-bottom: 100px;
 }
 .container-view-comment .page-view-comments .list-block ul:before,
-.container-view-comment .view-comment .list-block ul:before,
+.container-view-comment .page-view-comments .list-block ul:after {
-.container-view-comment .page-view-comments .list-block ul:after,
-.container-view-comment .view-comment .list-block ul:after {
   content: none;
 }
-.container-view-comment .page-view-comments .list-block .item-inner,
+.container-view-comment .page-view-comments .list-block .item-inner {
-.container-view-comment .view-comment .list-block .item-inner {
   padding: 0;
 }
 .container-view-comment .toolbar {
@@ -6854,34 +6826,37 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-view-comment.popover .toolbar .toolbar-inner {
   padding-right: 0;
 }
-.container-view-comment.popover .page {
+.container-view-comment.popover .pages {
+  position: absolute;
+}
+.container-view-comment.popover .pages .page {
   border-radius: 13px;
 }
-.container-view-comment.popover .page .page-content {
+.container-view-comment.popover .pages .page .page-content {
   padding: 16px;
   padding-bottom: 80px;
 }
-.container-view-comment.popover .page .page-content .list-block {
+.container-view-comment.popover .pages .page .page-content .list-block {
   margin-bottom: 0px;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content {
   padding-left: 0;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content .header-comment,
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .header-comment,
-.container-view-comment.popover .page .page-content .list-block .item-content .reply-item {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .reply-item {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .block-reply {
+.container-view-comment.popover .pages .page .page-content .block-reply {
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .block-reply .reply-textarea {
+.container-view-comment.popover .pages .page .page-content .block-reply .reply-textarea {
   min-height: 70px;
   width: 278px;
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 5px;
 }
-.container-view-comment.popover .page .page-content .edit-reply-textarea {
+.container-view-comment.popover .pages .page .page-content .edit-reply-textarea {
   min-height: 60px;
   width: 100%;
   border: 1px solid #c4c4c4;
@@ -6890,10 +6865,10 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   height: 60px;
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .comment-text {
+.container-view-comment.popover .pages .page .page-content .comment-text {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .comment-text .comment-textarea {
+.container-view-comment.popover .pages .page .page-content .comment-text .comment-textarea {
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 8px;

apps/spreadsheeteditor/mobile/resources/css/app-material.css

@@ -6071,7 +6071,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block ul:before,
 .container-edit-comment .list-block ul:before,
 .container-add-reply .list-block ul:before,
-.view-comment .list-block ul:before,
 .page-edit-comment .list-block ul:before,
 .page-add-reply .list-block ul:before,
 .page-edit-reply .list-block ul:before,
@@ -6080,7 +6079,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block ul:after,
 .container-edit-comment .list-block ul:after,
 .container-add-reply .list-block ul:after,
-.view-comment .list-block ul:after,
 .page-edit-comment .list-block ul:after,
 .page-add-reply .list-block ul:after,
 .page-edit-reply .list-block ul:after {
@@ -6091,7 +6089,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block .item-inner,
 .container-edit-comment .list-block .item-inner,
 .container-add-reply .list-block .item-inner,
-.view-comment .list-block .item-inner,
 .page-edit-comment .list-block .item-inner,
 .page-add-reply .list-block .item-inner,
 .page-edit-reply .list-block .item-inner {
@@ -6104,7 +6101,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-block .item-inner:after,
 .container-edit-comment .list-block .item-inner:after,
 .container-add-reply .list-block .item-inner:after,
-.view-comment .list-block .item-inner:after,
 .page-edit-comment .list-block .item-inner:after,
 .page-add-reply .list-block .item-inner:after,
 .page-edit-reply .list-block .item-inner:after {
@@ -6115,7 +6111,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments p,
 .container-edit-comment p,
 .container-add-reply p,
-.view-comment p,
 .page-edit-comment p,
 .page-add-reply p,
 .page-edit-reply p {
@@ -6127,7 +6122,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .list-reply,
 .container-edit-comment .list-reply,
 .container-add-reply .list-reply,
-.view-comment .list-reply,
 .page-edit-comment .list-reply,
 .page-add-reply .list-reply,
 .page-edit-reply .list-reply {
@@ -6138,7 +6132,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6147,7 +6140,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6156,7 +6148,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6167,7 +6158,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .user-name,
 .container-edit-comment .user-name,
 .container-add-reply .user-name,
-.view-comment .user-name,
 .page-edit-comment .user-name,
 .page-add-reply .user-name,
 .page-edit-reply .user-name {
@@ -6181,7 +6171,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-date,
 .container-edit-comment .comment-date,
 .container-add-reply .comment-date,
-.view-comment .comment-date,
 .page-edit-comment .comment-date,
 .page-add-reply .comment-date,
 .page-edit-reply .comment-date,
@@ -6190,7 +6179,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-date,
 .container-edit-comment .reply-date,
 .container-add-reply .reply-date,
-.view-comment .reply-date,
 .page-edit-comment .reply-date,
 .page-add-reply .reply-date,
 .page-edit-reply .reply-date {
@@ -6205,7 +6193,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-text,
 .container-edit-comment .comment-text,
 .container-add-reply .comment-text,
-.view-comment .comment-text,
 .page-edit-comment .comment-text,
 .page-add-reply .comment-text,
 .page-edit-reply .comment-text,
@@ -6214,7 +6201,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-text,
 .container-edit-comment .reply-text,
 .container-add-reply .reply-text,
-.view-comment .reply-text,
 .page-edit-comment .reply-text,
 .page-add-reply .reply-text,
 .page-edit-reply .reply-text {
@@ -6230,7 +6216,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-item,
 .container-edit-comment .reply-item,
 .container-add-reply .reply-item,
-.view-comment .reply-item,
 .page-edit-comment .reply-item,
 .page-add-reply .reply-item,
 .page-edit-reply .reply-item {
@@ -6242,7 +6227,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-item .header-reply,
 .container-edit-comment .reply-item .header-reply,
 .container-add-reply .reply-item .header-reply,
-.view-comment .reply-item .header-reply,
 .page-edit-comment .reply-item .header-reply,
 .page-add-reply .reply-item .header-reply,
 .page-edit-reply .reply-item .header-reply {
@@ -6254,7 +6238,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-item .user-name,
 .container-edit-comment .reply-item .user-name,
 .container-add-reply .reply-item .user-name,
-.view-comment .reply-item .user-name,
 .page-edit-comment .reply-item .user-name,
 .page-add-reply .reply-item .user-name,
 .page-edit-reply .reply-item .user-name {
@@ -6265,7 +6248,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-quote,
 .container-edit-comment .comment-quote,
 .container-add-reply .comment-quote,
-.view-comment .comment-quote,
 .page-edit-comment .comment-quote,
 .page-add-reply .comment-quote,
 .page-edit-reply .comment-quote {
@@ -6280,7 +6262,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .wrap-comment,
 .container-edit-comment .wrap-comment,
 .container-add-reply .wrap-comment,
-.view-comment .wrap-comment,
 .page-edit-comment .wrap-comment,
 .page-add-reply .wrap-comment,
 .page-edit-reply .wrap-comment,
@@ -6289,7 +6270,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .wrap-reply,
 .container-edit-comment .wrap-reply,
 .container-add-reply .wrap-reply,
-.view-comment .wrap-reply,
 .page-edit-comment .wrap-reply,
 .page-add-reply .wrap-reply,
 .page-edit-reply .wrap-reply {
@@ -6300,7 +6280,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .comment-textarea,
 .container-edit-comment .comment-textarea,
 .container-add-reply .comment-textarea,
-.view-comment .comment-textarea,
 .page-edit-comment .comment-textarea,
 .page-add-reply .comment-textarea,
 .page-edit-reply .comment-textarea,
@@ -6309,7 +6288,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .reply-textarea,
 .container-edit-comment .reply-textarea,
 .container-add-reply .reply-textarea,
-.view-comment .reply-textarea,
 .page-edit-comment .reply-textarea,
 .page-add-reply .reply-textarea,
 .page-edit-reply .reply-textarea,
@@ -6318,7 +6296,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .edit-reply-textarea,
 .container-edit-comment .edit-reply-textarea,
 .container-add-reply .edit-reply-textarea,
-.view-comment .edit-reply-textarea,
 .page-edit-comment .edit-reply-textarea,
 .page-add-reply .edit-reply-textarea,
 .page-edit-reply .edit-reply-textarea {
@@ -6336,7 +6313,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment,
 .container-edit-comment .header-comment,
 .container-add-reply .header-comment,
-.view-comment .header-comment,
 .page-edit-comment .header-comment,
 .page-add-reply .header-comment,
 .page-edit-reply .header-comment {
@@ -6349,7 +6325,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment .comment-right,
 .container-edit-comment .header-comment .comment-right,
 .container-add-reply .header-comment .comment-right,
-.view-comment .header-comment .comment-right,
 .page-edit-comment .header-comment .comment-right,
 .page-add-reply .header-comment .comment-right,
 .page-edit-reply .header-comment .comment-right {
@@ -6362,7 +6337,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment .comment-left,
 .container-edit-comment .header-comment .comment-left,
 .container-add-reply .header-comment .comment-left,
-.view-comment .header-comment .comment-left,
 .page-edit-comment .header-comment .comment-left,
 .page-add-reply .header-comment .comment-left,
 .page-edit-reply .header-comment .comment-left {
@@ -6374,7 +6348,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-comment .initials-comment,
 .container-edit-comment .header-comment .initials-comment,
 .container-add-reply .header-comment .initials-comment,
-.view-comment .header-comment .initials-comment,
 .page-edit-comment .header-comment .initials-comment,
 .page-add-reply .header-comment .initials-comment,
 .page-edit-reply .header-comment .initials-comment {
@@ -6393,7 +6366,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-reply .reply-left,
 .container-edit-comment .header-reply .reply-left,
 .container-add-reply .header-reply .reply-left,
-.view-comment .header-reply .reply-left,
 .page-edit-comment .header-reply .reply-left,
 .page-add-reply .header-reply .reply-left,
 .page-edit-reply .header-reply .reply-left {
@@ -6406,7 +6378,6 @@ html.phone .document-menu .list-block .item-link {
 .page-view-comments .header-reply .initials-reply,
 .container-edit-comment .header-reply .initials-reply,
 .container-add-reply .header-reply .initials-reply,
-.view-comment .header-reply .initials-reply,
 .page-edit-comment .header-reply .initials-reply,
 .page-add-reply .header-reply .initials-reply,
 .page-edit-reply .header-reply .initials-reply {
@@ -6439,22 +6410,17 @@ html.phone .document-menu .list-block .item-link {
   height: 50%;
   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
 }
-.container-view-comment .page-view-comments,
+.container-view-comment .page-view-comments {
-.container-view-comment .view-comment {
   background-color: #FFFFFF;
 }
-.container-view-comment .page-view-comments .list-block,
+.container-view-comment .page-view-comments .list-block {
-.container-view-comment .view-comment .list-block {
   margin-bottom: 120px;
 }
 .container-view-comment .page-view-comments .list-block ul:before,
-.container-view-comment .view-comment .list-block ul:before,
+.container-view-comment .page-view-comments .list-block ul:after {
-.container-view-comment .page-view-comments .list-block ul:after,
-.container-view-comment .view-comment .list-block ul:after {
   content: none;
 }
-.container-view-comment .page-view-comments .list-block .item-inner,
+.container-view-comment .page-view-comments .list-block .item-inner {
-.container-view-comment .view-comment .list-block .item-inner {
   padding: 0;
 }
 .container-view-comment .toolbar {
@@ -6517,34 +6483,37 @@ html.phone .document-menu .list-block .item-link {
 .container-view-comment.popover .toolbar .toolbar-inner {
   padding-right: 0;
 }
-.container-view-comment.popover .page {
+.container-view-comment.popover .pages {
+  position: absolute;
+}
+.container-view-comment.popover .pages .page {
   border-radius: 13px;
 }
-.container-view-comment.popover .page .page-content {
+.container-view-comment.popover .pages .page .page-content {
   padding: 16px;
   padding-bottom: 80px;
 }
-.container-view-comment.popover .page .page-content .list-block {
+.container-view-comment.popover .pages .page .page-content .list-block {
   margin-bottom: 0px;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content {
   padding-left: 0;
 }
-.container-view-comment.popover .page .page-content .list-block .item-content .header-comment,
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .header-comment,
-.container-view-comment.popover .page .page-content .list-block .item-content .reply-item {
+.container-view-comment.popover .pages .page .page-content .list-block .item-content .reply-item {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .block-reply {
+.container-view-comment.popover .pages .page .page-content .block-reply {
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .block-reply .reply-textarea {
+.container-view-comment.popover .pages .page .page-content .block-reply .reply-textarea {
   min-height: 70px;
   width: 278px;
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 5px;
 }
-.container-view-comment.popover .page .page-content .edit-reply-textarea {
+.container-view-comment.popover .pages .page .page-content .edit-reply-textarea {
   min-height: 60px;
   width: 100%;
   border: 1px solid #c4c4c4;
@@ -6553,10 +6522,10 @@ html.phone .document-menu .list-block .item-link {
   height: 60px;
   margin-top: 10px;
 }
-.container-view-comment.popover .page .page-content .comment-text {
+.container-view-comment.popover .pages .page .page-content .comment-text {
   padding-right: 0;
 }
-.container-view-comment.popover .page .page-content .comment-text .comment-textarea {
+.container-view-comment.popover .pages .page .page-content .comment-text .comment-textarea {
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   padding: 8px;