[de mobile] add comment, view comment

2020-03-05 14:20:04 +03:00 · 2020-03-05 14:20:04 +03:00 · 9cc5e9ea4d
parent fb041728ac
commit 9cc5e9ea4d
8 changed files with 505 additions and 30 deletions
--- a/apps/common/mobile/lib/controller/Collaboration.js
+++ b/apps/common/mobile/lib/controller/Collaboration.js
@ -679,6 +679,179 @@ define([

            //Comments

+            showCommentModal: function() {
+                var me = this,
+                    isAndroid = Framework7.prototype.device.android === true,
+                    modalView,
+                    appPrefix = !!window.DE ? DE : !!window.PE ? PE : SSE,
+                    mainView = appPrefix.getController('Editor').getView('Editor').f7View;
+
+                uiApp.closeModal();
+
+                if (Common.SharedSettings.get('phone')) {
+                    modalView = $$(uiApp.pickerModal(
+                        '<div class="picker-modal container-view-comment">' +
+                            this.getView('Common.Views.Collaboration').rootCommentLayout() +
+                        '</div>'
+                    )).on('opened', function () {
+                        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 {
+                }
+
+                appPrefix.getController('Toolbar').getView('Toolbar').hideSearch();
+
+                //swipe modal window
+                me.swipeFull = false;
+                var $swipeContainer = $('.swipe-container');
+                $swipeContainer.single('touchstart', _.bind(function(e){
+                    var touchobj = e.changedTouches[0];
+                    me.swipeStart = parseInt(touchobj.clientY);
+                    e.preventDefault();
+                }, me));
+                $swipeContainer.single('touchend', _.bind(function (e) {
+                    var touchobj = e.changedTouches[0];
+                    var swipeEnd = parseInt(touchobj.clientY);
+                    var dist = swipeEnd - me.swipeStart;
+                    if (dist > 20) {
+                        if (me.swipeFull) {
+                            $('.container-view-comment').css('height', '50%');
+                            me.swipeFull = false;
+                        } else {
+                            uiApp.closeModal();
+                        }
+                    } else if (dist < 0) {
+                        $('.container-view-comment').css('height', '100%');
+                        me.swipeFull = true;
+                    } else {
+                        $('.container-view-comment').css('height', '50%');
+                    }
+                }, me));
+            },
+
+            showAddCommentModal: function() {
+                var me = this,
+                    isAndroid = Framework7.prototype.device.android === true,
+                    modalView,
+                    appPrefix = !!window.DE ? DE : !!window.PE ? PE : SSE,
+                    mainView = appPrefix.getController('Editor').getView('Editor').f7View;
+
+                uiApp.closeModal();
+
+                var date = new Date();
+                _.each(editUsers, function(item){
+                    if (item.asc_getIdOriginal() === _userId) {
+                        me.currentUser = item;
+                    }
+                });
+                if (!me.currentUser) return;
+                var comment = {
+                    time: date.getTime(),
+                    date: me.dateToLocaleTimeString(date),
+                    userid: _userId,
+                    username: me.currentUser.asc_getUserName(),
+                    usercolor: me.currentUser.asc_getColor()
+                };
+
+                if (Common.SharedSettings.get('phone')) {
+                    modalView = $$(uiApp.pickerModal(
+                        '<div class="picker-modal container-view-add-comment">' +
+                            '<div class="navbar">' +
+                                '<div class="navbar-inner">' +
+                                    '<div class="left sliding"><a href="#" class="back link close-picker"> <i class="icon icon-close"></i>' +  (!isAndroid ? '<span>' + me.textCancel + '</span>' : '') + '</a></div>' +
+                                    '<div class="center sliding">' + me.textAddComment + '</div>' +
+                                    '<div class="right sliding"><a href="#" class="link" id="add-comment"><i class="icon icon-done"></i>' + (!isAndroid ? '<span>' + me.textDone + '</span>' : '') + '</a></div>' +
+                                '</div>' +
+                            '</div>' +
+                            '<div class="pages">' +
+                                '<div class="page page-add-comment">' +
+                                    '<div class="page-content">' +
+                                        '<div class="wrap-comment">' +
+                                            '<div class="user-name">' + comment.username + '</div>' +
+                                            '<div class="comment-date">' + comment.date + '</div>' +
+                                            '<div><textarea id="comment-text" class="comment-textarea"></textarea></div>' +
+                                        '</div>' +
+                                    '</div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</div>'
+                    )).on('opened', function () {
+                        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 {
+                }
+
+                _.delay(function(){
+                    $('#comment-text').focus();
+                },200);
+
+                appPrefix.getController('Toolbar').getView('Toolbar').hideSearch();
+
+                $('#add-comment').single('click', _.bind(me.onAddNewComment, me));
+            },
+
+            onAddNewComment: function() {
+                var comment;
+                if (typeof Asc.asc_CCommentDataWord !== 'undefined') {
+                    comment = new Asc.asc_CCommentDataWord(null);
+                } else {
+                    comment = new Asc.asc_CCommentData(null);
+                }
+
+                var textComment = $('#comment-text').val();
+
+                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(false);
+
+                    this.api.asc_addComment(comment);
+
+                    uiApp.closeModal();
+                }
+            },
+
+            // utils
+            timeZoneOffsetInMs: (new Date()).getTimezoneOffset() * 60000,
+            utcDateToString: function (date) {
+                if (Object.prototype.toString.call(date) === '[object Date]')
+                    return (date.getTime() - this.timeZoneOffsetInMs).toString();
+
+                return '';
+            },
+            ooDateToString: function (date) {
+                if (Object.prototype.toString.call(date) === '[object Date]')
+                    return (date.getTime()).toString();
+
+                return '';
+            },
+            //end utils
+
+
            groupCollectionComments: [],
            collectionComments: [],
            groupCollectionFilter: [],
@ -953,7 +1126,10 @@ define([
            textParaMoveTo: '<b>Moved:</b>',
            textParaMoveFromUp: '<b>Moved Up:</b>',
            textParaMoveFromDown: '<b>Moved Down:</b>',
-            textEditUser: 'Document is currently being edited by several users.'
+            textEditUser: 'Document is currently being edited by several users.',
+            textAddComment: "Add Comment",
+            textCancel: "Cancel",
+            textDone: "Done"

        }
    })(), Common.Controllers.Collaboration || {}))
--- a/apps/common/mobile/lib/template/Collaboration.template
+++ b/apps/common/mobile/lib/template/Collaboration.template
@ -236,4 +236,20 @@
            </div>
        </div>
    </div>
+</div>
+
+<div id="comment-view">
+    <div class="swipe-container">
+        <div class="icon-swipe"></div>
+    </div>
+    <div class="toolbar toolbar-bottom">
+        <div class="toolbar-inner">
+            <a href="#" class="link">Link 1</a>
+            <a href="#" class="link">Link 2</a>
+            <a href="#" class="link">Link 3</a>
+        </div>
+    </div>
+    <div class="page-content">
+
+    </div>
 </div>
--- a/apps/common/mobile/lib/view/Collaboration.js
+++ b/apps/common/mobile/lib/view/Collaboration.js
@ -123,6 +123,17 @@ define([
                return '';
            },

+            rootCommentLayout: function() {
+                if (this.layout) {
+                    var $layour = this.layout.find('#comment-view'),
+                        isPhone = Common.SharedSettings.get('phone');
+
+                    return $layour.html();
+                }
+
+                return '';
+            },
+
            showPage: function(templateId, animate) {
                var me = this;
                var prefix = !!window.DE ? DE : !!window.PE ? PE : SSE;
@ -146,6 +157,10 @@ define([
                }
            },

+            renderViewComments: function(comments) {
+
+            },
+
            renderComments: function (comments) {
                var $pageComments = $('.page-comments .page-content');
                if (!comments) {
--- a/apps/common/mobile/resources/less/ios/_collaboration.less
+++ b/apps/common/mobile/resources/less/ios/_collaboration.less
@ -92,7 +92,7 @@
 }

 //Comments
-.page-comments {
+.page-comments, .page-add-comment {
  .list-block .item-inner {
    display: block;
    padding: 16px 0;
@ -151,7 +151,61 @@
    margin: 5px 0;
    font-size: 15px;
  }
+
+  //add comment
+  .wrap-comment {
+    padding: 16px 16px 0 16px;
+  }
+  .comment-textarea {
+    margin-top: 10px;
+    background:transparent;
+    border:none;
+    outline:none;
+    width: 100%;
+    min-height: 200px;
+  }
 }
 .settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after {
  display: none;
+}
+
+//view comment
+.container-view-comment {
+  -webkit-transition: height 100ms;
+  transition: height 100ms;
+  background-color: #FFFFFF;
+  border-top-left-radius: 4px;
+  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);
+  .toolbar {
+    position: absolute;
+  }
+  .swipe-container {
+    display: flex;
+    justify-content: center;
+    height: 40px;
+    .icon-swipe {
+      margin-top: 8px;
+      width: 40px;
+      height: 4px;
+      background: rgba(0, 0, 0, 0.12);
+      border-radius: 2px;
+    }
+  }
+  .page-content {
+    padding: 0 16px 80px;
+  }
+}
+
+.container-view-add-comment {
+  height: 100%;
+  .navbar {
+    a.link i + span {
+      margin-left: 0;
+    }
+  }
+  .page-add-comment {
+    background-color: #FFFFFF;
+  }
 }
--- a/apps/documenteditor/mobile/app/controller/DocumentHolder.js
+++ b/apps/documenteditor/mobile/app/controller/DocumentHolder.js
@ -60,6 +60,7 @@ define([
            _isEdit = false,
            _canReview = false,
            _inRevisionChange = false,
+            _isComments = false,
            _menuPos = [],
            _timer = 0;

@ -95,6 +96,8 @@ define([
                Common.NotificationCenter.on('api:disconnect',              _.bind(me.onCoAuthoringDisconnect, me));
                me.api.asc_registerCallback('asc_onCoAuthoringDisconnect',  _.bind(me.onCoAuthoringDisconnect,me));
                me.api.asc_registerCallback('asc_onShowRevisionsChange',    _.bind(me.onApiShowChange, me));
+                me.api.asc_registerCallback('asc_onShowComment',            _.bind(me.onApiShowComment, me));
+                me.api.asc_registerCallback('asc_onHideComment',            _.bind(me.onApiHideComment, me));
                me.api.asc_coAuthoringGetUsers();
            },

@ -157,6 +160,15 @@ define([
                    getCollaboration.showModal();
                    getCollaboration.getView('Common.Views.Collaboration').showPage('#reviewing-settings-view', false);
                    getCollaboration.getView('Common.Views.Collaboration').showPage('#change-view', false);
+                } else if ('viewcomment' == eventName) {
+                    var getCollaboration = DE.getController('Common.Controllers.Collaboration');
+                    getCollaboration.showCommentModal();
+                } else if ('addcomment' == eventName) {
+                    var getCollaboration = DE.getController('Common.Controllers.Collaboration');
+                    /*if (this.api && this.mode.canCoAuthoring && this.mode.canComments) {
+
+                    }*/
+                    getCollaboration.showAddCommentModal();
                } else if ('showActionSheet' == eventName && _actionSheets.length > 0) {
                    _.delay(function () {
                        _.each(_actionSheets, function (action) {
@ -365,6 +377,14 @@ define([
                _inRevisionChange = sdkchange && sdkchange.length>0;
            },

+            onApiShowComment: function(comments) {
+                _isComments = comments && comments.length>0;
+            },
+
+            onApiHideComment: function() {
+                _isComments = false;
+            },
+
            // Internal

            _openLink: function(url) {
@ -513,6 +533,18 @@ define([
                                });
                            }
                        }
+
+                        if (1/*_isComments*/) {
+                            arrItems.push({
+                                caption: me.menuViewComment,
+                                event: 'viewcomment'
+                            });
+                        }
+
+                        arrItems.push({
+                            caption: me.menuAddComment,
+                            event: 'addcomment'
+                        });
                    }
                }

@ -559,7 +591,9 @@ define([
            menuMerge: 'Merge Cells',
            menuSplit: 'Split Cell',
            menuDeleteTable: 'Delete Table',
-            menuReviewChange: 'Review Change'
+            menuReviewChange: 'Review Change',
+            menuViewComment: 'View Comment',
+            menuAddComment: 'Add Comment'
        }
    })(), DE.Controllers.DocumentHolder || {}))
 });
--- a/apps/documenteditor/mobile/resources/css/app-ios.css
+++ b/apps/documenteditor/mobile/resources/css/app-ios.css
@ -6479,15 +6479,18 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 #user-list ul:before {
  content: none;
 }
-.page-comments .list-block .item-inner {
+.page-comments .list-block .item-inner,
+.page-add-comment .list-block .item-inner {
  display: block;
  padding: 16px 0;
  word-wrap: break-word;
 }
-.page-comments p {
+.page-comments p,
+.page-add-comment p {
  margin: 0;
 }
-.page-comments .user-name {
+.page-comments .user-name,
+.page-add-comment .user-name {
  font-size: 17px;
  line-height: 22px;
  color: #000000;
@ -6495,7 +6498,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  font-weight: bold;
 }
 .page-comments .comment-date,
-.page-comments .reply-date {
+.page-add-comment .comment-date,
+.page-comments .reply-date,
+.page-add-comment .reply-date {
  font-size: 12px;
  line-height: 18px;
  color: #6d6d72;
@ -6503,7 +6508,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  margin-top: 0px;
 }
 .page-comments .comment-text,
-.page-comments .reply-text {
+.page-add-comment .comment-text,
+.page-comments .reply-text,
+.page-add-comment .reply-text {
  color: #000000;
  font-size: 15px;
  line-height: 25px;
@ -6511,13 +6518,16 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  max-width: 100%;
  padding-right: 15px;
 }
-.page-comments .reply-item {
+.page-comments .reply-item,
+.page-add-comment .reply-item {
  margin-top: 15px;
 }
-.page-comments .reply-item .user-name {
+.page-comments .reply-item .user-name,
+.page-add-comment .reply-item .user-name {
  padding-top: 16px;
 }
-.page-comments .reply-item:before {
+.page-comments .reply-item:before,
+.page-add-comment .reply-item:before {
  content: '';
  position: absolute;
  left: auto;
@ -6532,17 +6542,67 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
 }
-.page-comments .comment-quote {
+.page-comments .comment-quote,
+.page-add-comment .comment-quote {
  color: #446995;
  border-left: 1px solid #446995;
  padding-left: 10px;
  margin: 5px 0;
  font-size: 15px;
 }
+.page-comments .wrap-comment,
+.page-add-comment .wrap-comment {
+  padding: 16px 16px 0 16px;
+}
+.page-comments .comment-textarea,
+.page-add-comment .comment-textarea {
+  margin-top: 10px;
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  min-height: 200px;
+}
 .settings.popup .list-block ul.list-reply:last-child:after,
 .settings.popover .list-block ul.list-reply:last-child:after {
  display: none;
 }
+.container-view-comment {
+  -webkit-transition: height 100ms;
+  transition: height 100ms;
+  background-color: #FFFFFF;
+  border-top-left-radius: 4px;
+  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);
+}
+.container-view-comment .toolbar {
+  position: absolute;
+}
+.container-view-comment .swipe-container {
+  display: flex;
+  justify-content: center;
+  height: 40px;
+}
+.container-view-comment .swipe-container .icon-swipe {
+  margin-top: 8px;
+  width: 40px;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
+}
+.container-view-comment .page-content {
+  padding: 0 16px 80px;
+}
+.container-view-add-comment {
+  height: 100%;
+}
+.container-view-add-comment .navbar a.link i + span {
+  margin-left: 0;
+}
+.container-view-add-comment .page-add-comment {
+  background-color: #FFFFFF;
+}
 .tablet .searchbar.document.replace .center .searchbar:first-child {
  margin-right: 10px;
 }
--- a/apps/presentationeditor/mobile/resources/css/app-ios.css
+++ b/apps/presentationeditor/mobile/resources/css/app-ios.css
@ -6479,15 +6479,18 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 #user-list ul:before {
  content: none;
 }
-.page-comments .list-block .item-inner {
+.page-comments .list-block .item-inner,
+.page-add-comment .list-block .item-inner {
  display: block;
  padding: 16px 0;
  word-wrap: break-word;
 }
-.page-comments p {
+.page-comments p,
+.page-add-comment p {
  margin: 0;
 }
-.page-comments .user-name {
+.page-comments .user-name,
+.page-add-comment .user-name {
  font-size: 17px;
  line-height: 22px;
  color: #000000;
@ -6495,7 +6498,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  font-weight: bold;
 }
 .page-comments .comment-date,
-.page-comments .reply-date {
+.page-add-comment .comment-date,
+.page-comments .reply-date,
+.page-add-comment .reply-date {
  font-size: 12px;
  line-height: 18px;
  color: #6d6d72;
@ -6503,7 +6508,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  margin-top: 0px;
 }
 .page-comments .comment-text,
-.page-comments .reply-text {
+.page-add-comment .comment-text,
+.page-comments .reply-text,
+.page-add-comment .reply-text {
  color: #000000;
  font-size: 15px;
  line-height: 25px;
@ -6511,13 +6518,16 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  max-width: 100%;
  padding-right: 15px;
 }
-.page-comments .reply-item {
+.page-comments .reply-item,
+.page-add-comment .reply-item {
  margin-top: 15px;
 }
-.page-comments .reply-item .user-name {
+.page-comments .reply-item .user-name,
+.page-add-comment .reply-item .user-name {
  padding-top: 16px;
 }
-.page-comments .reply-item:before {
+.page-comments .reply-item:before,
+.page-add-comment .reply-item:before {
  content: '';
  position: absolute;
  left: auto;
@ -6532,17 +6542,67 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
 }
-.page-comments .comment-quote {
+.page-comments .comment-quote,
+.page-add-comment .comment-quote {
  color: #aa5252;
  border-left: 1px solid #aa5252;
  padding-left: 10px;
  margin: 5px 0;
  font-size: 15px;
 }
+.page-comments .wrap-comment,
+.page-add-comment .wrap-comment {
+  padding: 16px 16px 0 16px;
+}
+.page-comments .comment-textarea,
+.page-add-comment .comment-textarea {
+  margin-top: 10px;
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  min-height: 200px;
+}
 .settings.popup .list-block ul.list-reply:last-child:after,
 .settings.popover .list-block ul.list-reply:last-child:after {
  display: none;
 }
+.container-view-comment {
+  -webkit-transition: height 100ms;
+  transition: height 100ms;
+  background-color: #FFFFFF;
+  border-top-left-radius: 4px;
+  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);
+}
+.container-view-comment .toolbar {
+  position: absolute;
+}
+.container-view-comment .swipe-container {
+  display: flex;
+  justify-content: center;
+  height: 40px;
+}
+.container-view-comment .swipe-container .icon-swipe {
+  margin-top: 8px;
+  width: 40px;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
+}
+.container-view-comment .page-content {
+  padding: 0 16px 80px;
+}
+.container-view-add-comment {
+  height: 100%;
+}
+.container-view-add-comment .navbar a.link i + span {
+  margin-left: 0;
+}
+.container-view-add-comment .page-add-comment {
+  background-color: #FFFFFF;
+}
 .tablet .searchbar.document.replace .center .searchbar:first-child {
  margin-right: 10px;
 }
--- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
+++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
@ -6479,15 +6479,18 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 #user-list ul:before {
  content: none;
 }
-.page-comments .list-block .item-inner {
+.page-comments .list-block .item-inner,
+.page-add-comment .list-block .item-inner {
  display: block;
  padding: 16px 0;
  word-wrap: break-word;
 }
-.page-comments p {
+.page-comments p,
+.page-add-comment p {
  margin: 0;
 }
-.page-comments .user-name {
+.page-comments .user-name,
+.page-add-comment .user-name {
  font-size: 17px;
  line-height: 22px;
  color: #000000;
@ -6495,7 +6498,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  font-weight: bold;
 }
 .page-comments .comment-date,
-.page-comments .reply-date {
+.page-add-comment .comment-date,
+.page-comments .reply-date,
+.page-add-comment .reply-date {
  font-size: 12px;
  line-height: 18px;
  color: #6d6d72;
@ -6503,7 +6508,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  margin-top: 0px;
 }
 .page-comments .comment-text,
-.page-comments .reply-text {
+.page-add-comment .comment-text,
+.page-comments .reply-text,
+.page-add-comment .reply-text {
  color: #000000;
  font-size: 15px;
  line-height: 25px;
@ -6511,13 +6518,16 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  max-width: 100%;
  padding-right: 15px;
 }
-.page-comments .reply-item {
+.page-comments .reply-item,
+.page-add-comment .reply-item {
  margin-top: 15px;
 }
-.page-comments .reply-item .user-name {
+.page-comments .reply-item .user-name,
+.page-add-comment .reply-item .user-name {
  padding-top: 16px;
 }
-.page-comments .reply-item:before {
+.page-comments .reply-item:before,
+.page-add-comment .reply-item:before {
  content: '';
  position: absolute;
  left: auto;
@ -6532,17 +6542,67 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
 }
-.page-comments .comment-quote {
+.page-comments .comment-quote,
+.page-add-comment .comment-quote {
  color: #40865c;
  border-left: 1px solid #40865c;
  padding-left: 10px;
  margin: 5px 0;
  font-size: 15px;
 }
+.page-comments .wrap-comment,
+.page-add-comment .wrap-comment {
+  padding: 16px 16px 0 16px;
+}
+.page-comments .comment-textarea,
+.page-add-comment .comment-textarea {
+  margin-top: 10px;
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  min-height: 200px;
+}
 .settings.popup .list-block ul.list-reply:last-child:after,
 .settings.popover .list-block ul.list-reply:last-child:after {
  display: none;
 }
+.container-view-comment {
+  -webkit-transition: height 100ms;
+  transition: height 100ms;
+  background-color: #FFFFFF;
+  border-top-left-radius: 4px;
+  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);
+}
+.container-view-comment .toolbar {
+  position: absolute;
+}
+.container-view-comment .swipe-container {
+  display: flex;
+  justify-content: center;
+  height: 40px;
+}
+.container-view-comment .swipe-container .icon-swipe {
+  margin-top: 8px;
+  width: 40px;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
+}
+.container-view-comment .page-content {
+  padding: 0 16px 80px;
+}
+.container-view-add-comment {
+  height: 100%;
+}
+.container-view-add-comment .navbar a.link i + span {
+  margin-left: 0;
+}
+.container-view-add-comment .page-add-comment {
+  background-color: #FFFFFF;
+}
 i.icon.icon-search {
  width: 24px;
  height: 24px;