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

[de mobile] fix bug with overlay, add: edit comment, edit reply for iPad

Browse source
This commit is contained in:
JuliaSvinareva 2020-03-25 15:23:46 +03:00
parent 9621eab6b6
commit cc94f8bd3c
5 changed files with 315 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -738,8 +738,7 @@ define([
var me = this,
isAndroid = Framework7.prototype.device.android === true,
appPrefix = !!window.DE ? DE : !!window.PE ? PE : SSE,
mainView = appPrefix.getController('Editor').getView('Editor').f7View,
viewCollaboration = appPrefix.getController('Common.Controllers.Collaboration').getView('Common.Views.Collaboration');
mainView = appPrefix.getController('Editor').getView('Editor').f7View;
me.indexCurrentComment = 0;
@ -804,11 +803,7 @@ define([
$$('#toolbar-collaboration')
);
}
appPrefix.getController('Toolbar').getView('Toolbar').hideSearch();
_.delay(function () {
viewCollaboration.renderViewComments(me.showComments, me.indexCurrentComment);
me.getView('Common.Views.Collaboration').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));
@ -819,7 +814,8 @@ define([
if (me.showComments.length === 1) {
$('.prev-comment, .next-comment').addClass('disabled');
}
}, 300);
appPrefix.getController('Toolbar').getView('Toolbar').hideSearch();
//swipe modal window
if ($('.swipe-container').length > 0) {
@ -1118,7 +1114,7 @@ define([
'</div>' +
'</div>' +
'</div>',
$$('#context-menu-target')
$$('#toolbar-collaboration')
);
}
@ -1159,6 +1155,7 @@ define([
},
initMenuComments: function() {
if ($('.actions-modal').length === 0) {
var me = this;
_.delay(function () {
var _menuItems = [];
@ -1189,13 +1186,17 @@ define([
}
});
uiApp.actions([_menuItems, [
me.menuComments = uiApp.actions([_menuItems, [
{
text: me.textCancel,
bold: true
bold: true,
onClick: function () {
me.onCommentMenuClick();
}
}
]]);
}, 100);
}
},
initReplyMenu: function(event) {
@ -1218,11 +1219,13 @@ define([
me.onCommentMenuClick(item.event, ind);
}
});
uiApp.actions([_menuItems, [
{
text: me.textCancel,
bold: true
bold: true,
onClick: function () {
me.onCommentMenuClick();
}
}
]]);
}, 100);
@ -1230,12 +1233,38 @@ define([
onCommentMenuClick: function(action, indReply) {
var me = this;
function addOverlay () {
if (!Common.SharedSettings.get('phone')) {
var $overlay = $('.modal-overlay');
if (!$overlay.hasClass('modal-overlay-visible')) {
$overlay.addClass('modal-overlay-visible')
}
}
}
switch (action) {
case 'edit': me.showEditComment(); break;
case 'resolve': me.onClickResolveComment(); break;
case 'delete': me.onDeleteComment(me.indexCurrentComment); break;
case 'editreply': me.showEditReplyModal(me.indexCurrentComment, indReply); break;
case 'deletereply': me.onDeleteReply(me.indexCurrentComment, indReply); break;
case 'edit':
addOverlay();
me.showEditComment();
break;
case 'resolve':
addOverlay();
me.onClickResolveComment();
break;
case 'delete':
addOverlay();
me.onDeleteComment(me.indexCurrentComment);
break;
case 'editreply':
addOverlay();
me.showEditReplyModal(me.indexCurrentComment, indReply);
break;
case 'deletereply':
addOverlay();
me.onDeleteReply(me.indexCurrentComment, indReply);
break;
default:
addOverlay();
break;
}
},
@ -1381,16 +1410,24 @@ define([
$textarea.selectionStart = $textarea.value.length;
},100);
} else {
if ($('.comment-textarea').length === 0) {
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');
$viewComment.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);
$viewComment.find('.button-right').append(template);
template = _.template('<a href="#" class="link cancel-reply">' + me.textCancel + '</a>');
$viewComment('.button-left').append(template);
$viewComment.find('.button-left').append(template);
_.delay(function () {
var $textarea = $viewComment.find('.comment-textarea')[0];
$textarea.focus();
$textarea.selectionStart = $textarea.value.length;
}, 50);
}
}
$('#edit-comment').single('click', _.bind(function (comment) {
var value = $('#comment-text')[0].value;
@ -1398,10 +1435,22 @@ define([
comment.comment = value;
this.showComments[this.indexCurrentComment] = comment;
this.onChangeComment(comment);
if (Common.SharedSettings.get('phone')) {
uiApp.closeModal($$(me.editView));
} else {
var $viewComment = $('.container-view-comment');
$viewComment.find('a.done-reply, a.cancel-reply').remove();
$viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
}
this.updateViewComment();
}
}, me, comment));
$('.cancel-reply').single('click', _.bind(function () {
var $viewComment = $('.container-view-comment');
$viewComment.find('a.done-reply, a.cancel-reply, .comment-textarea').remove();
$viewComment.find('.comment-text span').css('display', 'block');
$viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
}, me));
}
},
@ -1435,7 +1484,7 @@ define([
'<div class="user-name">' + reply.username + '</div>' +
'<div class="comment-date">' + reply.date + '</div>' +
(isAndroid ? '</div></div>' : '') +
'<div><textarea id="comment-text" class="reply-textarea">' + reply.reply + '</textarea></div>' +
'<div><textarea id="comment-text" class="edit-reply-textarea">' + reply.reply + '</textarea></div>' +
'</div>' +
'</div>' +
'</div>' +
@ -1444,20 +1493,47 @@ define([
);
$('.popup').css('z-index', '20000');
_.delay(function () {
var $textarea = $('.reply-textarea')[0];
var $textarea = $('.edit-reply-textarea')[0];
$textarea.focus();
$textarea.selectionStart = $textarea.value.length;
},100);
} else {
var $reply = $('.reply-item[data-ind=' + indReply + ']');
var $viewComment = $('.container-view-comment');
$reply.find('.reply-text').css('display', 'none');
$viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'none');
var template = _.template('<textarea class="edit-reply-textarea">' + reply.reply + '</textarea>');
$reply.append(template);
template = _.template('<a href="#" class="link done-reply" id="edit-reply">' + me.textDone + '</a>');
$viewComment.find('.button-right').append(template);
template = _.template('<a href="#" class="link cancel-reply">' + me.textCancel + '</a>');
$viewComment.find('.button-left').append(template);
_.delay(function () {
var $textarea = $viewComment.find('.edit-reply-textarea')[0];
$textarea.focus();
$textarea.selectionStart = $textarea.value.length;
}, 50);
}
$('#edit-reply').single('click', _.bind(function (comment, indReply) {
var value = $('.reply-textarea')[0].value;
var value = $('.edit-reply-textarea')[0].value;
if (value && value.length > 0) {
comment.replys[indReply].reply = value;
this.onChangeComment(comment);
if (Common.SharedSettings.get('phone')) {
uiApp.closeModal($$(editView));
} else {
$viewComment.find('a.done-reply, a.cancel-reply').remove();
$viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
}
this.updateViewComment();
}
}, me, comment, indReply));
$('.cancel-reply').single('click', _.bind(function () {
$viewComment.find('a.done-reply, a.cancel-reply, .edit-reply-textarea').remove();
$reply.find('.reply-text').css('display', 'block');
$viewComment.find('a.prev-comment, a.next-comment, a.add-reply').css('display', 'flex');
}, me));
}
}
},

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

@ -193,7 +193,10 @@
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 50%;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12);
.pages {
background-color: #FFFFFF;
}
.page-view-comments, .view-comment {
background-color: #FFFFFF;
.list-block {
@ -288,16 +291,37 @@
}
.block-reply {
width: 260px;
margin-top: 10px;
.reply-textarea {
min-height: 70px;
width: 260px;
width: 278px;
border: 1px solid #c4c4c4;
border-radius: 13px;
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;
}
}
}
}
@ -321,20 +345,31 @@
}
.popover {
&.add-comment {
.toolbar {
border-radius: 0 0 13px 13px;
}
.toolbar-bottom {
position: absolute;
bottom: 0;
}
.toolbar {
position: absolute;
background-color: #FFFFFF;
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);
border-radius: 0 0 13px 13px;
&:before {
content: none;
}
.toolbar-inner {
display: flex;
justify-content: space-between;
padding: 0 16px;
}
}
.wrap-comment {
padding-bottom: 55px;
padding-bottom: 80px;
}
.comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 150px;
min-height: 80px;
max-height: 300px;
width: 280px;
}

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

@ -6651,7 +6651,10 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 50%;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12);
}
.container-view-comment .pages {
background-color: #FFFFFF;
}
.container-view-comment .page-view-comments,
.container-view-comment .view-comment {
@ -6752,16 +6755,34 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
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;
width: 278px;
border: 1px solid #c4c4c4;
border-radius: 13px;
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;
}
.container-view-add-comment {
height: 100%;
}
@ -6777,20 +6798,31 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-view-add-comment .page .page-content {
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 .toolbar {
position: absolute;
background-color: #FFFFFF;
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);
border-radius: 0 0 13px 13px;
}
.popover.add-comment .toolbar:before {
content: none;
}
.popover.add-comment .toolbar .toolbar-inner {
display: flex;
justify-content: space-between;
padding: 0 16px;
}
.popover.add-comment .wrap-comment {
padding-bottom: 55px;
padding-bottom: 80px;
}
.popover.add-comment .comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 150px;
min-height: 80px;
max-height: 300px;
width: 280px;
}

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

@ -6651,7 +6651,10 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 50%;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12);
}
.container-view-comment .pages {
background-color: #FFFFFF;
}
.container-view-comment .page-view-comments,
.container-view-comment .view-comment {
@ -6752,16 +6755,34 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
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;
width: 278px;
border: 1px solid #c4c4c4;
border-radius: 13px;
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;
}
.container-view-add-comment {
height: 100%;
}
@ -6777,20 +6798,31 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-view-add-comment .page .page-content {
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 .toolbar {
position: absolute;
background-color: #FFFFFF;
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);
border-radius: 0 0 13px 13px;
}
.popover.add-comment .toolbar:before {
content: none;
}
.popover.add-comment .toolbar .toolbar-inner {
display: flex;
justify-content: space-between;
padding: 0 16px;
}
.popover.add-comment .wrap-comment {
padding-bottom: 55px;
padding-bottom: 80px;
}
.popover.add-comment .comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 150px;
min-height: 80px;
max-height: 300px;
width: 280px;
}

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

@ -6651,7 +6651,10 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 50%;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12);
}
.container-view-comment .pages {
background-color: #FFFFFF;
}
.container-view-comment .page-view-comments,
.container-view-comment .view-comment {
@ -6752,16 +6755,34 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
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;
width: 278px;
border: 1px solid #c4c4c4;
border-radius: 13px;
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;
}
.container-view-add-comment {
height: 100%;
}
@ -6777,20 +6798,31 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
.container-view-add-comment .page .page-content {
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 .toolbar {
position: absolute;
background-color: #FFFFFF;
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);
border-radius: 0 0 13px 13px;
}
.popover.add-comment .toolbar:before {
content: none;
}
.popover.add-comment .toolbar .toolbar-inner {
display: flex;
justify-content: space-between;
padding: 0 16px;
}
.popover.add-comment .wrap-comment {
padding-bottom: 55px;
padding-bottom: 80px;
}
.popover.add-comment .comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 150px;
min-height: 80px;
max-height: 300px;
width: 280px;
}