Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[de mobile] Add, view comment, add reply for iPad

Browse source
This commit is contained in:
Julia Svinareva 2020-03-23 17:33:41 +03:00
parent a98b2892bb
commit 9621eab6b6
9 changed files with 642 additions and 330 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

349
apps/common/mobile/lib/controller/Collaboration.js
View file

@ -748,26 +748,26 @@ define([
if (Common.SharedSettings.get('phone')) { if (Common.SharedSettings.get('phone')) {
me.modalViewComment = $$(uiApp.pickerModal( me.modalViewComment = $$(uiApp.pickerModal(
'<div class="picker-modal container-view-comment">' + '<div class="picker-modal container-view-comment">' +
'<div class="swipe-container">' + '<div class="swipe-container">' +
'<div class="icon-swipe"></div>' + '<div class="icon-swipe"></div>' +
'</div>' + '</div>' +
'<div class="toolbar toolbar-bottom" style="bottom: 0;">' + '<div class="toolbar toolbar-bottom" style="bottom: 0;">' +
'<div class="toolbar-inner">' + '<div class="toolbar-inner">' +
'<div class="button-left">' + '<div class="button-left">' +
'<a href="#" class="link add-reply">' + me.textAddReply + '</a>' + '<a href="#" class="link add-reply">' + me.textAddReply + '</a>' +
'</div>' + '</div>' +
'<div class="button-right">' + '<div class="button-right">' +
'<a href="#" class="link prev-comment"><i class="icon icon-arrow-comment left"></i></a>' + '<a href="#" class="link prev-comment"><i class="icon icon-prev-comment"></i></a>' +
'<a href="#" class="link next-comment"><i class="icon icon-arrow-comment right"></i></a>' + '<a href="#" class="link next-comment"><i class="icon icon-next-comment"></i></a>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div class="pages">' + '<div class="pages">' +
'<div class="page page-view-comments" data-page="comments-view">' + '<div class="page page-view-comments view-comment" data-page="comments-view">' +
'<div class="page-content">' + '<div class="page-content">' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>'+ '</div>' +
'</div>' '</div>'
)).on('opened', function () { )).on('opened', function () {
if (_.isFunction(me.api.asc_OnShowContextMenu)) { if (_.isFunction(me.api.asc_OnShowContextMenu)) {
@ -782,112 +782,139 @@ define([
}); });
mainView.hideNavbar(); mainView.hideNavbar();
} else { } else {
me.modalViewComment = uiApp.popover(
'<div class="popover container-view-comment">' +
'<div class="popover-inner">' +
'<div class="toolbar toolbar-bottom" style="bottom: 0;">' +
'<div class="toolbar-inner">' +
'<div class="button-left">' +
'<a href="#" class="link add-reply">' + me.textAddReply + '</a>' +
'</div>' +
'<div class="button-right">' +
'<a href="#" class="link prev-comment"><i class="icon icon-prev-comment"></i></a>' +
'<a href="#" class="link next-comment"><i class="icon icon-next-comment"></i></a>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="view-comment page">' +
'<div class="page-content"></div>' +
'</div>' +
'</div>' +
'</div>',
$$('#toolbar-collaboration')
);
} }
appPrefix.getController('Toolbar').getView('Toolbar').hideSearch(); appPrefix.getController('Toolbar').getView('Toolbar').hideSearch();
viewCollaboration.renderViewComments(me.showComments, me.indexCurrentComment); _.delay(function () {
viewCollaboration.renderViewComments(me.showComments, me.indexCurrentComment);
$('.prev-comment').single('click', _.bind(me.onViewPrevComment, me));
$('.next-comment').single('click', _.bind(me.onViewNextComment, me));
$('.comment-menu').single('click', _.bind(me.initMenuComments, me));
$('.add-reply').single('click', _.bind(me.onClickAddReply, me));
$('.reply-menu').single('click', _.bind(me.initReplyMenu, me));
$('.comment-resolve').single('click', _.bind(me.onClickResolveComment, me));
if (me.showComments.length === 1) {
$('.prev-comment, .next-comment').addClass('disabled');
}
}, 300);
//swipe modal window //swipe modal window
me.swipeFull = false; if ($('.swipe-container').length > 0) {
var $swipeContainer = $('.swipe-container'); me.swipeFull = false;
$swipeContainer.single('touchstart', _.bind(function(e){ var $swipeContainer = $('.swipe-container');
var touchobj = e.changedTouches[0]; $swipeContainer.single('touchstart', _.bind(function (e) {
me.swipeStart = parseInt(touchobj.clientY); var touchobj = e.changedTouches[0];
me.swipeChange = parseInt(touchobj.clientY); me.swipeStart = parseInt(touchobj.clientY);
me.swipeHeight = parseInt($('.container-view-comment').css('height')); me.swipeChange = parseInt(touchobj.clientY);
e.preventDefault(); me.swipeHeight = parseInt($('.container-view-comment').css('height'));
}, me)); e.preventDefault();
$swipeContainer.single('touchmove', _.bind(function(e){ }, me));
var touchobj = e.changedTouches[0]; $swipeContainer.single('touchmove', _.bind(function (e) {
var dist = parseInt(touchobj.clientY) - me.swipeStart; var touchobj = e.changedTouches[0];
var newHeight; var dist = parseInt(touchobj.clientY) - me.swipeStart;
if (dist < 0) { var newHeight;
newHeight = '100%'; if (dist < 0) {
me.swipeFull = true; newHeight = '100%';
me.closeCommentPicker = false; me.swipeFull = true;
$('.container-view-comment').css('opacity', '1'); me.closeCommentPicker = false;
} else if (dist < 100) { $('.container-view-comment').css('opacity', '1');
newHeight = '50%'; } else if (dist < 100) {
me.swipeFull = false; newHeight = '50%';
me.closeCommentPicker = false; me.swipeFull = false;
$('.container-view-comment').css('opacity', '1'); me.closeCommentPicker = false;
} else { $('.container-view-comment').css('opacity', '1');
me.closeCommentPicker = true; } else {
$('.container-view-comment').css('opacity', '0.6'); me.closeCommentPicker = true;
} $('.container-view-comment').css('opacity', '0.6');
$('.container-view-comment').css('height', newHeight);
me.swipeHeight = newHeight;
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 (me.closeCommentPicker) {
uiApp.closeModal();
} else if (me.swipeFull) {
if (dist > 20) {
$('.container-view-comment').css('height', '50%');
} }
} $('.container-view-comment').css('height', newHeight);
me.swipeHeight = undefined; me.swipeHeight = newHeight;
me.swipeChange = undefined; e.preventDefault();
me.closeCommentPicker = undefined; }, me));
}, me)); $swipeContainer.single('touchend', _.bind(function (e) {
var touchobj = e.changedTouches[0];
$('.prev-comment').single('click', _.bind(me.onViewPrevComment, me)); var swipeEnd = parseInt(touchobj.clientY);
$('.next-comment').single('click', _.bind(me.onViewNextComment, me)); var dist = swipeEnd - me.swipeStart;
$('.comment-menu').single('click', _.bind(me.initMenuComments, me)); if (me.closeCommentPicker) {
$('.add-reply').single('click', _.bind(me.onClickAddReply, me)); uiApp.closeModal();
$('.reply-menu').single('click', _.bind(me.initReplyMenu, me)); me.modalViewComment.remove();
$('.comment-resolve').single('click', _.bind(me.onClickResolveComment, me)); } else if (me.swipeFull) {
if (dist > 20) {
me.updateDisabledCommentArrow(); $('.container-view-comment').css('height', '50%');
}, }
}
updateDisabledCommentArrow: function() { me.swipeHeight = undefined;
if (this.indexCurrentComment === 0) { me.swipeChange = undefined;
$('.prev-comment').addClass('disabled'); me.closeCommentPicker = undefined;
} else { }, me));
$('.prev-comment').removeClass('disabled');
}
if (this.indexCurrentComment + 1 === this.showComments.length) {
$('.next-comment').addClass('disabled');
} else {
$('.next-comment').removeClass('disabled');
} }
}, },
onViewPrevComment: function() { onViewPrevComment: function() {
if (this.indexCurrentComment - 1 >= 0 && this.showComments.length > 0) { if (this.showComments.length > 0) {
this.indexCurrentComment -= 1; if (this.indexCurrentComment - 1 < 0) {
DE.getController('Common.Controllers.Collaboration').getView('Common.Views.Collaboration').renderViewComments(this.showComments, this.indexCurrentComment); this.indexCurrentComment = this.showComments.length - 1;
$('.comment-menu').single('click', _.bind(this.initMenuComments, this)); } else {
$('.reply-menu').single('click', _.bind(this.initReplyMenu, this)); this.indexCurrentComment -= 1;
$('.comment-resolve').single('click', _.bind(this.onClickResolveComment, this)); }
this.updateDisabledCommentArrow(); var me = this;
DE.getController('Common.Controllers.Collaboration').getView('Common.Views.Collaboration').renderViewComments(me.showComments, me.indexCurrentComment);
_.defer(function () {
$('.comment-menu').single('click', _.bind(me.initMenuComments, me));
$('.reply-menu').single('click', _.bind(me.initReplyMenu, me));
$('.comment-resolve').single('click', _.bind(me.onClickResolveComment, me));
});
} }
}, },
onViewNextComment: function() { onViewNextComment: function() {
if (this.indexCurrentComment + 1 < this.showComments.length) { if (this.showComments.length > 0) {
this.indexCurrentComment += 1; if (this.indexCurrentComment + 1 === this.showComments.length) {
DE.getController('Common.Controllers.Collaboration').getView('Common.Views.Collaboration').renderViewComments(this.showComments, this.indexCurrentComment); this.indexCurrentComment = 0;
$('.comment-menu').single('click', _.bind(this.initMenuComments, this)); } else {
$('.reply-menu').single('click', _.bind(this.initReplyMenu, this)); this.indexCurrentComment += 1;
$('.comment-resolve').single('click', _.bind(this.onClickResolveComment, this)); }
this.updateDisabledCommentArrow(); var me = this;
DE.getController('Common.Controllers.Collaboration').getView('Common.Views.Collaboration').renderViewComments(me.showComments, me.indexCurrentComment);
_.defer(function () {
$('.comment-menu').single('click', _.bind(me.initMenuComments, me));
$('.reply-menu').single('click', _.bind(me.initReplyMenu, me));
$('.comment-resolve').single('click', _.bind(me.onClickResolveComment, me));
});
} }
}, },
onClickAddReply: function() { onClickAddReply: function() {
var me = this; var me = this;
var isAndroid = Framework7.prototype.device.android === true; var isAndroid = Framework7.prototype.device.android === true,
phone = Common.SharedSettings.get('phone');
if (this.indexCurrentComment > -1 && this.indexCurrentComment < this.showComments.length) { if (this.indexCurrentComment > -1 && this.indexCurrentComment < this.showComments.length) {
var addReplyView, var addReplyView,
comment = this.showComments[this.indexCurrentComment]; comment = this.showComments[this.indexCurrentComment];
if (Common.SharedSettings.get('phone')) { if (phone) {
addReplyView = uiApp.popup( addReplyView = uiApp.popup(
'<div class="popup container-add-reply">' + '<div class="popup container-add-reply">' +
'<div class="navbar">' + '<div class="navbar">' +
@ -913,21 +940,36 @@ define([
'</div>' '</div>'
); );
$('.popup').css('z-index', '20000'); $('.popup').css('z-index', '20000');
_.delay(function () {
var $textarea = $('.reply-textarea')[0];
$textarea.focus();
},100);
$('.done-reply').single('click', _.bind(function (uid) {
var reply = $('.reply-textarea')[0].value;
if (reply && reply.length > 0) {
this.addReply(uid, reply);
uiApp.closeModal($$(addReplyView));
this.updateViewComment(this.showComments, this.indexCurrentComment);
}
}, me, comment.uid));
} else { } else {
$('.container-view-comment .toolbar').find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'none');
var template = _.template('<a href="#" class="link done-reply">' + me.textDone + '</a>');
$('.container-view-comment .button-right').append(template);
template = _.template('<a href="#" class="link cancel-reply">' + me.textCancel + '</a>');
$('.container-view-comment .button-left').append(template);
template = _.template('<div class="block-reply"><textarea class="reply-textarea" autofocus placeholder="' + me.textAddReply + '"></textarea></div>');
$('.view-comment .page-content').append(template);
} }
$('.done-reply').single('click', _.bind(function (uid) {
var reply = $('.reply-textarea')[0].value;
var $viewComment = $('.container-view-comment');
if (reply && reply.length > 0) {
this.addReply(uid, reply);
uiApp.closeModal($$(addReplyView));
this.updateViewComment(this.showComments, this.indexCurrentComment);
if (!phone) {
$viewComment.find('a.done-reply, a.cancel-reply').css('display', 'none');
$viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
}
}
}, me, comment.uid));
$('.cancel-reply').single('click', _.bind(function () {
var $viewComment = $('.container-view-comment');
if ($viewComment.find('.block-reply').length > 0) {
$viewComment.find('.block-reply').remove();
}
$viewComment.find('a.done-reply, a.cancel-reply').css('display', 'none');
$viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
}, me));
} }
}, },
@ -1028,14 +1070,14 @@ define([
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div class="pages">' + '<div class="pages">' +
'<div class="page page-add-comment">' + '<div class="page add-comment">' +
'<div class="page-content">' + '<div class="page-content">' +
'<div class="wrap-comment">' + '<div class="wrap-comment">' +
(isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: '+ comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') + (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: '+ comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') +
'<div class="user-name">' + comment.username + '</div>' + '<div class="user-name">' + comment.username + '</div>' +
'<div class="comment-date">' + comment.date + '</div>' + '<div class="comment-date">' + comment.date + '</div>' +
(isAndroid ? '</div></div>' : '') + (isAndroid ? '</div></div>' : '') +
'<div><textarea id="comment-text" class="comment-textarea"></textarea></div>' + '<div><textarea id="comment-text" class="comment-textarea" autofocus></textarea></div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
@ -1054,15 +1096,39 @@ define([
}); });
mainView.hideNavbar(); mainView.hideNavbar();
} else { } else {
modalView = uiApp.popover(
'<div class="popover add-comment">' +
'<div class="popover-inner">' +
'<div class="toolbar toolbar-bottom" style="bottom: 0;">' +
'<div class="toolbar-inner">' +
'<div class="button-left">' +
'<a href="#" class="link close-popover">' + me.textCancel + '</a>' +
'</div>' +
'<div class="button-right">' +
'<a href="#" class="link add-done" id="add-comment">' + me.textAddComment + '</a>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="wrap-comment">' +
(isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: '+ comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') +
'<div class="user-name">' + comment.username + '</div>' +
'<div class="comment-date">' + comment.date + '</div>' +
(isAndroid ? '</div></div>' : '') +
'<div><textarea oo_editor_input="true" id="comment-text" class="comment-textarea" autofocus></textarea></div>' +
'</div>' +
'</div>' +
'</div>',
$$('#context-menu-target')
);
} }
_.delay(function(){
$('#comment-text').focus();
},200);
appPrefix.getController('Toolbar').getView('Toolbar').hideSearch(); appPrefix.getController('Toolbar').getView('Toolbar').hideSearch();
$('#add-comment').single('click', _.bind(me.onAddNewComment, me)); $('#add-comment').single('click', _.bind(me.onAddNewComment, me));
_.defer(function(){
$('#comment-text').focus();
});
}, },
onAddNewComment: function() { onAddNewComment: function() {
@ -1165,7 +1231,7 @@ define([
onCommentMenuClick: function(action, indReply) { onCommentMenuClick: function(action, indReply) {
var me = this; var me = this;
switch (action) { switch (action) {
case 'edit': me.showEditCommentModal(); break; case 'edit': me.showEditComment(); break;
case 'resolve': me.onClickResolveComment(); break; case 'resolve': me.onClickResolveComment(); break;
case 'delete': me.onDeleteComment(me.indexCurrentComment); break; case 'delete': me.onDeleteComment(me.indexCurrentComment); break;
case 'editreply': me.showEditReplyModal(me.indexCurrentComment, indReply); break; case 'editreply': me.showEditReplyModal(me.indexCurrentComment, indReply); break;
@ -1278,7 +1344,7 @@ define([
} }
}, },
showEditCommentModal: function() { showEditComment: function() {
var me = this, var me = this,
isAndroid = Framework7.prototype.device.android === true; isAndroid = Framework7.prototype.device.android === true;
if (this.indexCurrentComment > -1 && this.indexCurrentComment < this.showComments.length) { if (this.indexCurrentComment > -1 && this.indexCurrentComment < this.showComments.length) {
@ -1294,7 +1360,7 @@ define([
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div class="pages">' + '<div class="pages">' +
'<div class="page page-add-comment">' + '<div class="page add-comment">' +
'<div class="page-content">' + '<div class="page-content">' +
'<div class="wrap-comment">' + '<div class="wrap-comment">' +
(isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: '+ comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') + (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: '+ comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') +
@ -1314,19 +1380,28 @@ define([
$textarea.focus(); $textarea.focus();
$textarea.selectionStart = $textarea.value.length; $textarea.selectionStart = $textarea.value.length;
},100); },100);
$('#edit-comment').single('click', _.bind(function (comment) {
var value = $('.comment-textarea')[0].value;
if (value && value.length > 0) {
comment.comment = value;
this.showComments[this.indexCurrentComment] = comment;
this.onChangeComment(comment);
uiApp.closeModal($$(me.editView));
this.updateViewComment();
}
}, me, comment));
} else { } else {
var $viewComment = $('.container-view-comment');
var oldComment = $viewComment.find('.comment-text span').text();
$viewComment.find('.comment-text span').css('display', 'none');
var template = _.template('<textarea id="comment-text" class="comment-textarea">' + oldComment + '</textarea>');
$viewComment.find('.comment-text').append(template);
$viewComment('.toolbar').find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'none');
template = _.template('<a href="#" class="link done-reply" id="edit-comment">' + me.textDone + '</a>');
$viewComment('.button-right').append(template);
template = _.template('<a href="#" class="link cancel-reply">' + me.textCancel + '</a>');
$viewComment('.button-left').append(template);
} }
$('#edit-comment').single('click', _.bind(function (comment) {
var value = $('#comment-text')[0].value;
if (value && value.length > 0) {
comment.comment = value;
this.showComments[this.indexCurrentComment] = comment;
this.onChangeComment(comment);
uiApp.closeModal($$(me.editView));
this.updateViewComment();
}
}, me, comment));
} }
}, },
@ -1353,7 +1428,7 @@ define([
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div class="pages">' + '<div class="pages">' +
'<div class="page page-add-comment">' + '<div class="page add-comment">' +
'<div class="page-content">' + '<div class="page-content">' +
'<div class="wrap-comment">' + '<div class="wrap-comment">' +
(isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: '+ comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') + (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: '+ comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') +

7
apps/common/mobile/lib/view/Collaboration.js
View file

@ -150,7 +150,7 @@ define([
renderViewComments: function(comments, indCurComment) { renderViewComments: function(comments, indCurComment) {
var isAndroid = Framework7.prototype.device.android === true; var isAndroid = Framework7.prototype.device.android === true;
if ($('.page-view-comments .page-content').length > 0) { if ($('.view-comment .page-content').length > 0) {
var template = ''; var template = '';
if (comments && comments.length > 0) { if (comments && comments.length > 0) {
template = '<div class="list-block">' + template = '<div class="list-block">' +
@ -175,7 +175,7 @@ define([
'</div>'; '</div>';
if (comment.quote) template += '<p class="comment-quote" data-ind="' + comment.uid + '">' + comment.quote + '</p>'; if (comment.quote) template += '<p class="comment-quote" data-ind="' + comment.uid + '">' + comment.quote + '</p>';
template += '<p class="comment-text">' + comment.comment + '</p>'; template += '<div class="comment-text"><span>' + comment.comment + '</span></div>';
if (comment.replys.length > 0) { if (comment.replys.length > 0) {
template += '<ul class="list-reply">'; template += '<ul class="list-reply">';
_.each(comment.replys, function (reply) { _.each(comment.replys, function (reply) {
@ -202,9 +202,10 @@ define([
template += '</div>' + template += '</div>' +
'</li>'; '</li>';
template += '</ul></div>'; template += '</ul></div>';
$('.page-view-comments .page-content').html(template); $('.view-comment .page-content').html(template);
} }
} }
Common.Utils.addScrollIfNeed('.view-comment.page', '.view-comment .page-content');
}, },
renderComments: function (comments) { renderComments: function (comments) {

94
apps/common/mobile/resources/less/ios/_collaboration.less
View file

@ -92,7 +92,7 @@
} }
//Comments //Comments
.page-comments, .page-add-comment, .page-view-comments, .container-edit-comment, .container-add-reply { .page-comments, .add-comment, .page-view-comments, .container-edit-comment, .container-add-reply, .view-comment {
.list-block .item-inner { .list-block .item-inner {
display: block; display: block;
padding: 16px 0; padding: 16px 0;
@ -194,7 +194,7 @@
border-top-right-radius: 4px; border-top-right-radius: 4px;
height: 50%; 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); 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; background-color: #FFFFFF;
.list-block { .list-block {
margin-bottom: 100px; margin-bottom: 100px;
@ -236,7 +236,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
a { a {
padding: 0 8px; padding: 0 12px;
} }
} }
} }
@ -256,6 +256,52 @@
.list-block { .list-block {
margin-top: 0; 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 {
width: 260px;
margin-top: 10px;
.reply-textarea {
min-height: 70px;
width: 260px;
border: 1px solid #c4c4c4;
border-radius: 13px;
padding: 5px;
}
}
}
}
}
} }
.container-view-add-comment { .container-view-add-comment {
@ -266,13 +312,34 @@
margin-left: 0; margin-left: 0;
} }
} }
.page-add-comment { .page {
background-color: #FFFFFF; background-color: #FFFFFF;
.page-content { .page-content {
padding: 0 16px 80px; padding: 0 16px 80px;
} }
} }
} }
.popover {
&.add-comment {
.toolbar {
border-radius: 0 0 13px 13px;
}
.toolbar-bottom {
position: absolute;
bottom: 0;
}
.wrap-comment {
padding-bottom: 55px;
}
.comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 150px;
max-height: 300px;
width: 280px;
}
}
}
.container-add-reply { .container-add-reply {
height: 100%; height: 100%;
@ -287,25 +354,6 @@
} }
} }
.icon-arrow-comment {
border: solid black;
border-width: 0 2px 2px 0;
border-color: @themeColor;
height: 12px;
width: 12px;
display: inline-block;
padding: 0;
&.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
&.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
}
.actions-modal-button.color-red { .actions-modal-button.color-red {
color: @red; color: @red;
} }

174
apps/documenteditor/mobile/resources/css/app-ios.css
View file

@ -6480,27 +6480,30 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
content: none; content: none;
} }
.page-comments .list-block .item-inner, .page-comments .list-block .item-inner,
.page-add-comment .list-block .item-inner, .add-comment .list-block .item-inner,
.page-view-comments .list-block .item-inner, .page-view-comments .list-block .item-inner,
.container-edit-comment .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; display: block;
padding: 16px 0; padding: 16px 0;
word-wrap: break-word; word-wrap: break-word;
} }
.page-comments p, .page-comments p,
.page-add-comment p, .add-comment p,
.page-view-comments p, .page-view-comments p,
.container-edit-comment p, .container-edit-comment p,
.container-add-reply p { .container-add-reply p,
.view-comment p {
margin: 0; margin: 0;
word-break: break-word; word-break: break-word;
} }
.page-comments .user-name, .page-comments .user-name,
.page-add-comment .user-name, .add-comment .user-name,
.page-view-comments .user-name, .page-view-comments .user-name,
.container-edit-comment .user-name, .container-edit-comment .user-name,
.container-add-reply .user-name { .container-add-reply .user-name,
.view-comment .user-name {
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
color: #000000; color: #000000;
@ -6508,15 +6511,17 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
font-weight: bold; font-weight: bold;
} }
.page-comments .comment-date, .page-comments .comment-date,
.page-add-comment .comment-date, .add-comment .comment-date,
.page-view-comments .comment-date, .page-view-comments .comment-date,
.container-edit-comment .comment-date, .container-edit-comment .comment-date,
.container-add-reply .comment-date, .container-add-reply .comment-date,
.view-comment .comment-date,
.page-comments .reply-date, .page-comments .reply-date,
.page-add-comment .reply-date, .add-comment .reply-date,
.page-view-comments .reply-date, .page-view-comments .reply-date,
.container-edit-comment .reply-date, .container-edit-comment .reply-date,
.container-add-reply .reply-date { .container-add-reply .reply-date,
.view-comment .reply-date {
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
color: #6d6d72; color: #6d6d72;
@ -6524,15 +6529,17 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
margin-top: 0px; margin-top: 0px;
} }
.page-comments .comment-text, .page-comments .comment-text,
.page-add-comment .comment-text, .add-comment .comment-text,
.page-view-comments .comment-text, .page-view-comments .comment-text,
.container-edit-comment .comment-text, .container-edit-comment .comment-text,
.container-add-reply .comment-text, .container-add-reply .comment-text,
.view-comment .comment-text,
.page-comments .reply-text, .page-comments .reply-text,
.page-add-comment .reply-text, .add-comment .reply-text,
.page-view-comments .reply-text, .page-view-comments .reply-text,
.container-edit-comment .reply-text, .container-edit-comment .reply-text,
.container-add-reply .reply-text { .container-add-reply .reply-text,
.view-comment .reply-text {
color: #000000; color: #000000;
font-size: 15px; font-size: 15px;
line-height: 25px; line-height: 25px;
@ -6541,34 +6548,38 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
padding-right: 15px; padding-right: 15px;
} }
.page-comments .reply-item, .page-comments .reply-item,
.page-add-comment .reply-item, .add-comment .reply-item,
.page-view-comments .reply-item, .page-view-comments .reply-item,
.container-edit-comment .reply-item, .container-edit-comment .reply-item,
.container-add-reply .reply-item { .container-add-reply .reply-item,
.view-comment .reply-item {
margin-top: 15px; margin-top: 15px;
padding-right: 16px; padding-right: 16px;
padding-top: 13px; padding-top: 13px;
} }
.page-comments .reply-item .header-reply, .page-comments .reply-item .header-reply,
.page-add-comment .reply-item .header-reply, .add-comment .reply-item .header-reply,
.page-view-comments .reply-item .header-reply, .page-view-comments .reply-item .header-reply,
.container-edit-comment .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; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.page-comments .reply-item .user-name, .page-comments .reply-item .user-name,
.page-add-comment .reply-item .user-name, .add-comment .reply-item .user-name,
.page-view-comments .reply-item .user-name, .page-view-comments .reply-item .user-name,
.container-edit-comment .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; padding-top: 3px;
} }
.page-comments .reply-item:before, .page-comments .reply-item:before,
.page-add-comment .reply-item:before, .add-comment .reply-item:before,
.page-view-comments .reply-item:before, .page-view-comments .reply-item:before,
.container-edit-comment .reply-item:before, .container-edit-comment .reply-item:before,
.container-add-reply .reply-item:before { .container-add-reply .reply-item:before,
.view-comment .reply-item:before {
content: ''; content: '';
position: absolute; position: absolute;
left: auto; left: auto;
@ -6584,10 +6595,11 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
transform-origin: 50% 100%; transform-origin: 50% 100%;
} }
.page-comments .comment-quote, .page-comments .comment-quote,
.page-add-comment .comment-quote, .add-comment .comment-quote,
.page-view-comments .comment-quote, .page-view-comments .comment-quote,
.container-edit-comment .comment-quote, .container-edit-comment .comment-quote,
.container-add-reply .comment-quote { .container-add-reply .comment-quote,
.view-comment .comment-quote {
color: #446995; color: #446995;
border-left: 1px solid #446995; border-left: 1px solid #446995;
padding-left: 10px; padding-left: 10px;
@ -6595,22 +6607,25 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
font-size: 15px; font-size: 15px;
} }
.page-comments .wrap-comment, .page-comments .wrap-comment,
.page-add-comment .wrap-comment, .add-comment .wrap-comment,
.page-view-comments .wrap-comment, .page-view-comments .wrap-comment,
.container-edit-comment .wrap-comment, .container-edit-comment .wrap-comment,
.container-add-reply .wrap-comment { .container-add-reply .wrap-comment,
.view-comment .wrap-comment {
padding: 16px 16px 0 16px; padding: 16px 16px 0 16px;
} }
.page-comments .comment-textarea, .page-comments .comment-textarea,
.page-add-comment .comment-textarea, .add-comment .comment-textarea,
.page-view-comments .comment-textarea, .page-view-comments .comment-textarea,
.container-edit-comment .comment-textarea, .container-edit-comment .comment-textarea,
.container-add-reply .comment-textarea, .container-add-reply .comment-textarea,
.view-comment .comment-textarea,
.page-comments .reply-textarea, .page-comments .reply-textarea,
.page-add-comment .reply-textarea, .add-comment .reply-textarea,
.page-view-comments .reply-textarea, .page-view-comments .reply-textarea,
.container-edit-comment .reply-textarea, .container-edit-comment .reply-textarea,
.container-add-reply .reply-textarea { .container-add-reply .reply-textarea,
.view-comment .reply-textarea {
margin-top: 10px; margin-top: 10px;
background: transparent; background: transparent;
border: none; border: none;
@ -6638,25 +6653,32 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
height: 50%; 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); 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; background-color: #FFFFFF;
} }
.container-view-comment .page-view-comments .list-block { .container-view-comment .page-view-comments .list-block,
.container-view-comment .view-comment .list-block {
margin-bottom: 100px; margin-bottom: 100px;
} }
.container-view-comment .page-view-comments .list-block ul:before, .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; 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; padding: 0;
} }
.container-view-comment .page-view-comments .list-block .item-inner .header-comment { .container-view-comment .page-view-comments .list-block .item-inner .header-comment,
.container-view-comment .view-comment .list-block .item-inner .header-comment {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-right: 16px; padding-right: 16px;
} }
.container-view-comment .page-view-comments .list-block .item-inner .header-comment .comment-right { .container-view-comment .page-view-comments .list-block .item-inner .header-comment .comment-right,
.container-view-comment .view-comment .list-block .item-inner .header-comment .comment-right {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 70px; width: 70px;
@ -6683,7 +6705,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
justify-content: space-between; justify-content: space-between;
} }
.container-view-comment .toolbar .toolbar-inner .button-right a { .container-view-comment .toolbar .toolbar-inner .button-right a {
padding: 0 8px; padding: 0 12px;
} }
.container-view-comment .swipe-container { .container-view-comment .swipe-container {
display: flex; display: flex;
@ -6700,6 +6722,46 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-view-comment .list-block { .container-view-comment .list-block {
margin-top: 0; 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 {
width: 260px;
margin-top: 10px;
}
.container-view-comment.popover .page .page-content .block-reply .reply-textarea {
min-height: 70px;
width: 260px;
border: 1px solid #c4c4c4;
border-radius: 13px;
padding: 5px;
}
.container-view-add-comment { .container-view-add-comment {
height: 100%; height: 100%;
} }
@ -6709,12 +6771,29 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-view-add-comment .navbar a.link i + span { .container-view-add-comment .navbar a.link i + span {
margin-left: 0; margin-left: 0;
} }
.container-view-add-comment .page-add-comment { .container-view-add-comment .page {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.container-view-add-comment .page-add-comment .page-content { .container-view-add-comment .page .page-content {
padding: 0 16px 80px; padding: 0 16px 80px;
} }
.popover.add-comment .toolbar {
border-radius: 0 0 13px 13px;
}
.popover.add-comment .toolbar-bottom {
position: absolute;
bottom: 0;
}
.popover.add-comment .wrap-comment {
padding-bottom: 55px;
}
.popover.add-comment .comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 150px;
max-height: 300px;
width: 280px;
}
.container-add-reply { .container-add-reply {
height: 100%; height: 100%;
} }
@ -6727,23 +6806,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-add-reply .page { .container-add-reply .page {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.icon-arrow-comment {
border: solid black;
border-width: 0 2px 2px 0;
border-color: #446995;
height: 12px;
width: 12px;
display: inline-block;
padding: 0;
}
.icon-arrow-comment.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.icon-arrow-comment.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.actions-modal-button.color-red { .actions-modal-button.color-red {
color: #ff3b30; color: #ff3b30;
} }
@ -6975,12 +7037,14 @@ i.icon.icon-in-indent {
background-color: #446995; background-color: #446995;
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C20v-1h21v1H1z%20M12%2C16H1v-1h11V16z%20M12%2C12H1v-1h11V12z%20M12%2C8H1V7h11V8z%20M21%2C11.2l0.2%2C0.3L21%2C11.8L16.7%2C16L16%2C15.3l3.8-3.8L16%2C7.7L16.7%2C7L21%2C11.2z%20M22%2C4H1V3h21V4z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C20v-1h21v1H1z%20M12%2C16H1v-1h11V16z%20M12%2C12H1v-1h11V12z%20M12%2C8H1V7h11V8z%20M21%2C11.2l0.2%2C0.3L21%2C11.8L16.7%2C16L16%2C15.3l3.8-3.8L16%2C7.7L16.7%2C7L21%2C11.2z%20M22%2C4H1V3h21V4z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
} }
i.icon.icon-prev { i.icon.icon-prev,
i.icon.icon-prev-comment {
width: 22px; width: 22px;
height: 22px; height: 22px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M16%2C20.5L15%2C21.5L4.5%2C11l0%2C0l0%2C0L15%2C0.5L16%2C1.5L6.6%2C11L16%2C20.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M16%2C20.5L15%2C21.5L4.5%2C11l0%2C0l0%2C0L15%2C0.5L16%2C1.5L6.6%2C11L16%2C20.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
} }
i.icon.icon-next { i.icon.icon-next,
i.icon.icon-next-comment {
width: 22px; width: 22px;
height: 22px; height: 22px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M15.5%2C11L6%2C1.5l1.1-1.1L17.5%2C11l0%2C0l0%2C0L7.1%2C21.5L6%2C20.5L15.5%2C11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M15.5%2C11L6%2C1.5l1.1-1.1L17.5%2C11l0%2C0l0%2C0L7.1%2C21.5L6%2C20.5L15.5%2C11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

4
apps/documenteditor/mobile/resources/css/app-material.css
View file

@ -6853,12 +6853,12 @@ i.icon.icon-resolve-comment.check {
height: 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%2340865C%22%20fill-opacity%3D%220.6%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%22M9%2016.1719L19.5938%205.57812L21%206.98438L9%2018.9844L3.42188%2013.4062L4.82812%2012L9%2016.1719Z%22%20fill%3D%22%2340865C%22%20fill-opacity%3D%220.6%22%2F%3E%3C%2Fsvg%3E");
} }
i.icon.icon-arrow-comment.left { i.icon.icon-prev-comment {
width: 24px; width: 24px;
height: 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%22M15.4219%207.40625L10.8281%2012L15.4219%2016.5938L14.0156%2018L8.01562%2012L14.0156%206L15.4219%207.40625Z%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%22M15.4219%207.40625L10.8281%2012L15.4219%2016.5938L14.0156%2018L8.01562%2012L14.0156%206L15.4219%207.40625Z%22%20fill%3D%22%23446995%22%2F%3E%3C%2Fsvg%3E");
} }
i.icon.icon-arrow-comment.right { i.icon.icon-next-comment {
width: 24px; width: 24px;
height: 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.98438%206L15.9844%2012L9.98438%2018L8.57812%2016.5938L13.1719%2012L8.57812%207.40625L9.98438%206Z%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%22M9.98438%206L15.9844%2012L9.98438%2018L8.57812%2016.5938L13.1719%2012L8.57812%207.40625L9.98438%206Z%22%20fill%3D%22%23446995%22%2F%3E%3C%2Fsvg%3E");

4
apps/documenteditor/mobile/resources/less/ios/_icons.less
View file

@ -150,12 +150,12 @@ i.icon {
height: 22px; height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>'); .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
} }
&.icon-prev { &.icon-prev, &.icon-prev-comment {
width: 22px; width: 22px;
height: 22px; height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>'); .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
} }
&.icon-next { &.icon-next, &.icon-next-comment {
width: 22px; width: 22px;
height: 22px; height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>'); .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');

4
apps/documenteditor/mobile/resources/less/material/_icons.less
View file

@ -419,12 +419,12 @@ i.icon {
height: 24px; height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#40865C" fill-opacity="0.6"/></svg>'); .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#40865C" fill-opacity="0.6"/></svg>');
} }
&.icon-arrow-comment.left { &.icon-prev-comment {
width: 24px; width: 24px;
height: 24px; height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>'); .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>');
} }
&.icon-arrow-comment.right { &.icon-next-comment {
width: 24px; width: 24px;
height: 24px; height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>'); .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>');

168
apps/presentationeditor/mobile/resources/css/app-ios.css
View file

@ -6480,27 +6480,30 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
content: none; content: none;
} }
.page-comments .list-block .item-inner, .page-comments .list-block .item-inner,
.page-add-comment .list-block .item-inner, .add-comment .list-block .item-inner,
.page-view-comments .list-block .item-inner, .page-view-comments .list-block .item-inner,
.container-edit-comment .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; display: block;
padding: 16px 0; padding: 16px 0;
word-wrap: break-word; word-wrap: break-word;
} }
.page-comments p, .page-comments p,
.page-add-comment p, .add-comment p,
.page-view-comments p, .page-view-comments p,
.container-edit-comment p, .container-edit-comment p,
.container-add-reply p { .container-add-reply p,
.view-comment p {
margin: 0; margin: 0;
word-break: break-word; word-break: break-word;
} }
.page-comments .user-name, .page-comments .user-name,
.page-add-comment .user-name, .add-comment .user-name,
.page-view-comments .user-name, .page-view-comments .user-name,
.container-edit-comment .user-name, .container-edit-comment .user-name,
.container-add-reply .user-name { .container-add-reply .user-name,
.view-comment .user-name {
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
color: #000000; color: #000000;
@ -6508,15 +6511,17 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
font-weight: bold; font-weight: bold;
} }
.page-comments .comment-date, .page-comments .comment-date,
.page-add-comment .comment-date, .add-comment .comment-date,
.page-view-comments .comment-date, .page-view-comments .comment-date,
.container-edit-comment .comment-date, .container-edit-comment .comment-date,
.container-add-reply .comment-date, .container-add-reply .comment-date,
.view-comment .comment-date,
.page-comments .reply-date, .page-comments .reply-date,
.page-add-comment .reply-date, .add-comment .reply-date,
.page-view-comments .reply-date, .page-view-comments .reply-date,
.container-edit-comment .reply-date, .container-edit-comment .reply-date,
.container-add-reply .reply-date { .container-add-reply .reply-date,
.view-comment .reply-date {
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
color: #6d6d72; color: #6d6d72;
@ -6524,15 +6529,17 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
margin-top: 0px; margin-top: 0px;
} }
.page-comments .comment-text, .page-comments .comment-text,
.page-add-comment .comment-text, .add-comment .comment-text,
.page-view-comments .comment-text, .page-view-comments .comment-text,
.container-edit-comment .comment-text, .container-edit-comment .comment-text,
.container-add-reply .comment-text, .container-add-reply .comment-text,
.view-comment .comment-text,
.page-comments .reply-text, .page-comments .reply-text,
.page-add-comment .reply-text, .add-comment .reply-text,
.page-view-comments .reply-text, .page-view-comments .reply-text,
.container-edit-comment .reply-text, .container-edit-comment .reply-text,
.container-add-reply .reply-text { .container-add-reply .reply-text,
.view-comment .reply-text {
color: #000000; color: #000000;
font-size: 15px; font-size: 15px;
line-height: 25px; line-height: 25px;
@ -6541,34 +6548,38 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
padding-right: 15px; padding-right: 15px;
} }
.page-comments .reply-item, .page-comments .reply-item,
.page-add-comment .reply-item, .add-comment .reply-item,
.page-view-comments .reply-item, .page-view-comments .reply-item,
.container-edit-comment .reply-item, .container-edit-comment .reply-item,
.container-add-reply .reply-item { .container-add-reply .reply-item,
.view-comment .reply-item {
margin-top: 15px; margin-top: 15px;
padding-right: 16px; padding-right: 16px;
padding-top: 13px; padding-top: 13px;
} }
.page-comments .reply-item .header-reply, .page-comments .reply-item .header-reply,
.page-add-comment .reply-item .header-reply, .add-comment .reply-item .header-reply,
.page-view-comments .reply-item .header-reply, .page-view-comments .reply-item .header-reply,
.container-edit-comment .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; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.page-comments .reply-item .user-name, .page-comments .reply-item .user-name,
.page-add-comment .reply-item .user-name, .add-comment .reply-item .user-name,
.page-view-comments .reply-item .user-name, .page-view-comments .reply-item .user-name,
.container-edit-comment .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; padding-top: 3px;
} }
.page-comments .reply-item:before, .page-comments .reply-item:before,
.page-add-comment .reply-item:before, .add-comment .reply-item:before,
.page-view-comments .reply-item:before, .page-view-comments .reply-item:before,
.container-edit-comment .reply-item:before, .container-edit-comment .reply-item:before,
.container-add-reply .reply-item:before { .container-add-reply .reply-item:before,
.view-comment .reply-item:before {
content: ''; content: '';
position: absolute; position: absolute;
left: auto; left: auto;
@ -6584,10 +6595,11 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
transform-origin: 50% 100%; transform-origin: 50% 100%;
} }
.page-comments .comment-quote, .page-comments .comment-quote,
.page-add-comment .comment-quote, .add-comment .comment-quote,
.page-view-comments .comment-quote, .page-view-comments .comment-quote,
.container-edit-comment .comment-quote, .container-edit-comment .comment-quote,
.container-add-reply .comment-quote { .container-add-reply .comment-quote,
.view-comment .comment-quote {
color: #aa5252; color: #aa5252;
border-left: 1px solid #aa5252; border-left: 1px solid #aa5252;
padding-left: 10px; padding-left: 10px;
@ -6595,22 +6607,25 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
font-size: 15px; font-size: 15px;
} }
.page-comments .wrap-comment, .page-comments .wrap-comment,
.page-add-comment .wrap-comment, .add-comment .wrap-comment,
.page-view-comments .wrap-comment, .page-view-comments .wrap-comment,
.container-edit-comment .wrap-comment, .container-edit-comment .wrap-comment,
.container-add-reply .wrap-comment { .container-add-reply .wrap-comment,
.view-comment .wrap-comment {
padding: 16px 16px 0 16px; padding: 16px 16px 0 16px;
} }
.page-comments .comment-textarea, .page-comments .comment-textarea,
.page-add-comment .comment-textarea, .add-comment .comment-textarea,
.page-view-comments .comment-textarea, .page-view-comments .comment-textarea,
.container-edit-comment .comment-textarea, .container-edit-comment .comment-textarea,
.container-add-reply .comment-textarea, .container-add-reply .comment-textarea,
.view-comment .comment-textarea,
.page-comments .reply-textarea, .page-comments .reply-textarea,
.page-add-comment .reply-textarea, .add-comment .reply-textarea,
.page-view-comments .reply-textarea, .page-view-comments .reply-textarea,
.container-edit-comment .reply-textarea, .container-edit-comment .reply-textarea,
.container-add-reply .reply-textarea { .container-add-reply .reply-textarea,
.view-comment .reply-textarea {
margin-top: 10px; margin-top: 10px;
background: transparent; background: transparent;
border: none; border: none;
@ -6638,25 +6653,32 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
height: 50%; 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); 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; background-color: #FFFFFF;
} }
.container-view-comment .page-view-comments .list-block { .container-view-comment .page-view-comments .list-block,
.container-view-comment .view-comment .list-block {
margin-bottom: 100px; margin-bottom: 100px;
} }
.container-view-comment .page-view-comments .list-block ul:before, .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; 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; padding: 0;
} }
.container-view-comment .page-view-comments .list-block .item-inner .header-comment { .container-view-comment .page-view-comments .list-block .item-inner .header-comment,
.container-view-comment .view-comment .list-block .item-inner .header-comment {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-right: 16px; padding-right: 16px;
} }
.container-view-comment .page-view-comments .list-block .item-inner .header-comment .comment-right { .container-view-comment .page-view-comments .list-block .item-inner .header-comment .comment-right,
.container-view-comment .view-comment .list-block .item-inner .header-comment .comment-right {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 70px; width: 70px;
@ -6683,7 +6705,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
justify-content: space-between; justify-content: space-between;
} }
.container-view-comment .toolbar .toolbar-inner .button-right a { .container-view-comment .toolbar .toolbar-inner .button-right a {
padding: 0 8px; padding: 0 12px;
} }
.container-view-comment .swipe-container { .container-view-comment .swipe-container {
display: flex; display: flex;
@ -6700,6 +6722,46 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-view-comment .list-block { .container-view-comment .list-block {
margin-top: 0; 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 {
width: 260px;
margin-top: 10px;
}
.container-view-comment.popover .page .page-content .block-reply .reply-textarea {
min-height: 70px;
width: 260px;
border: 1px solid #c4c4c4;
border-radius: 13px;
padding: 5px;
}
.container-view-add-comment { .container-view-add-comment {
height: 100%; height: 100%;
} }
@ -6709,12 +6771,29 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-view-add-comment .navbar a.link i + span { .container-view-add-comment .navbar a.link i + span {
margin-left: 0; margin-left: 0;
} }
.container-view-add-comment .page-add-comment { .container-view-add-comment .page {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.container-view-add-comment .page-add-comment .page-content { .container-view-add-comment .page .page-content {
padding: 0 16px 80px; padding: 0 16px 80px;
} }
.popover.add-comment .toolbar {
border-radius: 0 0 13px 13px;
}
.popover.add-comment .toolbar-bottom {
position: absolute;
bottom: 0;
}
.popover.add-comment .wrap-comment {
padding-bottom: 55px;
}
.popover.add-comment .comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 150px;
max-height: 300px;
width: 280px;
}
.container-add-reply { .container-add-reply {
height: 100%; height: 100%;
} }
@ -6727,23 +6806,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-add-reply .page { .container-add-reply .page {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.icon-arrow-comment {
border: solid black;
border-width: 0 2px 2px 0;
border-color: #aa5252;
height: 12px;
width: 12px;
display: inline-block;
padding: 0;
}
.icon-arrow-comment.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.icon-arrow-comment.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.actions-modal-button.color-red { .actions-modal-button.color-red {
color: #ff3b30; color: #ff3b30;
} }

168
apps/spreadsheeteditor/mobile/resources/css/app-ios.css
View file

@ -6480,27 +6480,30 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
content: none; content: none;
} }
.page-comments .list-block .item-inner, .page-comments .list-block .item-inner,
.page-add-comment .list-block .item-inner, .add-comment .list-block .item-inner,
.page-view-comments .list-block .item-inner, .page-view-comments .list-block .item-inner,
.container-edit-comment .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; display: block;
padding: 16px 0; padding: 16px 0;
word-wrap: break-word; word-wrap: break-word;
} }
.page-comments p, .page-comments p,
.page-add-comment p, .add-comment p,
.page-view-comments p, .page-view-comments p,
.container-edit-comment p, .container-edit-comment p,
.container-add-reply p { .container-add-reply p,
.view-comment p {
margin: 0; margin: 0;
word-break: break-word; word-break: break-word;
} }
.page-comments .user-name, .page-comments .user-name,
.page-add-comment .user-name, .add-comment .user-name,
.page-view-comments .user-name, .page-view-comments .user-name,
.container-edit-comment .user-name, .container-edit-comment .user-name,
.container-add-reply .user-name { .container-add-reply .user-name,
.view-comment .user-name {
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
color: #000000; color: #000000;
@ -6508,15 +6511,17 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
font-weight: bold; font-weight: bold;
} }
.page-comments .comment-date, .page-comments .comment-date,
.page-add-comment .comment-date, .add-comment .comment-date,
.page-view-comments .comment-date, .page-view-comments .comment-date,
.container-edit-comment .comment-date, .container-edit-comment .comment-date,
.container-add-reply .comment-date, .container-add-reply .comment-date,
.view-comment .comment-date,
.page-comments .reply-date, .page-comments .reply-date,
.page-add-comment .reply-date, .add-comment .reply-date,
.page-view-comments .reply-date, .page-view-comments .reply-date,
.container-edit-comment .reply-date, .container-edit-comment .reply-date,
.container-add-reply .reply-date { .container-add-reply .reply-date,
.view-comment .reply-date {
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
color: #6d6d72; color: #6d6d72;
@ -6524,15 +6529,17 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
margin-top: 0px; margin-top: 0px;
} }
.page-comments .comment-text, .page-comments .comment-text,
.page-add-comment .comment-text, .add-comment .comment-text,
.page-view-comments .comment-text, .page-view-comments .comment-text,
.container-edit-comment .comment-text, .container-edit-comment .comment-text,
.container-add-reply .comment-text, .container-add-reply .comment-text,
.view-comment .comment-text,
.page-comments .reply-text, .page-comments .reply-text,
.page-add-comment .reply-text, .add-comment .reply-text,
.page-view-comments .reply-text, .page-view-comments .reply-text,
.container-edit-comment .reply-text, .container-edit-comment .reply-text,
.container-add-reply .reply-text { .container-add-reply .reply-text,
.view-comment .reply-text {
color: #000000; color: #000000;
font-size: 15px; font-size: 15px;
line-height: 25px; line-height: 25px;
@ -6541,34 +6548,38 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
padding-right: 15px; padding-right: 15px;
} }
.page-comments .reply-item, .page-comments .reply-item,
.page-add-comment .reply-item, .add-comment .reply-item,
.page-view-comments .reply-item, .page-view-comments .reply-item,
.container-edit-comment .reply-item, .container-edit-comment .reply-item,
.container-add-reply .reply-item { .container-add-reply .reply-item,
.view-comment .reply-item {
margin-top: 15px; margin-top: 15px;
padding-right: 16px; padding-right: 16px;
padding-top: 13px; padding-top: 13px;
} }
.page-comments .reply-item .header-reply, .page-comments .reply-item .header-reply,
.page-add-comment .reply-item .header-reply, .add-comment .reply-item .header-reply,
.page-view-comments .reply-item .header-reply, .page-view-comments .reply-item .header-reply,
.container-edit-comment .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; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.page-comments .reply-item .user-name, .page-comments .reply-item .user-name,
.page-add-comment .reply-item .user-name, .add-comment .reply-item .user-name,
.page-view-comments .reply-item .user-name, .page-view-comments .reply-item .user-name,
.container-edit-comment .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; padding-top: 3px;
} }
.page-comments .reply-item:before, .page-comments .reply-item:before,
.page-add-comment .reply-item:before, .add-comment .reply-item:before,
.page-view-comments .reply-item:before, .page-view-comments .reply-item:before,
.container-edit-comment .reply-item:before, .container-edit-comment .reply-item:before,
.container-add-reply .reply-item:before { .container-add-reply .reply-item:before,
.view-comment .reply-item:before {
content: ''; content: '';
position: absolute; position: absolute;
left: auto; left: auto;
@ -6584,10 +6595,11 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
transform-origin: 50% 100%; transform-origin: 50% 100%;
} }
.page-comments .comment-quote, .page-comments .comment-quote,
.page-add-comment .comment-quote, .add-comment .comment-quote,
.page-view-comments .comment-quote, .page-view-comments .comment-quote,
.container-edit-comment .comment-quote, .container-edit-comment .comment-quote,
.container-add-reply .comment-quote { .container-add-reply .comment-quote,
.view-comment .comment-quote {
color: #40865c; color: #40865c;
border-left: 1px solid #40865c; border-left: 1px solid #40865c;
padding-left: 10px; padding-left: 10px;
@ -6595,22 +6607,25 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
font-size: 15px; font-size: 15px;
} }
.page-comments .wrap-comment, .page-comments .wrap-comment,
.page-add-comment .wrap-comment, .add-comment .wrap-comment,
.page-view-comments .wrap-comment, .page-view-comments .wrap-comment,
.container-edit-comment .wrap-comment, .container-edit-comment .wrap-comment,
.container-add-reply .wrap-comment { .container-add-reply .wrap-comment,
.view-comment .wrap-comment {
padding: 16px 16px 0 16px; padding: 16px 16px 0 16px;
} }
.page-comments .comment-textarea, .page-comments .comment-textarea,
.page-add-comment .comment-textarea, .add-comment .comment-textarea,
.page-view-comments .comment-textarea, .page-view-comments .comment-textarea,
.container-edit-comment .comment-textarea, .container-edit-comment .comment-textarea,
.container-add-reply .comment-textarea, .container-add-reply .comment-textarea,
.view-comment .comment-textarea,
.page-comments .reply-textarea, .page-comments .reply-textarea,
.page-add-comment .reply-textarea, .add-comment .reply-textarea,
.page-view-comments .reply-textarea, .page-view-comments .reply-textarea,
.container-edit-comment .reply-textarea, .container-edit-comment .reply-textarea,
.container-add-reply .reply-textarea { .container-add-reply .reply-textarea,
.view-comment .reply-textarea {
margin-top: 10px; margin-top: 10px;
background: transparent; background: transparent;
border: none; border: none;
@ -6638,25 +6653,32 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
height: 50%; 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); 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; background-color: #FFFFFF;
} }
.container-view-comment .page-view-comments .list-block { .container-view-comment .page-view-comments .list-block,
.container-view-comment .view-comment .list-block {
margin-bottom: 100px; margin-bottom: 100px;
} }
.container-view-comment .page-view-comments .list-block ul:before, .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; 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; padding: 0;
} }
.container-view-comment .page-view-comments .list-block .item-inner .header-comment { .container-view-comment .page-view-comments .list-block .item-inner .header-comment,
.container-view-comment .view-comment .list-block .item-inner .header-comment {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-right: 16px; padding-right: 16px;
} }
.container-view-comment .page-view-comments .list-block .item-inner .header-comment .comment-right { .container-view-comment .page-view-comments .list-block .item-inner .header-comment .comment-right,
.container-view-comment .view-comment .list-block .item-inner .header-comment .comment-right {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 70px; width: 70px;
@ -6683,7 +6705,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
justify-content: space-between; justify-content: space-between;
} }
.container-view-comment .toolbar .toolbar-inner .button-right a { .container-view-comment .toolbar .toolbar-inner .button-right a {
padding: 0 8px; padding: 0 12px;
} }
.container-view-comment .swipe-container { .container-view-comment .swipe-container {
display: flex; display: flex;
@ -6700,6 +6722,46 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-view-comment .list-block { .container-view-comment .list-block {
margin-top: 0; 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 {
width: 260px;
margin-top: 10px;
}
.container-view-comment.popover .page .page-content .block-reply .reply-textarea {
min-height: 70px;
width: 260px;
border: 1px solid #c4c4c4;
border-radius: 13px;
padding: 5px;
}
.container-view-add-comment { .container-view-add-comment {
height: 100%; height: 100%;
} }
@ -6709,12 +6771,29 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-view-add-comment .navbar a.link i + span { .container-view-add-comment .navbar a.link i + span {
margin-left: 0; margin-left: 0;
} }
.container-view-add-comment .page-add-comment { .container-view-add-comment .page {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.container-view-add-comment .page-add-comment .page-content { .container-view-add-comment .page .page-content {
padding: 0 16px 80px; padding: 0 16px 80px;
} }
.popover.add-comment .toolbar {
border-radius: 0 0 13px 13px;
}
.popover.add-comment .toolbar-bottom {
position: absolute;
bottom: 0;
}
.popover.add-comment .wrap-comment {
padding-bottom: 55px;
}
.popover.add-comment .comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 150px;
max-height: 300px;
width: 280px;
}
.container-add-reply { .container-add-reply {
height: 100%; height: 100%;
} }
@ -6727,23 +6806,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-add-reply .page { .container-add-reply .page {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.icon-arrow-comment {
border: solid black;
border-width: 0 2px 2px 0;
border-color: #40865c;
height: 12px;
width: 12px;
display: inline-block;
padding: 0;
}
.icon-arrow-comment.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.icon-arrow-comment.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.actions-modal-button.color-red { .actions-modal-button.color-red {
color: #ff3b30; color: #ff3b30;
} }