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

[de mobile] add comment move to add other

Browse source
This commit is contained in:
JuliaSvinareva 2020-03-30 19:52:13 +03:00
parent cc94f8bd3c
commit 23f6028575
15 changed files with 375 additions and 285 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -685,6 +685,32 @@ define([
},
//Comments
getCurrentUser: function () {
var me = this;
_.each(editUsers, function(item){
if (item.asc_getIdOriginal() === _userId) {
me.currentUser = item;
}
});
return me.currentUser;
},
getCommentInfo: function () {
this.getCurrentUser();
if (this.currentUser) {
var date = new Date();
var comment = {
time: date.getTime(),
date: this.dateToLocaleTimeString(date),
userid: _userId,
username: this.currentUser.asc_getUserName(),
usercolor: this.currentUser.asc_getColor(),
userInitials: this.getInitials(this.currentUser.asc_getUserName())
};
return comment;
}
},
getInitials: function(name) {
var fio = name.split(' ');
var initials = fio[0].substring(0, 1).toUpperCase();
@ -1014,11 +1040,7 @@ define([
addReply.asc_putText(replyVal);
addReply.asc_putTime(me.utcDateToString(new Date()));
addReply.asc_putOnlyOfficeTime(me.ooDateToString(new Date()));
_.each(editUsers, function(item){
if (item.asc_getIdOriginal() === _userId) {
me.currentUser = item;
}
});
me.getCurrentUser();
addReply.asc_putUserId(_userId);
addReply.asc_putUserName(me.currentUser.asc_getUserName());
@ -1030,104 +1052,7 @@ define([
}
},
showAddCommentModal: function() {
var me = this,
isAndroid = Framework7.prototype.device.android === true,
modalView,
appPrefix = !!window.DE ? DE : !!window.PE ? PE : SSE,
mainView = appPrefix.getController('Editor').getView('Editor').f7View;
uiApp.closeModal();
var date = new Date();
_.each(editUsers, function(item){
if (item.asc_getIdOriginal() === _userId) {
me.currentUser = item;
}
});
if (!me.currentUser) return;
var comment = {
time: date.getTime(),
date: me.dateToLocaleTimeString(date),
userid: _userId,
username: me.currentUser.asc_getUserName(),
usercolor: me.currentUser.asc_getColor(),
userInitials: me.getInitials(me.currentUser.asc_getUserName())
};
if (Common.SharedSettings.get('phone')) {
modalView = $$(uiApp.popup(
'<div class="popup container-view-add-comment">' +
'<div class="navbar">' +
'<div class="navbar-inner">' +
'<div class="left sliding"><a href="#" class="back link close-picker"> <i class="icon icon-close-comment"></i>' + (!isAndroid ? '<span>' + me.textCancel + '</span>' : '') + '</a></div>' +
'<div class="center sliding">' + me.textAddComment + '</div>' +
'<div class="right sliding"><a href="#" class="link" id="add-comment"><i class="icon icon-done-comment"></i>' + (!isAndroid ? '<span>' + me.textDone + '</span>' : '') + '</a></div>' +
'</div>' +
'</div>' +
'<div class="pages">' +
'<div class="page add-comment">' +
'<div class="page-content">' +
'<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 id="comment-text" class="comment-textarea" autofocus></textarea></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
)).on('opened', function () {
if (_.isFunction(me.api.asc_OnShowContextMenu)) {
me.api.asc_OnShowContextMenu()
}
}).on('close', function (e) {
mainView.showNavbar();
}).on('closed', function () {
if (_.isFunction(me.api.asc_OnHideContextMenu)) {
me.api.asc_OnHideContextMenu()
}
});
mainView.hideNavbar();
} else {
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>',
$$('#toolbar-collaboration')
);
}
appPrefix.getController('Toolbar').getView('Toolbar').hideSearch();
$('#add-comment').single('click', _.bind(me.onAddNewComment, me));
_.defer(function(){
$('#comment-text').focus();
});
},
onAddNewComment: function() {
onAddNewComment: function(value) {
var comment;
if (typeof Asc.asc_CCommentDataWord !== 'undefined') {
comment = new Asc.asc_CCommentDataWord(null);
@ -1135,7 +1060,7 @@ define([
comment = new Asc.asc_CCommentData(null);
}
var textComment = $('#comment-text').val();
var textComment = value;
if (textComment.length > 0) {
comment.asc_putText(textComment);

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

@ -102,6 +102,9 @@
margin: 0;
word-break: break-word;
}
.list-reply {
padding-left: 32px;
}
.user-name {
font-size: 17px;
line-height: 22px;
@ -328,54 +331,36 @@
}
}
.container-view-add-comment {
height: 100%;
.navbar {
background-color: #FFFFFF;
a.link i + span {
margin-left: 0;
#done-comment {
color: @themeColor;
}
.page-add-comment {
background-color: #FFFFFF;
.wrap-comment {
padding: 16px 16px 0 16px;
.header-comment {
justify-content: flex-start;
}
}
.page {
background-color: #FFFFFF;
.page-content {
padding: 0 16px 80px;
.user-name {
font-weight: bold;
}
.comment-date {
font-size: 12px;
color: #6d6d72;
}
.wrap-textarea {
margin-top: 16px;
padding-right: 6px;
.comment-textarea {
border: 1px solid #c4c4c4;
margin-top: 0;
min-height: 100px;
border-radius: 4px;
width: 100%;
}
}
}
}
.popover {
&.add-comment {
.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: 80px;
}
.comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 80px;
max-height: 300px;
width: 280px;
}
}
}
.container-add-reply {
height: 100%;
.navbar {

33
apps/common/mobile/resources/less/material/_collaboration.less
View file

@ -100,6 +100,9 @@
margin: 0;
word-break: break-word;
}
.list-reply {
padding-left: 32px;
}
.user-name {
font-size: 16px;
line-height: 22px;
@ -282,7 +285,35 @@
}
}
.container-view-add-comment, .container-edit-comment, .container-add-reply, container-edit-comment {
#done-comment {
padding: 0 16px;
}
.page-add-comment {
.wrap-comment {
padding: 16px 16px 0 16px;
.header-comment {
justify-content: flex-start;
}
.user-name {
font-weight: bold;
}
.comment-date {
font-size: 12px;
color: #6d6d72;
}
.wrap-textarea {
padding-right: 6px;
.comment-textarea {
border: 1px solid #c4c4c4;
margin-top: 0;
min-height: 100px;
border-radius: 4px;
}
}
}
}
.container-edit-comment, .container-add-reply, container-edit-comment {
height: 100%;
.navbar {
background-color: #FFFFFF;

8
apps/documenteditor/mobile/app/controller/DocumentHolder.js
View file

@ -164,11 +164,9 @@ define([
var getCollaboration = DE.getController('Common.Controllers.Collaboration');
getCollaboration.showCommentModal();
} else if ('addcomment' == eventName) {
var getCollaboration = DE.getController('Common.Controllers.Collaboration');
/*if (this.api && this.mode.canCoAuthoring && this.mode.canComments) {
}*/
getCollaboration.showAddCommentModal();
_view.hideMenu();
DE.getController('AddContainer').showModal();
DE.getController('AddOther').getView('AddOther').showPageComment(false);
} else if ('showActionSheet' == eventName && _actionSheets.length > 0) {
_.delay(function () {
_.each(_actionSheets, function (action) {

17
apps/documenteditor/mobile/app/controller/add/AddOther.js
View file

@ -111,10 +111,27 @@ define([
}
} else if (pageId == '#addother-insert-footnote') {
me.initInsertFootnote();
} else if (pageId === "#addother-insert-comment") {
me.initInsertComment();
}
},
// Handlers
initInsertComment: function () {
var comment = DE.getController('Common.Controllers.Collaboration').getCommentInfo();
if (comment) {
this.getView('AddOther').renderComment(comment);
$('#done-comment').single('click', _.bind(this.onDoneComment, this));
}
},
onDoneComment: function() {
var value = $('#comment-text').val();
if (value.length > 0) {
DE.getController('Common.Controllers.Collaboration').onAddNewComment(value);
DE.getController('AddContainer').hideModal();
}
},
initInsertFootnote: function () {
var me = this,

30
apps/documenteditor/mobile/app/template/AddOther.template
View file

@ -74,6 +74,18 @@
</div>
</a>
</li>
<li>
<a id="add-other-comment" class="item-link">
<div class="item-content">
<div class="item-media">
<i class="icon icon-insert-comment"></i>
</div>
<div class="item-inner">
<div class="item-title"><%= scope.textComment %></div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
@ -325,3 +337,21 @@
</div>
</div>
</div>
<!-- Page Insert Comment view -->
<div id="addother-insert-comment">
<div class="navbar">
<div class="navbar-inner">
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
<div class="center sliding"><%= scope.textAddComment %></div>
<div class="right sliding"><a id="done-comment"><% if (android) { %><i class="icon icon-done-comment"></i><% } else { %><%= scope.textDone %><% } %></a></div>
</div>
</div>
<div class="page page-add-comment" data-page="addother-insert-comment">
<div class="page-content">
<div id="comment-info" class="wrap-comment">
</div>
</div>
</div>
</div>

27
apps/documenteditor/mobile/app/view/add/AddOther.js
View file

@ -70,6 +70,7 @@ define([
$('#add-other-link').single('click', _.bind(me.showLink, me));
$('#add-other-pagenumber').single('click', _.bind(me.showPagePosition, me));
$('#add-other-footnote').single('click', _.bind(me.showPageFootnote, me));
$('#add-other-comment').single('click', _.bind(me.showPageComment, me));
me.initControls();
},
@ -143,6 +144,26 @@ define([
this.showPage('#addother-insert-footnote');
},
showPageComment: function(animate) {
this.showPage('#addother-insert-comment', animate);
},
renderComment: function(comment) {
var $commentInfo = $('#comment-info');
var template = [
'<% if (android) { %><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>',
'<% if (android) { %></div></div><% } %>',
'<div class="wrap-textarea"><textarea id="comment-text" class="comment-textarea" autofocus></textarea></div>'
].join('');
var insert = _.template(template)({
android: Framework7.prototype.device.android,
comment: comment
});
$commentInfo.html(insert);
},
renderNumFormat: function (dataFormat, selectFormat) {
var $listFormat = $('#list-format-footnote ul'),
items = [];
@ -221,8 +242,10 @@ define([
textInsertFootnote: 'Insert Footnote',
textFormat: 'Format',
textStartFrom: 'Start At',
textLocation: 'Location'
textLocation: 'Location',
textComment: 'Comment',
textAddComment: 'Add Comment',
textDone: 'Done'
}
})(), DE.Views.AddOther || {}))

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

@ -6498,6 +6498,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
margin: 0;
word-break: break-word;
}
.page-comments .list-reply,
.add-comment .list-reply,
.page-view-comments .list-reply,
.container-edit-comment .list-reply,
.container-add-reply .list-reply,
.view-comment .list-reply {
padding-left: 32px;
}
.page-comments .user-name,
.add-comment .user-name,
.page-view-comments .user-name,
@ -6783,48 +6791,35 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
min-height: 80px;
height: 80px;
}
.container-view-add-comment {
height: 100%;
#done-comment {
color: #446995;
}
.container-view-add-comment .navbar {
.page-add-comment {
background-color: #FFFFFF;
}
.container-view-add-comment .navbar a.link i + span {
margin-left: 0;
.page-add-comment .wrap-comment {
padding: 16px 16px 0 16px;
}
.container-view-add-comment .page {
background-color: #FFFFFF;
.page-add-comment .wrap-comment .header-comment {
justify-content: flex-start;
}
.container-view-add-comment .page .page-content {
padding: 0 16px 80px;
.page-add-comment .wrap-comment .user-name {
font-weight: bold;
}
.popover.add-comment .toolbar-bottom {
position: absolute;
bottom: 0;
.page-add-comment .wrap-comment .comment-date {
font-size: 12px;
color: #6d6d72;
}
.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;
.page-add-comment .wrap-comment .wrap-textarea {
margin-top: 16px;
padding-right: 6px;
}
.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: 80px;
}
.popover.add-comment .comment-textarea {
.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 80px;
max-height: 300px;
width: 280px;
margin-top: 0;
min-height: 100px;
border-radius: 4px;
width: 100%;
}
.container-add-reply {
height: 100%;
@ -7399,6 +7394,11 @@ i.icon.icon-resolve-comment.check {
height: 30px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200H30V30H0V0Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.6195%2020.8555C11.8237%2021.0673%2012.1658%2021.0577%2012.358%2020.8349L22.516%209.05783C22.7843%208.74676%2022.7528%208.27781%2022.4453%208.00545V8.00545C22.1315%207.72756%2021.651%207.7604%2021.3779%208.07839L12.3546%2018.587C12.1638%2018.8092%2011.8238%2018.8206%2011.6186%2018.6117L8.10643%2015.0366C7.81575%2014.7407%207.34084%2014.7345%207.04258%2015.0228V15.0228C6.74283%2015.3125%206.73444%2015.7903%207.02383%2016.0904L11.6195%2020.8555Z%22%20fill%3D%22%234cd964%22%2F%3E%3C%2Fsvg%3E");
}
i.icon.icon-insert-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%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");
}
.label-switch input[type="checkbox"]:checked + .checkbox {
background: #446995;
}

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

@ -6081,6 +6081,13 @@ html.phone .document-menu .list-block .item-link {
margin: 0;
word-break: break-word;
}
.page-comments .list-reply,
.page-add-comment .list-reply,
.page-view-comments .list-reply,
.container-edit-comment .list-reply,
.container-add-reply .list-reply {
padding-left: 32px;
}
.page-comments .user-name,
.page-add-comment .user-name,
.page-view-comments .user-name,
@ -6326,20 +6333,42 @@ html.phone .document-menu .list-block .item-link {
.container-view-comment .list-block {
margin-top: 0;
}
.container-view-add-comment,
#done-comment {
padding: 0 16px;
}
.page-add-comment .wrap-comment {
padding: 16px 16px 0 16px;
}
.page-add-comment .wrap-comment .header-comment {
justify-content: flex-start;
}
.page-add-comment .wrap-comment .user-name {
font-weight: bold;
}
.page-add-comment .wrap-comment .comment-date {
font-size: 12px;
color: #6d6d72;
}
.page-add-comment .wrap-comment .wrap-textarea {
padding-right: 6px;
}
.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
border: 1px solid #c4c4c4;
margin-top: 0;
min-height: 100px;
border-radius: 4px;
}
.container-edit-comment,
.container-add-reply,
container-edit-comment {
height: 100%;
}
.container-view-add-comment .navbar,
.container-edit-comment .navbar,
.container-add-reply .navbar,
container-edit-comment .navbar {
background-color: #FFFFFF;
color: #000;
}
.container-view-add-comment .navbar:after,
.container-edit-comment .navbar:after,
.container-add-reply .navbar:after,
container-edit-comment .navbar:after {
@ -6357,43 +6386,36 @@ container-edit-comment .navbar:after {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.container-view-add-comment .navbar .navbar-inner,
.container-edit-comment .navbar .navbar-inner,
.container-add-reply .navbar .navbar-inner,
container-edit-comment .navbar .navbar-inner {
justify-content: space-between;
}
.container-view-add-comment .navbar a.link i + span,
.container-edit-comment .navbar a.link i + span,
.container-add-reply .navbar a.link i + span,
container-edit-comment .navbar a.link i + span {
margin-left: 0;
}
.container-view-add-comment .navbar .center,
.container-edit-comment .navbar .center,
.container-add-reply .navbar .center,
container-edit-comment .navbar .center {
font-size: 18px;
}
.container-view-add-comment .navbar .right,
.container-edit-comment .navbar .right,
.container-add-reply .navbar .right,
container-edit-comment .navbar .right {
margin-left: 0;
}
.container-view-add-comment .page-add-comment,
.container-edit-comment .page-add-comment,
.container-add-reply .page-add-comment,
container-edit-comment .page-add-comment {
background-color: #FFFFFF;
}
.container-view-add-comment .page-add-comment .page-content,
.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-view-add-comment .header-comment,
.container-edit-comment .header-comment,
.container-add-reply .header-comment,
container-edit-comment .header-comment {
@ -6873,6 +6895,16 @@ i.icon.icon-done-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%20d%3D%22M9%2016.1719L19.5938%205.57812L21%206.98438L9%2018.9844L3.42188%2013.4062L4.82812%2012L9%2016.1719Z%22%20fill%3D%22%23446995%22%2F%3E%3C%2Fsvg%3E");
}
i.icon.icon-insert-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%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 {
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");
}
.navbar i.icon.icon-undo {
width: 22px;
height: 22px;

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

@ -493,4 +493,9 @@ i.icon {
height: 30px;
.encoded-svg-background('<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H30V30H0V0Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.6195 20.8555C11.8237 21.0673 12.1658 21.0577 12.358 20.8349L22.516 9.05783C22.7843 8.74676 22.7528 8.27781 22.4453 8.00545V8.00545C22.1315 7.72756 21.651 7.7604 21.3779 8.07839L12.3546 18.587C12.1638 18.8092 11.8238 18.8206 11.6186 18.6117L8.10643 15.0366C7.81575 14.7407 7.34084 14.7345 7.04258 15.0228V15.0228C6.74283 15.3125 6.73444 15.7903 7.02383 16.0904L11.6195 20.8555Z" fill="@{green}"/></svg>');
}
&.icon-insert-comment {
width: 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 fill-rule="evenodd" clip-rule="evenodd" d="M20.1538 9.00708H11.8462C10.8266 9.00708 10 9.83461 10 10.8554V15.1694C10 16.1902 10.8266 17.0177 11.8462 17.0177H13.8329C13.9409 17.0177 14.0454 17.0556 14.1284 17.1248L18.243 20.392C18.5436 20.6428 19 20.4288 19 20.037V17.4798C19 17.2246 19.2066 17.0177 19.4615 17.0177H20.1538C21.1734 17.0177 22 16.1902 22 15.1694V10.8554C22 9.83461 21.1734 9.00708 20.1538 9.00708ZM20 10.0083C20.5523 10.0083 21 10.4565 21 11.0095V15.0154C21 15.5683 20.5523 16.0165 20 16.0165H18.0025L18 18.8995C18 19.2912 18 19 18 19L14.5 16.0165H12C11.4477 16.0165 11 15.5683 11 15.0154V11.0095C11 10.4565 11.4477 10.0083 12 10.0083H20Z" fill="@{themeColor}"/><path d="M14.5 3H4.5C3.18908 3 2 4.2153 2 5.50295V12.0346C2 13.3222 3.18908 14.013 4.5 14.013H5.5C5.82773 14.013 6 14.1917 6 14.5136V17.5183C6 18.0125 6.6135 18.3352 7 18.0189L11 14.9858V13.5L7 16.5V13.0118H4.5C3.78992 13.0118 3 12.732 3 12.0346V5.50295C3 4.80547 3.78992 4.00118 4.5 4.00118H14.5C15.2101 4.00118 16 4.80547 16 5.50295V8.0059H17V5.50295C17 4.2153 15.8109 3 14.5 3Z" fill="@{themeColor}"/></svg>');
}
}

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

@ -439,6 +439,16 @@ i.icon {
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="@{themeColor}"/></svg>');
}
&.icon-insert-comment {
width: 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 fill-rule="evenodd" clip-rule="evenodd" d="M20.1538 9.00708H11.8462C10.8266 9.00708 10 9.83461 10 10.8554V15.1694C10 16.1902 10.8266 17.0177 11.8462 17.0177H13.8329C13.9409 17.0177 14.0454 17.0556 14.1284 17.1248L18.243 20.392C18.5436 20.6428 19 20.4288 19 20.037V17.4798C19 17.2246 19.2066 17.0177 19.4615 17.0177H20.1538C21.1734 17.0177 22 16.1902 22 15.1694V10.8554C22 9.83461 21.1734 9.00708 20.1538 9.00708ZM20 10.0083C20.5523 10.0083 21 10.4565 21 11.0095V15.0154C21 15.5683 20.5523 16.0165 20 16.0165H18.0025L18 18.8995C18 19.2912 18 19 18 19L14.5 16.0165H12C11.4477 16.0165 11 15.5683 11 15.0154V11.0095C11 10.4565 11.4477 10.0083 12 10.0083H20Z" fill="@{themeColor}"/><path d="M14.5 3H4.5C3.18908 3 2 4.2153 2 5.50295V12.0346C2 13.3222 3.18908 14.013 4.5 14.013H5.5C5.82773 14.013 6 14.1917 6 14.5136V17.5183C6 18.0125 6.6135 18.3352 7 18.0189L11 14.9858V13.5L7 16.5V13.0118H4.5C3.78992 13.0118 3 12.732 3 12.0346V5.50295C3 4.80547 3.78992 4.00118 4.5 4.00118H14.5C15.2101 4.00118 16 4.80547 16 5.50295V8.0059H17V5.50295C17 4.2153 15.8109 3 14.5 3Z" fill="@{themeColor}"/></svg>');
}
&.icon-done-comment {
width: 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="#FFFFFF"/></svg>');
}
}
// Overwrite color for toolbar

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

@ -6498,6 +6498,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
margin: 0;
word-break: break-word;
}
.page-comments .list-reply,
.add-comment .list-reply,
.page-view-comments .list-reply,
.container-edit-comment .list-reply,
.container-add-reply .list-reply,
.view-comment .list-reply {
padding-left: 32px;
}
.page-comments .user-name,
.add-comment .user-name,
.page-view-comments .user-name,
@ -6783,48 +6791,35 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
min-height: 80px;
height: 80px;
}
.container-view-add-comment {
height: 100%;
#done-comment {
color: #aa5252;
}
.container-view-add-comment .navbar {
.page-add-comment {
background-color: #FFFFFF;
}
.container-view-add-comment .navbar a.link i + span {
margin-left: 0;
.page-add-comment .wrap-comment {
padding: 16px 16px 0 16px;
}
.container-view-add-comment .page {
background-color: #FFFFFF;
.page-add-comment .wrap-comment .header-comment {
justify-content: flex-start;
}
.container-view-add-comment .page .page-content {
padding: 0 16px 80px;
.page-add-comment .wrap-comment .user-name {
font-weight: bold;
}
.popover.add-comment .toolbar-bottom {
position: absolute;
bottom: 0;
.page-add-comment .wrap-comment .comment-date {
font-size: 12px;
color: #6d6d72;
}
.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;
.page-add-comment .wrap-comment .wrap-textarea {
margin-top: 16px;
padding-right: 6px;
}
.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: 80px;
}
.popover.add-comment .comment-textarea {
.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 80px;
max-height: 300px;
width: 280px;
margin-top: 0;
min-height: 100px;
border-radius: 4px;
width: 100%;
}
.container-add-reply {
height: 100%;

42
apps/presentationeditor/mobile/resources/css/app-material.css
View file

@ -6081,6 +6081,13 @@ html.phone .document-menu .list-block .item-link {
margin: 0;
word-break: break-word;
}
.page-comments .list-reply,
.page-add-comment .list-reply,
.page-view-comments .list-reply,
.container-edit-comment .list-reply,
.container-add-reply .list-reply {
padding-left: 32px;
}
.page-comments .user-name,
.page-add-comment .user-name,
.page-view-comments .user-name,
@ -6326,20 +6333,42 @@ html.phone .document-menu .list-block .item-link {
.container-view-comment .list-block {
margin-top: 0;
}
.container-view-add-comment,
#done-comment {
padding: 0 16px;
}
.page-add-comment .wrap-comment {
padding: 16px 16px 0 16px;
}
.page-add-comment .wrap-comment .header-comment {
justify-content: flex-start;
}
.page-add-comment .wrap-comment .user-name {
font-weight: bold;
}
.page-add-comment .wrap-comment .comment-date {
font-size: 12px;
color: #6d6d72;
}
.page-add-comment .wrap-comment .wrap-textarea {
padding-right: 6px;
}
.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
border: 1px solid #c4c4c4;
margin-top: 0;
min-height: 100px;
border-radius: 4px;
}
.container-edit-comment,
.container-add-reply,
container-edit-comment {
height: 100%;
}
.container-view-add-comment .navbar,
.container-edit-comment .navbar,
.container-add-reply .navbar,
container-edit-comment .navbar {
background-color: #FFFFFF;
color: #000;
}
.container-view-add-comment .navbar:after,
.container-edit-comment .navbar:after,
.container-add-reply .navbar:after,
container-edit-comment .navbar:after {
@ -6357,43 +6386,36 @@ container-edit-comment .navbar:after {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.container-view-add-comment .navbar .navbar-inner,
.container-edit-comment .navbar .navbar-inner,
.container-add-reply .navbar .navbar-inner,
container-edit-comment .navbar .navbar-inner {
justify-content: space-between;
}
.container-view-add-comment .navbar a.link i + span,
.container-edit-comment .navbar a.link i + span,
.container-add-reply .navbar a.link i + span,
container-edit-comment .navbar a.link i + span {
margin-left: 0;
}
.container-view-add-comment .navbar .center,
.container-edit-comment .navbar .center,
.container-add-reply .navbar .center,
container-edit-comment .navbar .center {
font-size: 18px;
}
.container-view-add-comment .navbar .right,
.container-edit-comment .navbar .right,
.container-add-reply .navbar .right,
container-edit-comment .navbar .right {
margin-left: 0;
}
.container-view-add-comment .page-add-comment,
.container-edit-comment .page-add-comment,
.container-add-reply .page-add-comment,
container-edit-comment .page-add-comment {
background-color: #FFFFFF;
}
.container-view-add-comment .page-add-comment .page-content,
.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-view-add-comment .header-comment,
.container-edit-comment .header-comment,
.container-add-reply .header-comment,
container-edit-comment .header-comment {

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

@ -6498,6 +6498,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
margin: 0;
word-break: break-word;
}
.page-comments .list-reply,
.add-comment .list-reply,
.page-view-comments .list-reply,
.container-edit-comment .list-reply,
.container-add-reply .list-reply,
.view-comment .list-reply {
padding-left: 32px;
}
.page-comments .user-name,
.add-comment .user-name,
.page-view-comments .user-name,
@ -6783,48 +6791,35 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
min-height: 80px;
height: 80px;
}
.container-view-add-comment {
height: 100%;
#done-comment {
color: #40865c;
}
.container-view-add-comment .navbar {
.page-add-comment {
background-color: #FFFFFF;
}
.container-view-add-comment .navbar a.link i + span {
margin-left: 0;
.page-add-comment .wrap-comment {
padding: 16px 16px 0 16px;
}
.container-view-add-comment .page {
background-color: #FFFFFF;
.page-add-comment .wrap-comment .header-comment {
justify-content: flex-start;
}
.container-view-add-comment .page .page-content {
padding: 0 16px 80px;
.page-add-comment .wrap-comment .user-name {
font-weight: bold;
}
.popover.add-comment .toolbar-bottom {
position: absolute;
bottom: 0;
.page-add-comment .wrap-comment .comment-date {
font-size: 12px;
color: #6d6d72;
}
.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;
.page-add-comment .wrap-comment .wrap-textarea {
margin-top: 16px;
padding-right: 6px;
}
.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: 80px;
}
.popover.add-comment .comment-textarea {
.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
border: 1px solid #c4c4c4;
border-radius: 5px;
min-height: 80px;
max-height: 300px;
width: 280px;
margin-top: 0;
min-height: 100px;
border-radius: 4px;
width: 100%;
}
.container-add-reply {
height: 100%;

42
apps/spreadsheeteditor/mobile/resources/css/app-material.css
View file

@ -6091,6 +6091,13 @@ html.phone .document-menu .list-block .item-link {
margin: 0;
word-break: break-word;
}
.page-comments .list-reply,
.page-add-comment .list-reply,
.page-view-comments .list-reply,
.container-edit-comment .list-reply,
.container-add-reply .list-reply {
padding-left: 32px;
}
.page-comments .user-name,
.page-add-comment .user-name,
.page-view-comments .user-name,
@ -6336,20 +6343,42 @@ html.phone .document-menu .list-block .item-link {
.container-view-comment .list-block {
margin-top: 0;
}
.container-view-add-comment,
#done-comment {
padding: 0 16px;
}
.page-add-comment .wrap-comment {
padding: 16px 16px 0 16px;
}
.page-add-comment .wrap-comment .header-comment {
justify-content: flex-start;
}
.page-add-comment .wrap-comment .user-name {
font-weight: bold;
}
.page-add-comment .wrap-comment .comment-date {
font-size: 12px;
color: #6d6d72;
}
.page-add-comment .wrap-comment .wrap-textarea {
padding-right: 6px;
}
.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
border: 1px solid #c4c4c4;
margin-top: 0;
min-height: 100px;
border-radius: 4px;
}
.container-edit-comment,
.container-add-reply,
container-edit-comment {
height: 100%;
}
.container-view-add-comment .navbar,
.container-edit-comment .navbar,
.container-add-reply .navbar,
container-edit-comment .navbar {
background-color: #FFFFFF;
color: #000;
}
.container-view-add-comment .navbar:after,
.container-edit-comment .navbar:after,
.container-add-reply .navbar:after,
container-edit-comment .navbar:after {
@ -6367,43 +6396,36 @@ container-edit-comment .navbar:after {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.container-view-add-comment .navbar .navbar-inner,
.container-edit-comment .navbar .navbar-inner,
.container-add-reply .navbar .navbar-inner,
container-edit-comment .navbar .navbar-inner {
justify-content: space-between;
}
.container-view-add-comment .navbar a.link i + span,
.container-edit-comment .navbar a.link i + span,
.container-add-reply .navbar a.link i + span,
container-edit-comment .navbar a.link i + span {
margin-left: 0;
}
.container-view-add-comment .navbar .center,
.container-edit-comment .navbar .center,
.container-add-reply .navbar .center,
container-edit-comment .navbar .center {
font-size: 18px;
}
.container-view-add-comment .navbar .right,
.container-edit-comment .navbar .right,
.container-add-reply .navbar .right,
container-edit-comment .navbar .right {
margin-left: 0;
}
.container-view-add-comment .page-add-comment,
.container-edit-comment .page-add-comment,
.container-add-reply .page-add-comment,
container-edit-comment .page-add-comment {
background-color: #FFFFFF;
}
.container-view-add-comment .page-add-comment .page-content,
.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-view-add-comment .header-comment,
.container-edit-comment .header-comment,
.container-add-reply .header-comment,
container-edit-comment .header-comment {