[de mobile] add comment, view comment

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 || {}))

apps/common/mobile/lib/template/Collaboration.template

@@ -237,3 +237,19 @@
         </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>

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) {

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;
+  }
+}

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 || {}))
 });

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;
 }

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;
 }

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;