From 2422fab071a0fe0d8e2f31146c2a7edf0488439a Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 31 Mar 2020 20:14:05 +0300 Subject: [PATCH] [DE mobile] Add style of comments view for android --- .../mobile/lib/controller/Collaboration.js | 14 ++ .../resources/less/ios/_collaboration.less | 13 +- .../less/material/_collaboration.less | 88 ++++++++-- .../mobile/app/template/AddOther.template | 2 +- .../mobile/resources/css/app-ios.css | 19 ++- .../mobile/resources/css/app-material.css | 155 ++++++++++++++---- .../resources/less/material/_icons.less | 4 +- .../mobile/resources/css/app-ios.css | 19 ++- .../mobile/resources/css/app-material.css | 151 +++++++++++++---- .../mobile/resources/css/app-ios.css | 19 ++- .../mobile/resources/css/app-material.css | 151 +++++++++++++---- 11 files changed, 495 insertions(+), 140 deletions(-) diff --git a/apps/common/mobile/lib/controller/Collaboration.js b/apps/common/mobile/lib/controller/Collaboration.js index af364fbdd..2de3c0ac9 100644 --- a/apps/common/mobile/lib/controller/Collaboration.js +++ b/apps/common/mobile/lib/controller/Collaboration.js @@ -828,6 +828,20 @@ define([ '', $$('#toolbar-collaboration') ); + this.picker = $$(me.modalViewComment); + var $overlay = $('.modal-overlay'); + + $$(this.picker).on('opened', function () { + $overlay.on('removeClass', function () { + if (!$overlay.hasClass('modal-overlay-visible')) { + $overlay.addClass('modal-overlay-visible') + } + }); + }).on('close', function () { + $overlay.off('removeClass'); + $overlay.removeClass('modal-overlay-visible'); + $('.popover').remove(); + }); } me.getView('Common.Views.Collaboration').renderViewComments(me.showComments, me.indexCurrentComment); $('.prev-comment').single('click', _.bind(me.onViewPrevComment, me)); diff --git a/apps/common/mobile/resources/less/ios/_collaboration.less b/apps/common/mobile/resources/less/ios/_collaboration.less index 5afebdaaa..076b1e2ac 100644 --- a/apps/common/mobile/resources/less/ios/_collaboration.less +++ b/apps/common/mobile/resources/less/ios/_collaboration.less @@ -103,7 +103,7 @@ word-break: break-word; } .list-reply { - padding-left: 32px; + padding-left: 26px; } .user-name { font-size: 17px; @@ -163,16 +163,17 @@ } .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; } - .comment-textarea, .reply-textarea { + .comment-textarea, .reply-textarea, .edit-reply-textarea { margin-top: 10px; background:transparent; - border:none; outline:none; width: 100%; - min-height: 200px; font-size: 15px; + border: 1px solid #c4c4c4; + border-radius: 3px; + min-height: 100px; } } .settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after { @@ -337,7 +338,7 @@ .page-add-comment { background-color: #FFFFFF; .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; .header-comment { justify-content: flex-start; } diff --git a/apps/common/mobile/resources/less/material/_collaboration.less b/apps/common/mobile/resources/less/material/_collaboration.less index 18f1c2cc0..231ced4b2 100644 --- a/apps/common/mobile/resources/less/material/_collaboration.less +++ b/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 { +.page-comments, .page-add-comment, .page-view-comments, .container-edit-comment, .container-add-reply, .view-comment { .list-block .item-inner { display: block; padding: 16px 0; @@ -101,7 +101,7 @@ word-break: break-word; } .list-reply { - padding-left: 32px; + padding-left: 26px; } .user-name { font-size: 16px; @@ -144,23 +144,23 @@ } .wrap-comment { - padding: 16px 0 0 0; + padding: 16px 24px 0 16px; } - .comment-textarea, .reply-textarea { + .comment-textarea, .reply-textarea, .edit-reply-textarea { margin-top: 10px; background:transparent; - border:none; outline:none; width: 100%; - min-height: 200px; font-size: 15px; + border: 1px solid #c4c4c4; + border-radius: 3px; + min-height: 100px; } .header-comment { display: flex; justify-content: space-between; padding-right: 16px; - margin-bottom: 13px; .comment-right { display: flex; justify-content: space-between; @@ -222,7 +222,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 { + .page-view-comments, .view-comment { background-color: #FFFFFF; .list-block { margin-bottom: 120px; @@ -283,6 +283,73 @@ .list-block { margin-top: 0; } + &.popover { + border-radius: 4px; + min-height: 170px; + height: 400px; + max-height: 600px; + + .toolbar { + border-radius: 0 0 4px 4px; + .toolbar-inner { + padding-right: 0; + } + } + + .page { + border-radius: 13px; + .page-content { + padding: 16px; + padding-bottom: 80px; + + .list-block { + margin-bottom: 0px; + + .item-content { + padding-left: 0; + + .header-comment, .reply-item { + padding-right: 0; + } + } + } + + .block-reply { + margin-top: 10px; + .reply-textarea { + 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; + } + + .comment-text { + padding-right: 0; + + .comment-textarea { + border: 1px solid #c4c4c4; + border-radius: 6px; + padding: 8px; + min-height: 80px; + height: 80px; + } + } + } + } + + } } #done-comment { @@ -290,7 +357,7 @@ } .page-add-comment { .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; .header-comment { justify-content: flex-start; } @@ -348,9 +415,6 @@ } .page-add-comment { background-color: #FFFFFF; - .page-content { - padding: 0 16px 80px; - } } .header-comment { justify-content: flex-start; diff --git a/apps/documenteditor/mobile/app/template/AddOther.template b/apps/documenteditor/mobile/app/template/AddOther.template index d4b9d19f6..ee5a922fb 100644 --- a/apps/documenteditor/mobile/app/template/AddOther.template +++ b/apps/documenteditor/mobile/app/template/AddOther.template @@ -344,7 +344,7 @@
<% if (!android) { %><%= scope.textBack %><% } %>
<%= scope.textAddComment %>
-
<% if (android) { %><% } else { %><%= scope.textDone %><% } %>
+
<% if (android) { %><% } else { %><%= scope.textDone %><% } %>
diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index 7bd3329a2..3e3be5679 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -6504,7 +6504,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .container-edit-comment .list-reply, .container-add-reply .list-reply, .view-comment .list-reply { - padding-left: 32px; + padding-left: 26px; } .page-comments .user-name, .add-comment .user-name, @@ -6620,7 +6620,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .container-edit-comment .wrap-comment, .container-add-reply .wrap-comment, .view-comment .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; } .page-comments .comment-textarea, .add-comment .comment-textarea, @@ -6633,14 +6633,21 @@ 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 { +.view-comment .reply-textarea, +.page-comments .edit-reply-textarea, +.add-comment .edit-reply-textarea, +.page-view-comments .edit-reply-textarea, +.container-edit-comment .edit-reply-textarea, +.container-add-reply .edit-reply-textarea, +.view-comment .edit-reply-textarea { margin-top: 10px; background: transparent; - border: none; outline: none; width: 100%; - min-height: 200px; font-size: 15px; + border: 1px solid #c4c4c4; + border-radius: 3px; + min-height: 100px; } .settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after { @@ -6798,7 +6805,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after background-color: #FFFFFF; } .page-add-comment .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; } .page-add-comment .wrap-comment .header-comment { justify-content: flex-start; diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index 2d06856ad..5193113d3 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -6068,7 +6068,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .list-block .item-inner, .page-view-comments .list-block .item-inner, .container-edit-comment .list-block .item-inner, -.container-add-reply .list-block .item-inner { +.container-add-reply .list-block .item-inner, +.view-comment .list-block .item-inner { display: block; padding: 16px 0; word-wrap: break-word; @@ -6077,7 +6078,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment p, .page-view-comments p, .container-edit-comment p, -.container-add-reply p { +.container-add-reply p, +.view-comment p { margin: 0; word-break: break-word; } @@ -6085,14 +6087,16 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .list-reply, .page-view-comments .list-reply, .container-edit-comment .list-reply, -.container-add-reply .list-reply { - padding-left: 32px; +.container-add-reply .list-reply, +.view-comment .list-reply { + padding-left: 26px; } .page-comments .user-name, .page-add-comment .user-name, .page-view-comments .user-name, .container-edit-comment .user-name, -.container-add-reply .user-name { +.container-add-reply .user-name, +.view-comment .user-name { font-size: 16px; line-height: 22px; color: #000000; @@ -6103,11 +6107,13 @@ 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-comments .reply-date, .page-add-comment .reply-date, .page-view-comments .reply-date, .container-edit-comment .reply-date, -.container-add-reply .reply-date { +.container-add-reply .reply-date, +.view-comment .reply-date { font-size: 12px; line-height: 18px; color: #6d6d72; @@ -6119,11 +6125,13 @@ 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-comments .reply-text, .page-add-comment .reply-text, .page-view-comments .reply-text, .container-edit-comment .reply-text, -.container-add-reply .reply-text { +.container-add-reply .reply-text, +.view-comment .reply-text { color: #000000; font-size: 15px; line-height: 25px; @@ -6135,7 +6143,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .reply-item, .page-view-comments .reply-item, .container-edit-comment .reply-item, -.container-add-reply .reply-item { +.container-add-reply .reply-item, +.view-comment .reply-item { padding-right: 16px; padding-top: 13px; } @@ -6143,7 +6152,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .reply-item .header-reply, .page-view-comments .reply-item .header-reply, .container-edit-comment .reply-item .header-reply, -.container-add-reply .reply-item .header-reply { +.container-add-reply .reply-item .header-reply, +.view-comment .reply-item .header-reply { display: flex; justify-content: space-between; } @@ -6151,14 +6161,16 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .reply-item .user-name, .page-view-comments .reply-item .user-name, .container-edit-comment .reply-item .user-name, -.container-add-reply .reply-item .user-name { +.container-add-reply .reply-item .user-name, +.view-comment .reply-item .user-name { padding-top: 3px; } .page-comments .comment-quote, .page-add-comment .comment-quote, .page-view-comments .comment-quote, .container-edit-comment .comment-quote, -.container-add-reply .comment-quote { +.container-add-reply .comment-quote, +.view-comment .comment-quote { color: #446995; border-left: 1px solid #446995; padding-left: 10px; @@ -6169,42 +6181,53 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .wrap-comment, .page-view-comments .wrap-comment, .container-edit-comment .wrap-comment, -.container-add-reply .wrap-comment { - padding: 16px 0 0 0; +.container-add-reply .wrap-comment, +.view-comment .wrap-comment { + padding: 16px 24px 0 16px; } .page-comments .comment-textarea, .page-add-comment .comment-textarea, .page-view-comments .comment-textarea, .container-edit-comment .comment-textarea, .container-add-reply .comment-textarea, +.view-comment .comment-textarea, .page-comments .reply-textarea, .page-add-comment .reply-textarea, .page-view-comments .reply-textarea, .container-edit-comment .reply-textarea, -.container-add-reply .reply-textarea { +.container-add-reply .reply-textarea, +.view-comment .reply-textarea, +.page-comments .edit-reply-textarea, +.page-add-comment .edit-reply-textarea, +.page-view-comments .edit-reply-textarea, +.container-edit-comment .edit-reply-textarea, +.container-add-reply .edit-reply-textarea, +.view-comment .edit-reply-textarea { margin-top: 10px; background: transparent; - border: none; outline: none; width: 100%; - min-height: 200px; font-size: 15px; + border: 1px solid #c4c4c4; + border-radius: 3px; + min-height: 100px; } .page-comments .header-comment, .page-add-comment .header-comment, .page-view-comments .header-comment, .container-edit-comment .header-comment, -.container-add-reply .header-comment { +.container-add-reply .header-comment, +.view-comment .header-comment { display: flex; justify-content: space-between; padding-right: 16px; - margin-bottom: 13px; } .page-comments .header-comment .comment-right, .page-add-comment .header-comment .comment-right, .page-view-comments .header-comment .comment-right, .container-edit-comment .header-comment .comment-right, -.container-add-reply .header-comment .comment-right { +.container-add-reply .header-comment .comment-right, +.view-comment .header-comment .comment-right { display: flex; justify-content: space-between; width: 70px; @@ -6213,7 +6236,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-comment .comment-left, .page-view-comments .header-comment .comment-left, .container-edit-comment .header-comment .comment-left, -.container-add-reply .header-comment .comment-left { +.container-add-reply .header-comment .comment-left, +.view-comment .header-comment .comment-left { display: flex; justify-content: space-between; } @@ -6221,7 +6245,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-comment .initials-comment, .page-view-comments .header-comment .initials-comment, .container-edit-comment .header-comment .initials-comment, -.container-add-reply .header-comment .initials-comment { +.container-add-reply .header-comment .initials-comment, +.view-comment .header-comment .initials-comment { height: 40px; width: 40px; border-radius: 50px; @@ -6236,7 +6261,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-reply .reply-left, .page-view-comments .header-reply .reply-left, .container-edit-comment .header-reply .reply-left, -.container-add-reply .header-reply .reply-left { +.container-add-reply .header-reply .reply-left, +.view-comment .header-reply .reply-left { display: flex; justify-content: space-between; align-items: flex-start; @@ -6245,7 +6271,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-reply .initials-reply, .page-view-comments .header-reply .initials-reply, .container-edit-comment .header-reply .initials-reply, -.container-add-reply .header-reply .initials-reply { +.container-add-reply .header-reply .initials-reply, +.view-comment .header-reply .initials-reply { width: 24px; height: 24px; color: #FFFFFF; @@ -6274,17 +6301,22 @@ 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 .page-view-comments .list-block ul:after { +.container-view-comment .view-comment .list-block ul:before, +.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 { @@ -6333,11 +6365,69 @@ html.phone .document-menu .list-block .item-link { .container-view-comment .list-block { margin-top: 0; } +.container-view-comment.popover { + border-radius: 4px; + min-height: 170px; + height: 400px; + max-height: 600px; +} +.container-view-comment.popover .toolbar { + border-radius: 0 0 4px 4px; +} +.container-view-comment.popover .toolbar .toolbar-inner { + padding-right: 0; +} +.container-view-comment.popover .page { + border-radius: 13px; +} +.container-view-comment.popover .page .page-content { + padding: 16px; + padding-bottom: 80px; +} +.container-view-comment.popover .page .page-content .list-block { + margin-bottom: 0px; +} +.container-view-comment.popover .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 .page .page-content .list-block .item-content .reply-item { + padding-right: 0; +} +.container-view-comment.popover .page .page-content .block-reply { + margin-top: 10px; +} +.container-view-comment.popover .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 { + min-height: 60px; + width: 100%; + border: 1px solid #c4c4c4; + border-radius: 6px; + padding: 5px; + height: 60px; + margin-top: 10px; +} +.container-view-comment.popover .page .page-content .comment-text { + padding-right: 0; +} +.container-view-comment.popover .page .page-content .comment-text .comment-textarea { + border: 1px solid #c4c4c4; + border-radius: 6px; + padding: 8px; + min-height: 80px; + height: 80px; +} #done-comment { padding: 0 16px; } .page-add-comment .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; } .page-add-comment .wrap-comment .header-comment { justify-content: flex-start; @@ -6411,11 +6501,6 @@ container-edit-comment .navbar .right { container-edit-comment .page-add-comment { background-color: #FFFFFF; } -.container-edit-comment .page-add-comment .page-content, -.container-add-reply .page-add-comment .page-content, -container-edit-comment .page-add-comment .page-content { - padding: 0 16px 80px; -} .container-edit-comment .header-comment, .container-add-reply .header-comment, container-edit-comment .header-comment { @@ -6888,7 +6973,7 @@ i.icon.icon-next-comment { i.icon.icon-close-comment { width: 24px; height: 24px; - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18.9844%206.42188L13.4062%2012L18.9844%2017.5781L17.5781%2018.9844L12%2013.4062L6.42188%2018.9844L5.01562%2017.5781L10.5938%2012L5.01562%206.42188L6.42188%205.01562L12%2010.5938L17.5781%205.01562L18.9844%206.42188Z%22%20fill%3D%22%23446995%22%2F%3E%3C%2Fsvg%3E"); + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18.9844%206.42188L13.4062%2012L18.9844%2017.5781L17.5781%2018.9844L12%2013.4062L6.42188%2018.9844L5.01562%2017.5781L10.5938%2012L5.01562%206.42188L6.42188%205.01562L12%2010.5938L17.5781%205.01562L18.9844%206.42188Z%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%200.6)%22%2F%3E%3C%2Fsvg%3E"); } i.icon.icon-done-comment { width: 24px; @@ -6900,7 +6985,7 @@ i.icon.icon-insert-comment { height: 24px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.1538%209.00708H11.8462C10.8266%209.00708%2010%209.83461%2010%2010.8554V15.1694C10%2016.1902%2010.8266%2017.0177%2011.8462%2017.0177H13.8329C13.9409%2017.0177%2014.0454%2017.0556%2014.1284%2017.1248L18.243%2020.392C18.5436%2020.6428%2019%2020.4288%2019%2020.037V17.4798C19%2017.2246%2019.2066%2017.0177%2019.4615%2017.0177H20.1538C21.1734%2017.0177%2022%2016.1902%2022%2015.1694V10.8554C22%209.83461%2021.1734%209.00708%2020.1538%209.00708ZM20%2010.0083C20.5523%2010.0083%2021%2010.4565%2021%2011.0095V15.0154C21%2015.5683%2020.5523%2016.0165%2020%2016.0165H18.0025L18%2018.8995C18%2019.2912%2018%2019%2018%2019L14.5%2016.0165H12C11.4477%2016.0165%2011%2015.5683%2011%2015.0154V11.0095C11%2010.4565%2011.4477%2010.0083%2012%2010.0083H20Z%22%20fill%3D%22%23446995%22%2F%3E%3Cpath%20d%3D%22M14.5%203H4.5C3.18908%203%202%204.2153%202%205.50295V12.0346C2%2013.3222%203.18908%2014.013%204.5%2014.013H5.5C5.82773%2014.013%206%2014.1917%206%2014.5136V17.5183C6%2018.0125%206.6135%2018.3352%207%2018.0189L11%2014.9858V13.5L7%2016.5V13.0118H4.5C3.78992%2013.0118%203%2012.732%203%2012.0346V5.50295C3%204.80547%203.78992%204.00118%204.5%204.00118H14.5C15.2101%204.00118%2016%204.80547%2016%205.50295V8.0059H17V5.50295C17%204.2153%2015.8109%203%2014.5%203Z%22%20fill%3D%22%23446995%22%2F%3E%3C%2Fsvg%3E"); } -i.icon.icon-done-comment { +i.icon.icon-done-comment-white { width: 24px; height: 24px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2016.1719L19.5938%205.57812L21%206.98438L9%2018.9844L3.42188%2013.4062L4.82812%2012L9%2016.1719Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E"); diff --git a/apps/documenteditor/mobile/resources/less/material/_icons.less b/apps/documenteditor/mobile/resources/less/material/_icons.less index cc2d96f0f..21f1d2b7c 100644 --- a/apps/documenteditor/mobile/resources/less/material/_icons.less +++ b/apps/documenteditor/mobile/resources/less/material/_icons.less @@ -432,7 +432,7 @@ i.icon { &.icon-close-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-done-comment { width: 24px; @@ -444,7 +444,7 @@ i.icon { height: 24px; .encoded-svg-background(''); } - &.icon-done-comment { + &.icon-done-comment-white { width: 24px; height: 24px; .encoded-svg-background(''); diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index 9a561db39..8a92320f8 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6504,7 +6504,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .container-edit-comment .list-reply, .container-add-reply .list-reply, .view-comment .list-reply { - padding-left: 32px; + padding-left: 26px; } .page-comments .user-name, .add-comment .user-name, @@ -6620,7 +6620,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .container-edit-comment .wrap-comment, .container-add-reply .wrap-comment, .view-comment .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; } .page-comments .comment-textarea, .add-comment .comment-textarea, @@ -6633,14 +6633,21 @@ 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 { +.view-comment .reply-textarea, +.page-comments .edit-reply-textarea, +.add-comment .edit-reply-textarea, +.page-view-comments .edit-reply-textarea, +.container-edit-comment .edit-reply-textarea, +.container-add-reply .edit-reply-textarea, +.view-comment .edit-reply-textarea { margin-top: 10px; background: transparent; - border: none; outline: none; width: 100%; - min-height: 200px; font-size: 15px; + border: 1px solid #c4c4c4; + border-radius: 3px; + min-height: 100px; } .settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after { @@ -6798,7 +6805,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after background-color: #FFFFFF; } .page-add-comment .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; } .page-add-comment .wrap-comment .header-comment { justify-content: flex-start; diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css index 1e3d2c4fc..8be55ee01 100644 --- a/apps/presentationeditor/mobile/resources/css/app-material.css +++ b/apps/presentationeditor/mobile/resources/css/app-material.css @@ -6068,7 +6068,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .list-block .item-inner, .page-view-comments .list-block .item-inner, .container-edit-comment .list-block .item-inner, -.container-add-reply .list-block .item-inner { +.container-add-reply .list-block .item-inner, +.view-comment .list-block .item-inner { display: block; padding: 16px 0; word-wrap: break-word; @@ -6077,7 +6078,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment p, .page-view-comments p, .container-edit-comment p, -.container-add-reply p { +.container-add-reply p, +.view-comment p { margin: 0; word-break: break-word; } @@ -6085,14 +6087,16 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .list-reply, .page-view-comments .list-reply, .container-edit-comment .list-reply, -.container-add-reply .list-reply { - padding-left: 32px; +.container-add-reply .list-reply, +.view-comment .list-reply { + padding-left: 26px; } .page-comments .user-name, .page-add-comment .user-name, .page-view-comments .user-name, .container-edit-comment .user-name, -.container-add-reply .user-name { +.container-add-reply .user-name, +.view-comment .user-name { font-size: 16px; line-height: 22px; color: #000000; @@ -6103,11 +6107,13 @@ 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-comments .reply-date, .page-add-comment .reply-date, .page-view-comments .reply-date, .container-edit-comment .reply-date, -.container-add-reply .reply-date { +.container-add-reply .reply-date, +.view-comment .reply-date { font-size: 12px; line-height: 18px; color: #6d6d72; @@ -6119,11 +6125,13 @@ 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-comments .reply-text, .page-add-comment .reply-text, .page-view-comments .reply-text, .container-edit-comment .reply-text, -.container-add-reply .reply-text { +.container-add-reply .reply-text, +.view-comment .reply-text { color: #000000; font-size: 15px; line-height: 25px; @@ -6135,7 +6143,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .reply-item, .page-view-comments .reply-item, .container-edit-comment .reply-item, -.container-add-reply .reply-item { +.container-add-reply .reply-item, +.view-comment .reply-item { padding-right: 16px; padding-top: 13px; } @@ -6143,7 +6152,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .reply-item .header-reply, .page-view-comments .reply-item .header-reply, .container-edit-comment .reply-item .header-reply, -.container-add-reply .reply-item .header-reply { +.container-add-reply .reply-item .header-reply, +.view-comment .reply-item .header-reply { display: flex; justify-content: space-between; } @@ -6151,14 +6161,16 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .reply-item .user-name, .page-view-comments .reply-item .user-name, .container-edit-comment .reply-item .user-name, -.container-add-reply .reply-item .user-name { +.container-add-reply .reply-item .user-name, +.view-comment .reply-item .user-name { padding-top: 3px; } .page-comments .comment-quote, .page-add-comment .comment-quote, .page-view-comments .comment-quote, .container-edit-comment .comment-quote, -.container-add-reply .comment-quote { +.container-add-reply .comment-quote, +.view-comment .comment-quote { color: #aa5252; border-left: 1px solid #aa5252; padding-left: 10px; @@ -6169,42 +6181,53 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .wrap-comment, .page-view-comments .wrap-comment, .container-edit-comment .wrap-comment, -.container-add-reply .wrap-comment { - padding: 16px 0 0 0; +.container-add-reply .wrap-comment, +.view-comment .wrap-comment { + padding: 16px 24px 0 16px; } .page-comments .comment-textarea, .page-add-comment .comment-textarea, .page-view-comments .comment-textarea, .container-edit-comment .comment-textarea, .container-add-reply .comment-textarea, +.view-comment .comment-textarea, .page-comments .reply-textarea, .page-add-comment .reply-textarea, .page-view-comments .reply-textarea, .container-edit-comment .reply-textarea, -.container-add-reply .reply-textarea { +.container-add-reply .reply-textarea, +.view-comment .reply-textarea, +.page-comments .edit-reply-textarea, +.page-add-comment .edit-reply-textarea, +.page-view-comments .edit-reply-textarea, +.container-edit-comment .edit-reply-textarea, +.container-add-reply .edit-reply-textarea, +.view-comment .edit-reply-textarea { margin-top: 10px; background: transparent; - border: none; outline: none; width: 100%; - min-height: 200px; font-size: 15px; + border: 1px solid #c4c4c4; + border-radius: 3px; + min-height: 100px; } .page-comments .header-comment, .page-add-comment .header-comment, .page-view-comments .header-comment, .container-edit-comment .header-comment, -.container-add-reply .header-comment { +.container-add-reply .header-comment, +.view-comment .header-comment { display: flex; justify-content: space-between; padding-right: 16px; - margin-bottom: 13px; } .page-comments .header-comment .comment-right, .page-add-comment .header-comment .comment-right, .page-view-comments .header-comment .comment-right, .container-edit-comment .header-comment .comment-right, -.container-add-reply .header-comment .comment-right { +.container-add-reply .header-comment .comment-right, +.view-comment .header-comment .comment-right { display: flex; justify-content: space-between; width: 70px; @@ -6213,7 +6236,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-comment .comment-left, .page-view-comments .header-comment .comment-left, .container-edit-comment .header-comment .comment-left, -.container-add-reply .header-comment .comment-left { +.container-add-reply .header-comment .comment-left, +.view-comment .header-comment .comment-left { display: flex; justify-content: space-between; } @@ -6221,7 +6245,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-comment .initials-comment, .page-view-comments .header-comment .initials-comment, .container-edit-comment .header-comment .initials-comment, -.container-add-reply .header-comment .initials-comment { +.container-add-reply .header-comment .initials-comment, +.view-comment .header-comment .initials-comment { height: 40px; width: 40px; border-radius: 50px; @@ -6236,7 +6261,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-reply .reply-left, .page-view-comments .header-reply .reply-left, .container-edit-comment .header-reply .reply-left, -.container-add-reply .header-reply .reply-left { +.container-add-reply .header-reply .reply-left, +.view-comment .header-reply .reply-left { display: flex; justify-content: space-between; align-items: flex-start; @@ -6245,7 +6271,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-reply .initials-reply, .page-view-comments .header-reply .initials-reply, .container-edit-comment .header-reply .initials-reply, -.container-add-reply .header-reply .initials-reply { +.container-add-reply .header-reply .initials-reply, +.view-comment .header-reply .initials-reply { width: 24px; height: 24px; color: #FFFFFF; @@ -6274,17 +6301,22 @@ 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 .page-view-comments .list-block ul:after { +.container-view-comment .view-comment .list-block ul:before, +.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 { @@ -6333,11 +6365,69 @@ html.phone .document-menu .list-block .item-link { .container-view-comment .list-block { margin-top: 0; } +.container-view-comment.popover { + border-radius: 4px; + min-height: 170px; + height: 400px; + max-height: 600px; +} +.container-view-comment.popover .toolbar { + border-radius: 0 0 4px 4px; +} +.container-view-comment.popover .toolbar .toolbar-inner { + padding-right: 0; +} +.container-view-comment.popover .page { + border-radius: 13px; +} +.container-view-comment.popover .page .page-content { + padding: 16px; + padding-bottom: 80px; +} +.container-view-comment.popover .page .page-content .list-block { + margin-bottom: 0px; +} +.container-view-comment.popover .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 .page .page-content .list-block .item-content .reply-item { + padding-right: 0; +} +.container-view-comment.popover .page .page-content .block-reply { + margin-top: 10px; +} +.container-view-comment.popover .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 { + min-height: 60px; + width: 100%; + border: 1px solid #c4c4c4; + border-radius: 6px; + padding: 5px; + height: 60px; + margin-top: 10px; +} +.container-view-comment.popover .page .page-content .comment-text { + padding-right: 0; +} +.container-view-comment.popover .page .page-content .comment-text .comment-textarea { + border: 1px solid #c4c4c4; + border-radius: 6px; + padding: 8px; + min-height: 80px; + height: 80px; +} #done-comment { padding: 0 16px; } .page-add-comment .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; } .page-add-comment .wrap-comment .header-comment { justify-content: flex-start; @@ -6411,11 +6501,6 @@ container-edit-comment .navbar .right { container-edit-comment .page-add-comment { background-color: #FFFFFF; } -.container-edit-comment .page-add-comment .page-content, -.container-add-reply .page-add-comment .page-content, -container-edit-comment .page-add-comment .page-content { - padding: 0 16px 80px; -} .container-edit-comment .header-comment, .container-add-reply .header-comment, container-edit-comment .header-comment { diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index 5b03b9502..97d206c9b 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -6504,7 +6504,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .container-edit-comment .list-reply, .container-add-reply .list-reply, .view-comment .list-reply { - padding-left: 32px; + padding-left: 26px; } .page-comments .user-name, .add-comment .user-name, @@ -6620,7 +6620,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .container-edit-comment .wrap-comment, .container-add-reply .wrap-comment, .view-comment .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; } .page-comments .comment-textarea, .add-comment .comment-textarea, @@ -6633,14 +6633,21 @@ 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 { +.view-comment .reply-textarea, +.page-comments .edit-reply-textarea, +.add-comment .edit-reply-textarea, +.page-view-comments .edit-reply-textarea, +.container-edit-comment .edit-reply-textarea, +.container-add-reply .edit-reply-textarea, +.view-comment .edit-reply-textarea { margin-top: 10px; background: transparent; - border: none; outline: none; width: 100%; - min-height: 200px; font-size: 15px; + border: 1px solid #c4c4c4; + border-radius: 3px; + min-height: 100px; } .settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after { @@ -6798,7 +6805,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after background-color: #FFFFFF; } .page-add-comment .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; } .page-add-comment .wrap-comment .header-comment { justify-content: flex-start; diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css index c887372bd..594d458e7 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -6078,7 +6078,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .list-block .item-inner, .page-view-comments .list-block .item-inner, .container-edit-comment .list-block .item-inner, -.container-add-reply .list-block .item-inner { +.container-add-reply .list-block .item-inner, +.view-comment .list-block .item-inner { display: block; padding: 16px 0; word-wrap: break-word; @@ -6087,7 +6088,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment p, .page-view-comments p, .container-edit-comment p, -.container-add-reply p { +.container-add-reply p, +.view-comment p { margin: 0; word-break: break-word; } @@ -6095,14 +6097,16 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .list-reply, .page-view-comments .list-reply, .container-edit-comment .list-reply, -.container-add-reply .list-reply { - padding-left: 32px; +.container-add-reply .list-reply, +.view-comment .list-reply { + padding-left: 26px; } .page-comments .user-name, .page-add-comment .user-name, .page-view-comments .user-name, .container-edit-comment .user-name, -.container-add-reply .user-name { +.container-add-reply .user-name, +.view-comment .user-name { font-size: 16px; line-height: 22px; color: #000000; @@ -6113,11 +6117,13 @@ 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-comments .reply-date, .page-add-comment .reply-date, .page-view-comments .reply-date, .container-edit-comment .reply-date, -.container-add-reply .reply-date { +.container-add-reply .reply-date, +.view-comment .reply-date { font-size: 12px; line-height: 18px; color: #6d6d72; @@ -6129,11 +6135,13 @@ 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-comments .reply-text, .page-add-comment .reply-text, .page-view-comments .reply-text, .container-edit-comment .reply-text, -.container-add-reply .reply-text { +.container-add-reply .reply-text, +.view-comment .reply-text { color: #000000; font-size: 15px; line-height: 25px; @@ -6145,7 +6153,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .reply-item, .page-view-comments .reply-item, .container-edit-comment .reply-item, -.container-add-reply .reply-item { +.container-add-reply .reply-item, +.view-comment .reply-item { padding-right: 16px; padding-top: 13px; } @@ -6153,7 +6162,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .reply-item .header-reply, .page-view-comments .reply-item .header-reply, .container-edit-comment .reply-item .header-reply, -.container-add-reply .reply-item .header-reply { +.container-add-reply .reply-item .header-reply, +.view-comment .reply-item .header-reply { display: flex; justify-content: space-between; } @@ -6161,14 +6171,16 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .reply-item .user-name, .page-view-comments .reply-item .user-name, .container-edit-comment .reply-item .user-name, -.container-add-reply .reply-item .user-name { +.container-add-reply .reply-item .user-name, +.view-comment .reply-item .user-name { padding-top: 3px; } .page-comments .comment-quote, .page-add-comment .comment-quote, .page-view-comments .comment-quote, .container-edit-comment .comment-quote, -.container-add-reply .comment-quote { +.container-add-reply .comment-quote, +.view-comment .comment-quote { color: #40865c; border-left: 1px solid #40865c; padding-left: 10px; @@ -6179,42 +6191,53 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .wrap-comment, .page-view-comments .wrap-comment, .container-edit-comment .wrap-comment, -.container-add-reply .wrap-comment { - padding: 16px 0 0 0; +.container-add-reply .wrap-comment, +.view-comment .wrap-comment { + padding: 16px 24px 0 16px; } .page-comments .comment-textarea, .page-add-comment .comment-textarea, .page-view-comments .comment-textarea, .container-edit-comment .comment-textarea, .container-add-reply .comment-textarea, +.view-comment .comment-textarea, .page-comments .reply-textarea, .page-add-comment .reply-textarea, .page-view-comments .reply-textarea, .container-edit-comment .reply-textarea, -.container-add-reply .reply-textarea { +.container-add-reply .reply-textarea, +.view-comment .reply-textarea, +.page-comments .edit-reply-textarea, +.page-add-comment .edit-reply-textarea, +.page-view-comments .edit-reply-textarea, +.container-edit-comment .edit-reply-textarea, +.container-add-reply .edit-reply-textarea, +.view-comment .edit-reply-textarea { margin-top: 10px; background: transparent; - border: none; outline: none; width: 100%; - min-height: 200px; font-size: 15px; + border: 1px solid #c4c4c4; + border-radius: 3px; + min-height: 100px; } .page-comments .header-comment, .page-add-comment .header-comment, .page-view-comments .header-comment, .container-edit-comment .header-comment, -.container-add-reply .header-comment { +.container-add-reply .header-comment, +.view-comment .header-comment { display: flex; justify-content: space-between; padding-right: 16px; - margin-bottom: 13px; } .page-comments .header-comment .comment-right, .page-add-comment .header-comment .comment-right, .page-view-comments .header-comment .comment-right, .container-edit-comment .header-comment .comment-right, -.container-add-reply .header-comment .comment-right { +.container-add-reply .header-comment .comment-right, +.view-comment .header-comment .comment-right { display: flex; justify-content: space-between; width: 70px; @@ -6223,7 +6246,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-comment .comment-left, .page-view-comments .header-comment .comment-left, .container-edit-comment .header-comment .comment-left, -.container-add-reply .header-comment .comment-left { +.container-add-reply .header-comment .comment-left, +.view-comment .header-comment .comment-left { display: flex; justify-content: space-between; } @@ -6231,7 +6255,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-comment .initials-comment, .page-view-comments .header-comment .initials-comment, .container-edit-comment .header-comment .initials-comment, -.container-add-reply .header-comment .initials-comment { +.container-add-reply .header-comment .initials-comment, +.view-comment .header-comment .initials-comment { height: 40px; width: 40px; border-radius: 50px; @@ -6246,7 +6271,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-reply .reply-left, .page-view-comments .header-reply .reply-left, .container-edit-comment .header-reply .reply-left, -.container-add-reply .header-reply .reply-left { +.container-add-reply .header-reply .reply-left, +.view-comment .header-reply .reply-left { display: flex; justify-content: space-between; align-items: flex-start; @@ -6255,7 +6281,8 @@ html.phone .document-menu .list-block .item-link { .page-add-comment .header-reply .initials-reply, .page-view-comments .header-reply .initials-reply, .container-edit-comment .header-reply .initials-reply, -.container-add-reply .header-reply .initials-reply { +.container-add-reply .header-reply .initials-reply, +.view-comment .header-reply .initials-reply { width: 24px; height: 24px; color: #FFFFFF; @@ -6284,17 +6311,22 @@ 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 .page-view-comments .list-block ul:after { +.container-view-comment .view-comment .list-block ul:before, +.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 { @@ -6343,11 +6375,69 @@ html.phone .document-menu .list-block .item-link { .container-view-comment .list-block { margin-top: 0; } +.container-view-comment.popover { + border-radius: 4px; + min-height: 170px; + height: 400px; + max-height: 600px; +} +.container-view-comment.popover .toolbar { + border-radius: 0 0 4px 4px; +} +.container-view-comment.popover .toolbar .toolbar-inner { + padding-right: 0; +} +.container-view-comment.popover .page { + border-radius: 13px; +} +.container-view-comment.popover .page .page-content { + padding: 16px; + padding-bottom: 80px; +} +.container-view-comment.popover .page .page-content .list-block { + margin-bottom: 0px; +} +.container-view-comment.popover .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 .page .page-content .list-block .item-content .reply-item { + padding-right: 0; +} +.container-view-comment.popover .page .page-content .block-reply { + margin-top: 10px; +} +.container-view-comment.popover .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 { + min-height: 60px; + width: 100%; + border: 1px solid #c4c4c4; + border-radius: 6px; + padding: 5px; + height: 60px; + margin-top: 10px; +} +.container-view-comment.popover .page .page-content .comment-text { + padding-right: 0; +} +.container-view-comment.popover .page .page-content .comment-text .comment-textarea { + border: 1px solid #c4c4c4; + border-radius: 6px; + padding: 8px; + min-height: 80px; + height: 80px; +} #done-comment { padding: 0 16px; } .page-add-comment .wrap-comment { - padding: 16px 16px 0 16px; + padding: 16px 24px 0 16px; } .page-add-comment .wrap-comment .header-comment { justify-content: flex-start; @@ -6421,11 +6511,6 @@ container-edit-comment .navbar .right { container-edit-comment .page-add-comment { background-color: #FFFFFF; } -.container-edit-comment .page-add-comment .page-content, -.container-add-reply .page-add-comment .page-content, -container-edit-comment .page-add-comment .page-content { - padding: 0 16px 80px; -} .container-edit-comment .header-comment, .container-add-reply .header-comment, container-edit-comment .header-comment {