From 9670353c3b684c0bc7bef36dfd2bed839c923172 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Sun, 15 Mar 2020 18:59:42 +0300 Subject: [PATCH] [de mobile] edit comment, delete comment, prev comment, next comment, add reply, edit reply, delete reply, resolve comment (ios) --- .../mobile/lib/controller/Collaboration.js | 569 +++++++++++++++++- .../lib/template/Collaboration.template | 16 - apps/common/mobile/lib/view/Collaboration.js | 59 +- .../resources/less/ios/_collaboration.less | 104 +++- .../mobile/app/controller/DocumentHolder.js | 2 +- .../mobile/resources/css/app-ios.css | 178 +++++- .../mobile/resources/less/ios/_icons.less | 17 + .../mobile/resources/css/app-ios.css | 163 ++++- .../mobile/resources/css/app-ios.css | 163 ++++- 9 files changed, 1184 insertions(+), 87 deletions(-) diff --git a/apps/common/mobile/lib/controller/Collaboration.js b/apps/common/mobile/lib/controller/Collaboration.js index 8b4c8bf872..efd3be1790 100644 --- a/apps/common/mobile/lib/controller/Collaboration.js +++ b/apps/common/mobile/lib/controller/Collaboration.js @@ -91,6 +91,8 @@ define([ this.api.asc_registerCallback('asc_onAddComments', _.bind(this.onApiAddComments, this)); this.api.asc_registerCallback('asc_onChangeCommentData', _.bind(this.onApiChangeCommentData, this)); this.api.asc_registerCallback('asc_onRemoveComment', _.bind(this.onApiRemoveComment, this)); + this.api.asc_registerCallback('asc_onRemoveComments', _.bind(this.onApiRemoveComments, this)); + this.api.asc_registerCallback('asc_onShowComment', _.bind(this.apiShowComments, this)); if (editor === 'DE') { this.api.asc_registerCallback('asc_onShowRevisionsChange', _.bind(this.changeReview, this)); } @@ -679,19 +681,80 @@ define([ //Comments + findComment: function(uid) { + var comment; + if (this.groupCollectionFilter.length !== 0) { + comment = me.findCommentInGroup(uid); + } else if (this.collectionComments.length !== 0) { + comment = _.findWhere(this.collectionComments, {uid: uid}); + } + return comment; + }, + + apiShowComments: function(uid) { + var comments, + me = this; + me.showComments = []; + if (this.groupCollectionFilter.length !== 0) { + comments = this.groupCollectionFilter; + _.each(uid, function (id) { + var comment = me.findCommentInGroup(uid); + if (comment) { + me.showComments.push(comment); + } + }); + } else if (this.collectionComments.length !== 0) { + comments = this.collectionComments; + _.each(uid, function (id) { + var comment = _.findWhere(comments, {uid: id}); + if (comment) { + me.showComments.push(comment); + } + }); + } + }, + + updateViewComment: function() { + DE.getController('Common.Controllers.Collaboration').getView('Common.Views.Collaboration').renderViewComments(this.showComments, this.indexCurrentComment); + $('.comment-menu').single('click', _.bind(this.initMenuComments, this)); + $('.reply-menu').single('click', _.bind(this.initReplyMenu, this)); + $('.comment-resolve').single('click', _.bind(this.onClickResolveComment, this)); + }, + showCommentModal: function() { var me = this, isAndroid = Framework7.prototype.device.android === true, - modalView, appPrefix = !!window.DE ? DE : !!window.PE ? PE : SSE, - mainView = appPrefix.getController('Editor').getView('Editor').f7View; + mainView = appPrefix.getController('Editor').getView('Editor').f7View, + viewCollaboration = appPrefix.getController('Common.Controllers.Collaboration').getView('Common.Views.Collaboration'); + + me.indexCurrentComment = 0; uiApp.closeModal(); if (Common.SharedSettings.get('phone')) { - modalView = $$(uiApp.pickerModal( + me.modalViewComment = $$(uiApp.pickerModal( '
' + - this.getView('Common.Views.Collaboration').rootCommentLayout() + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '' + me.textAddReply + '' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
'+ '
' )).on('opened', function () { if (_.isFunction(me.api.asc_OnShowContextMenu)) { @@ -710,6 +773,8 @@ define([ appPrefix.getController('Toolbar').getView('Toolbar').hideSearch(); + viewCollaboration.renderViewComments(me.showComments, me.indexCurrentComment); + //swipe modal window me.swipeFull = false; var $swipeContainer = $('.swipe-container'); @@ -736,6 +801,135 @@ define([ $('.container-view-comment').css('height', '50%'); } }, me)); + + $('.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)); + }, + + onViewPrevComment: function() { + if (this.indexCurrentComment - 1 >= 0 && this.showComments.length > 0) { + this.indexCurrentComment -= 1; + DE.getController('Common.Controllers.Collaboration').getView('Common.Views.Collaboration').renderViewComments(this.showComments, this.indexCurrentComment); + $('.comment-menu').single('click', _.bind(this.initMenuComments, this)); + $('.reply-menu').single('click', _.bind(this.initReplyMenu, this)); + $('.comment-resolve').single('click', _.bind(this.onClickResolveComment, this)); + } + }, + + onViewNextComment: function() { + if (this.indexCurrentComment + 1 < this.showComments.length) { + this.indexCurrentComment += 1; + DE.getController('Common.Controllers.Collaboration').getView('Common.Views.Collaboration').renderViewComments(this.showComments, this.indexCurrentComment); + $('.comment-menu').single('click', _.bind(this.initMenuComments, this)); + $('.reply-menu').single('click', _.bind(this.initReplyMenu, this)); + $('.comment-resolve').single('click', _.bind(this.onClickResolveComment, this)); + } + }, + + onClickAddReply: function() { + var me = this; + if (this.indexCurrentComment > -1 && this.indexCurrentComment < this.showComments.length) { + var addReplyView, + comment = this.showComments[this.indexCurrentComment]; + if (Common.SharedSettings.get('phone')) { + addReplyView = uiApp.popup( + '
' + + '
' + + '
' + + '
' + '' + me.textCancel + ''+ '
' + + '
' + me.textAddReply + '
' + + '
' + '' + me.textDone + '' + '
' + + '
' + + '
' + + '
' + + '
' + comment.username + '
' + + '
' + comment.date + '
' + + '
' + + '
' + + '
' + ); + $('.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 { + + } + } + }, + + addReply: function(id, replyVal) { + if (replyVal.length > 0) { + var me = this, + reply = null, + addReply = null, + ascComment = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)), + comment = _.findWhere(this.collectionComments, {uid: id}); + + if (ascComment && comment) { + + ascComment.asc_putText(comment.comment); + ascComment.asc_putQuoteText(comment.quote); + ascComment.asc_putTime(me.utcDateToString(new Date(comment.time))); + ascComment.asc_putOnlyOfficeTime(me.ooDateToString(new Date(comment.time))); + ascComment.asc_putUserId(comment.userid); + ascComment.asc_putUserName(comment.username); + ascComment.asc_putSolved(comment.resolved); + ascComment.asc_putGuid(comment.guid); + + if (!_.isUndefined(ascComment.asc_putDocumentFlag)) { + ascComment.asc_putDocumentFlag(comment.unattached); + } + + reply = comment.replys; + if (reply && reply.length) { + reply.forEach(function (reply) { + + addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); + if (addReply) { + addReply.asc_putText(reply.reply); + addReply.asc_putTime(me.utcDateToString(new Date(reply.time))); + addReply.asc_putOnlyOfficeTime(me.ooDateToString(new Date(reply.time))); + addReply.asc_putUserId(reply.userid); + addReply.asc_putUserName(reply.username); + + ascComment.asc_addReply(addReply); + } + }); + } + + addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); + if (addReply) { + 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; + } + }); + addReply.asc_putUserId(_userId); + addReply.asc_putUserName(me.currentUser.asc_getUserName()); + + ascComment.asc_addReply(addReply); + + me.api.asc_changeComment(id, ascComment); + } + } + } }, showAddCommentModal: function() { @@ -835,6 +1029,335 @@ define([ } }, + initMenuComments: function() { + var me = this; + _.delay(function () { + var _menuItems = []; + _menuItems.push({ + caption: me.textEdit, + event: 'edit' + }); + if (!me.showComments[me.indexCurrentComment].resolved) { + _menuItems.push({ + caption: me.textResolve, + event: 'resolve' + }); + } else { + _menuItems.push({ + caption: me.textReopen, + event: 'resolve' + }); + } + _menuItems.push({ + caption: me.textDeleteComment, + event: 'delete' + }); + _.each(_menuItems, function (item) { + item.text = item.caption; + item.onClick = function () { + me.onCommentMenuClick(item.event) + } + }); + + uiApp.actions([_menuItems, [ + { + text: me.textCancel, + bold: true + } + ]]); + }, 100); + }, + + initReplyMenu: function(event) { + var me = this; + var ind = $(event.currentTarget).parent().parent().data('ind'); + _.delay(function () { + var _menuItems = []; + _menuItems.push({ + caption: me.textEdit, + event: 'editreply' + }); + _menuItems.push({ + caption: me.textDeleteReply, + event: 'deletereply' + }); + _.each(_menuItems, function (item) { + item.text = item.caption; + item.onClick = function () { + me.onCommentMenuClick(item.event, ind); + } + }); + + uiApp.actions([_menuItems, [ + { + text: me.textCancel, + bold: true + } + ]]); + }, 100); + }, + + onCommentMenuClick: function(action, indReply) { + var me = this; + switch (action) { + case 'edit': me.showEditCommentModal(); 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; + } + }, + + onChangeComment: function(comment) { + if (this.api) { + var ascComment, + me = this; + if (typeof Asc.asc_CCommentDataWord !== 'undefined') { + ascComment = new Asc.asc_CCommentDataWord(null); + } else { + ascComment = new Asc.asc_CCommentData(null); + } + + if (ascComment && comment) { + var uid = comment.uid; + ascComment.asc_putText(comment.comment); + ascComment.asc_putQuoteText(comment.quote); + ascComment.asc_putTime(me.utcDateToString(new Date(comment.time))); + ascComment.asc_putOnlyOfficeTime(me.ooDateToString(new Date(comment.time))); + ascComment.asc_putUserId(comment.userid); + ascComment.asc_putUserName(comment.username); + ascComment.asc_putSolved(!comment.resolved); + ascComment.asc_putGuid(comment.guid); + + if (!_.isUndefined(ascComment.asc_putDocumentFlag)) { + ascComment.asc_putDocumentFlag(comment.unattached); + } + + var reply = comment.replys; + if (reply && reply.length > 0) { + reply.forEach(function (reply) { + var addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); + if (addReply) { + addReply.asc_putText(reply.reply); + addReply.asc_putTime(me.utcDateToString(new Date(reply.time))); + addReply.asc_putOnlyOfficeTime(me.ooDateToString(new Date(reply.time))); + addReply.asc_putUserId(reply.userid); + addReply.asc_putUserName(reply.username); + + ascComment.asc_addReply(addReply); + } + }); + } + + this.api.asc_changeComment(uid, ascComment); + } + } + }, + + onDeleteComment: function(ind) { + if (this.api && !_.isUndefined(ind) && !_.isUndefined(this.showComments)) { + this.api.asc_removeComment(this.showComments[ind].uid); + if (this.showComments.length === 0) { + uiApp.closeModal(); + } else { + this.indexCurrentComment = this.indexCurrentComment - 1 > -1 ? this.indexCurrentComment - 1 : 0; + this.updateViewComment(); + } + } + }, + + onDeleteReply: function(indComment, indReply) { + if (!_.isUndefined(indComment) && !_.isUndefined(indReply)) { + var me = this, + replies = null, + addReply = null, + ascComment = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)), + comment = me.showComments[indComment]; + + if (ascComment && comment) { + var id = comment.uid; + ascComment.asc_putText(comment.comment); + ascComment.asc_putQuoteText(comment.quote); + ascComment.asc_putTime(me.utcDateToString(new Date(comment.time))); + ascComment.asc_putOnlyOfficeTime(me.ooDateToString(new Date(comment.time))); + ascComment.asc_putUserId(comment.userid); + ascComment.asc_putUserName(comment.username); + ascComment.asc_putSolved(comment.resolved); + ascComment.asc_putGuid(comment.guid); + + if (!_.isUndefined(ascComment.asc_putDocumentFlag)) { + ascComment.asc_putDocumentFlag(comment.unattached); + } + + replies = comment.replys; + if (replies && replies.length) { + replies.forEach(function (reply) { + if (reply.ind !== indReply) { + addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); + if (addReply) { + addReply.asc_putText(reply.reply); + addReply.asc_putTime(me.utcDateToString(new Date(reply.time))); + addReply.asc_putOnlyOfficeTime(me.ooDateToString(new Date(reply.time))); + addReply.asc_putUserId(reply.userid); + addReply.asc_putUserName(reply.username); + + ascComment.asc_addReply(addReply); + } + } + }); + } + + me.api.asc_changeComment(id, ascComment); + me.updateViewComment(); + } + } + }, + + showEditCommentModal: function() { + var me = this; + if (this.indexCurrentComment > -1 && this.indexCurrentComment < this.showComments.length) { + var comment = this.showComments[this.indexCurrentComment]; + if (Common.SharedSettings.get('phone')) { + me.editView = uiApp.popup( + '
' + + '
' + + '
' + + '
' + '' + me.textCancel + ''+ '
' + + '
' + me.textEditComment + '
' + + '
' + '' + me.textDone + '' + '
' + + '
' + + '
' + + '
' + + '
' + comment.username + '
' + + '
' + comment.date + '
' + + '
' + + '
' + + '
' + ); + $('.popup').css('z-index', '20000'); + _.delay(function () { + var $textarea = $('.comment-textarea')[0]; + $textarea.focus(); + $textarea.selectionStart = $textarea.value.length; + },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 { + + } + } + }, + + showEditReplyModal: function(indComment, indReply) { + var me = this; + if (indComment > -1 && indComment < this.showComments.length) { + var editView, + comment, + replies, + reply; + this.showComments && (comment = this.showComments[indComment]); + comment && (replies = comment.replys); + replies && (reply = replies[indReply]); + if (reply) { + if (Common.SharedSettings.get('phone')) { + editView = uiApp.popup( + '
' + + '
' + + '
' + + '
' + '' + me.textCancel + '' + '
' + + '
' + me.textEditReply + '
' + + '
' + '' + me.textDone + '' + '
' + + '
' + + '
' + + '
' + + '
' + reply.username + '
' + + '
' + reply.date + '
' + + '
' + + '
' + + '
' + ); + $('.popup').css('z-index', '20000'); + _.delay(function () { + var $textarea = $('.reply-textarea')[0]; + $textarea.focus(); + $textarea.selectionStart = $textarea.value.length; + },100); + } + $('#edit-reply').single('click', _.bind(function (comment, indReply) { + var value = $('.reply-textarea')[0].value; + if (value && value.length > 0) { + comment.replys[indReply].reply = value; + this.onChangeComment(comment); + uiApp.closeModal($$(editView)); + this.updateViewComment(); + } + }, me, comment, indReply)); + } + } + }, + + onClickResolveComment: function() { + if (!_.isUndefined(this.indexCurrentComment) && !_.isUndefined(this.showComments)) { + var comment = this.showComments[this.indexCurrentComment]; + if (comment) { + if (this.resolveComment(comment.uid)) { + $('.comment-resolve .icon-resolve-comment').toggleClass('check'); + } + } + } + }, + + resolveComment: function (uid) { + var me = this, + reply = null, + addReply = null, + ascComment = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)), + comment = me.findComment(uid); + + if (ascComment && comment && me.api) { + ascComment.asc_putText(comment.comment); + ascComment.asc_putQuoteText(comment.quote); + ascComment.asc_putTime(me.utcDateToString(new Date(comment.time))); + ascComment.asc_putOnlyOfficeTime(me.ooDateToString(new Date(comment.time))); + ascComment.asc_putUserId(comment.userid); + ascComment.asc_putUserName(comment.username); + ascComment.asc_putSolved(!comment.resolved); + ascComment.asc_putGuid(comment.guid); + + if (!_.isUndefined(ascComment.asc_putDocumentFlag)) { + ascComment.asc_putDocumentFlag(comment.unattached); + } + + reply = comment.replys; + if (reply && reply.length) { + reply.forEach(function (reply) { + addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); + if (addReply) { + addReply.asc_putText(reply.reply); + addReply.asc_putTime(me.utcDateToString(new Date(reply.time))); + addReply.asc_putOnlyOfficeTime(me.ooDateToString(new Date(reply.time))); + addReply.asc_putUserId(reply.userid); + addReply.asc_putUserName(reply.username); + + ascComment.asc_addReply(addReply); + } + }); + } + + me.api.asc_changeComment(uid, ascComment); + return true; + } + return false; + }, + // utils timeZoneOffsetInMs: (new Date()).getTimezoneOffset() * 60000, utcDateToString: function (date) { @@ -874,6 +1397,7 @@ define([ var user = _.findWhere(editUsers, {idOriginal: data.asc_getReply(i).asc_getUserId()}); replies.push({ + ind : i, userid : data.asc_getReply(i).asc_getUserId(), username : data.asc_getReply(i).asc_getUserName(), usercolor : (user) ? user.asc_getColor() : null, @@ -950,6 +1474,7 @@ define([ user = _.findWhere(editUsers, {idOriginal: data.asc_getReply(i).asc_getUserId()}); replies.push({ + ind : i, userid : data.asc_getReply(i).asc_getUserId(), username : data.asc_getReply(i).asc_getUserName(), usercolor : (user) ? user.asc_getColor() : null, @@ -962,6 +1487,13 @@ define([ if($('.page-comments').length > 0) { this.initComments(); } + + if (this.showComments && this.showComments.length > 0) { + var showComment = _.findWhere(this.showComments, {uid: id}); + if (showComment) { + showComment = comment; + } + } } }, @@ -1016,7 +1548,7 @@ define([ } }, - onApiRemoveComment: function (id) { + onApiRemoveComment: function (id, silentUpdate) { function remove (collection, key) { if(collection instanceof Array) { var index = collection.indexOf(key); @@ -1025,7 +1557,7 @@ define([ } } } - if (this.groupCollectionComments) { + if (this.groupCollectionComments.length > 0) { for (var name in this.groupCollectionComments) { var store = this.groupCollectionComments[name], comment = _.findWhere(store, {uid: id}); @@ -1043,9 +1575,22 @@ define([ remove(this.collectionComments, comment); } } - if($('.page-comments').length > 0) { + if(!silentUpdate && $('.page-comments').length > 0) { this.initComments(); } + + if (this.showComments && this.showComments.length > 0) { + var removeComment = _.findWhere(this.showComments, {uid: id}); + if (removeComment) { + this.showComments = _.without(this.showComments, removeComment); + } + } + }, + + onApiRemoveComments: function(data) { + for (var i = 0; i < data.length; i++) { + this.onApiRemoveComment(data[i], true); + } }, onFilterChange: function (filter) { @@ -1129,7 +1674,15 @@ define([ textEditUser: 'Document is currently being edited by several users.', textAddComment: "Add Comment", textCancel: "Cancel", - textDone: "Done" + textDone: "Done", + textAddReply: "Add Reply", + textEdit: 'Edit', + textResolve: 'Resolve', + textDeleteComment: 'Delete comment', + textEditComment: 'Edit comment', + textDeleteReply: 'Delete reply', + textEditReply: 'Edit reply', + textReopen: 'Reopen' } })(), Common.Controllers.Collaboration || {})) diff --git a/apps/common/mobile/lib/template/Collaboration.template b/apps/common/mobile/lib/template/Collaboration.template index fb6016c6f7..f418d24b50 100644 --- a/apps/common/mobile/lib/template/Collaboration.template +++ b/apps/common/mobile/lib/template/Collaboration.template @@ -237,19 +237,3 @@ - -
-
-
-
-
-
- Link 1 - Link 2 - Link 3 -
-
-
- -
-
\ No newline at end of file diff --git a/apps/common/mobile/lib/view/Collaboration.js b/apps/common/mobile/lib/view/Collaboration.js index cbc70e452d..3765c858e0 100644 --- a/apps/common/mobile/lib/view/Collaboration.js +++ b/apps/common/mobile/lib/view/Collaboration.js @@ -123,17 +123,6 @@ define([ return ''; }, - rootCommentLayout: function() { - if (this.layout) { - var $layour = this.layout.find('#comment-view'), - isPhone = Common.SharedSettings.get('phone'); - - return $layour.html(); - } - - return ''; - }, - showPage: function(templateId, animate) { var me = this; var prefix = !!window.DE ? DE : !!window.PE ? PE : SSE; @@ -157,8 +146,52 @@ define([ } }, - renderViewComments: function(comments) { + //Comments + renderViewComments: function(comments, indCurComment) { + if ($('.page-view-comments .page-content').length > 0) { + var template = ''; + if (comments && comments.length > 0) { + template = '
' + + '
'; + $('.page-view-comments .page-content').html(template); + } + } }, renderComments: function (comments) { @@ -205,7 +238,7 @@ define([ replys: comment.replys.length, })); }); - $listComments.html(items); + $listComments.html(items.join('')); } }, diff --git a/apps/common/mobile/resources/less/ios/_collaboration.less b/apps/common/mobile/resources/less/ios/_collaboration.less index 7c54684649..5fd6980551 100644 --- a/apps/common/mobile/resources/less/ios/_collaboration.less +++ b/apps/common/mobile/resources/less/ios/_collaboration.less @@ -92,7 +92,7 @@ } //Comments -.page-comments, .page-add-comment { +.page-comments, .page-add-comment, .page-view-comments, .container-edit-comment, .container-add-reply { .list-block .item-inner { display: block; padding: 16px 0; @@ -100,6 +100,7 @@ } p { margin: 0; + word-break: break-word; } .user-name { font-size: 17px; @@ -125,8 +126,14 @@ } .reply-item { margin-top: 15px; + padding-right: 16px; + padding-top: 13px; + .header-reply { + display: flex; + justify-content: space-between; + } .user-name { - padding-top: 16px; + padding-top: 3px; } &:before { content: ''; @@ -152,23 +159,29 @@ font-size: 15px; } - //add comment .wrap-comment { padding: 16px 16px 0 16px; } - .comment-textarea { + .comment-textarea, .reply-textarea { margin-top: 10px; background:transparent; border:none; outline:none; width: 100%; min-height: 200px; + font-size: 15px; } } .settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after { display: none; } +.container-edit-comment { + .navbar { + background-color: #FFFFFF; + } +} + //view comment .container-view-comment { -webkit-transition: height 100ms; @@ -178,8 +191,52 @@ border-top-right-radius: 4px; height: 50%; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); + .page-view-comments { + background-color: #FFFFFF; + .list-block { + margin-bottom: 100px; + ul:before, ul:after { + content: none; + } + .item-inner { + padding: 0; + .header-comment { + display: flex; + justify-content: space-between; + padding-right: 16px; + .comment-right { + display: flex; + justify-content: space-between; + width: 70px; + } + } + } + } + + } .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); + &:before { + content: none; + } + .toolbar-inner { + display: flex; + justify-content: space-between; + padding: 0 16px; + .button-left { + min-width: 80px; + } + .button-right { + min-width: 62px; + display: flex; + justify-content: space-between; + a { + padding: 0 8px; + } + } + } } .swipe-container { display: flex; @@ -193,19 +250,52 @@ border-radius: 2px; } } - .page-content { - padding: 0 16px 80px; + .list-block { + margin-top: 0; } } .container-view-add-comment { height: 100%; .navbar { + background-color: #FFFFFF; a.link i + span { margin-left: 0; } } .page-add-comment { background-color: #FFFFFF; + .page-content { + padding: 0 16px 80px; + } } -} \ No newline at end of file +} + +.container-add-reply { + height: 100%; + .navbar { + background-color: #FFFFFF; + a.link i + span { + margin-left: 0; + } + } +} + +.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); + } +} diff --git a/apps/documenteditor/mobile/app/controller/DocumentHolder.js b/apps/documenteditor/mobile/app/controller/DocumentHolder.js index 387396a650..532a74301c 100644 --- a/apps/documenteditor/mobile/app/controller/DocumentHolder.js +++ b/apps/documenteditor/mobile/app/controller/DocumentHolder.js @@ -534,7 +534,7 @@ define([ } } - if (1/*_isComments*/) { + if (_isComments) { arrItems.push({ caption: me.menuViewComment, event: 'viewcomment' diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index bd1719bc02..c5f043d0f9 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -6480,17 +6480,27 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after content: none; } .page-comments .list-block .item-inner, -.page-add-comment .list-block .item-inner { +.page-add-comment .list-block .item-inner, +.page-view-comments .list-block .item-inner, +.container-edit-comment .list-block .item-inner, +.container-add-reply .list-block .item-inner { display: block; padding: 16px 0; word-wrap: break-word; } .page-comments p, -.page-add-comment p { +.page-add-comment p, +.page-view-comments p, +.container-edit-comment p, +.container-add-reply p { margin: 0; + word-break: break-word; } .page-comments .user-name, -.page-add-comment .user-name { +.page-add-comment .user-name, +.page-view-comments .user-name, +.container-edit-comment .user-name, +.container-add-reply .user-name { font-size: 17px; line-height: 22px; color: #000000; @@ -6499,8 +6509,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after } .page-comments .comment-date, .page-add-comment .comment-date, +.page-view-comments .comment-date, +.container-edit-comment .comment-date, +.container-add-reply .comment-date, .page-comments .reply-date, -.page-add-comment .reply-date { +.page-add-comment .reply-date, +.page-view-comments .reply-date, +.container-edit-comment .reply-date, +.container-add-reply .reply-date { font-size: 12px; line-height: 18px; color: #6d6d72; @@ -6509,8 +6525,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after } .page-comments .comment-text, .page-add-comment .comment-text, +.page-view-comments .comment-text, +.container-edit-comment .comment-text, +.container-add-reply .comment-text, .page-comments .reply-text, -.page-add-comment .reply-text { +.page-add-comment .reply-text, +.page-view-comments .reply-text, +.container-edit-comment .reply-text, +.container-add-reply .reply-text { color: #000000; font-size: 15px; line-height: 25px; @@ -6519,15 +6541,34 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after padding-right: 15px; } .page-comments .reply-item, -.page-add-comment .reply-item { +.page-add-comment .reply-item, +.page-view-comments .reply-item, +.container-edit-comment .reply-item, +.container-add-reply .reply-item { margin-top: 15px; + padding-right: 16px; + padding-top: 13px; +} +.page-comments .reply-item .header-reply, +.page-add-comment .reply-item .header-reply, +.page-view-comments .reply-item .header-reply, +.container-edit-comment .reply-item .header-reply, +.container-add-reply .reply-item .header-reply { + display: flex; + justify-content: space-between; } .page-comments .reply-item .user-name, -.page-add-comment .reply-item .user-name { - padding-top: 16px; +.page-add-comment .reply-item .user-name, +.page-view-comments .reply-item .user-name, +.container-edit-comment .reply-item .user-name, +.container-add-reply .reply-item .user-name { + padding-top: 3px; } .page-comments .reply-item:before, -.page-add-comment .reply-item:before { +.page-add-comment .reply-item:before, +.page-view-comments .reply-item:before, +.container-edit-comment .reply-item:before, +.container-add-reply .reply-item:before { content: ''; position: absolute; left: auto; @@ -6543,7 +6584,10 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transform-origin: 50% 100%; } .page-comments .comment-quote, -.page-add-comment .comment-quote { +.page-add-comment .comment-quote, +.page-view-comments .comment-quote, +.container-edit-comment .comment-quote, +.container-add-reply .comment-quote { color: #446995; border-left: 1px solid #446995; padding-left: 10px; @@ -6551,22 +6595,37 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after font-size: 15px; } .page-comments .wrap-comment, -.page-add-comment .wrap-comment { +.page-add-comment .wrap-comment, +.page-view-comments .wrap-comment, +.container-edit-comment .wrap-comment, +.container-add-reply .wrap-comment { padding: 16px 16px 0 16px; } .page-comments .comment-textarea, -.page-add-comment .comment-textarea { +.page-add-comment .comment-textarea, +.page-view-comments .comment-textarea, +.container-edit-comment .comment-textarea, +.container-add-reply .comment-textarea, +.page-comments .reply-textarea, +.page-add-comment .reply-textarea, +.page-view-comments .reply-textarea, +.container-edit-comment .reply-textarea, +.container-add-reply .reply-textarea { margin-top: 10px; background: transparent; border: none; outline: none; width: 100%; min-height: 200px; + font-size: 15px; } .settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after { display: none; } +.container-edit-comment .navbar { + background-color: #FFFFFF; +} .container-view-comment { -webkit-transition: height 100ms; transition: height 100ms; @@ -6576,8 +6635,52 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after height: 50%; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); } +.container-view-comment .page-view-comments { + background-color: #FFFFFF; +} +.container-view-comment .page-view-comments .list-block { + margin-bottom: 100px; +} +.container-view-comment .page-view-comments .list-block ul:before, +.container-view-comment .page-view-comments .list-block ul:after { + content: none; +} +.container-view-comment .page-view-comments .list-block .item-inner { + padding: 0; +} +.container-view-comment .page-view-comments .list-block .item-inner .header-comment { + display: flex; + justify-content: space-between; + padding-right: 16px; +} +.container-view-comment .page-view-comments .list-block .item-inner .header-comment .comment-right { + display: flex; + justify-content: space-between; + width: 70px; +} .container-view-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); +} +.container-view-comment .toolbar:before { + content: none; +} +.container-view-comment .toolbar .toolbar-inner { + display: flex; + justify-content: space-between; + padding: 0 16px; +} +.container-view-comment .toolbar .toolbar-inner .button-left { + min-width: 80px; +} +.container-view-comment .toolbar .toolbar-inner .button-right { + min-width: 62px; + display: flex; + justify-content: space-between; +} +.container-view-comment .toolbar .toolbar-inner .button-right a { + padding: 0 8px; } .container-view-comment .swipe-container { display: flex; @@ -6591,18 +6694,50 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after background: rgba(0, 0, 0, 0.12); border-radius: 2px; } -.container-view-comment .page-content { - padding: 0 16px 80px; +.container-view-comment .list-block { + margin-top: 0; } .container-view-add-comment { height: 100%; } +.container-view-add-comment .navbar { + background-color: #FFFFFF; +} .container-view-add-comment .navbar a.link i + span { margin-left: 0; } .container-view-add-comment .page-add-comment { background-color: #FFFFFF; } +.container-view-add-comment .page-add-comment .page-content { + padding: 0 16px 80px; +} +.container-add-reply { + height: 100%; +} +.container-add-reply .navbar { + background-color: #FFFFFF; +} +.container-add-reply .navbar a.link i + span { + margin-left: 0; +} +.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); +} .tablet .searchbar.document.replace .center .searchbar:first-child { margin-right: 10px; } @@ -7144,6 +7279,21 @@ i.icon.icon-paste { 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%22M5%202H0V20H9V24H24V7H19V2H14V3H18V7H9V19H1V3H5V2ZM10%208H23V23H10V8Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M5%200H14V5H5V0Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2012H12V11H21V12Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2016H12V15H21V16Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2020H12V19H21V20Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); } +i.icon.icon-menu-comment { + width: 30px; + 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%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10%2015C10%2016.6569%208.65685%2018%207%2018C5.34315%2018%204%2016.6569%204%2015C4%2013.3431%205.34315%2012%207%2012C8.65685%2012%2010%2013.3431%2010%2015ZM7%2016.7143C7.94677%2016.7143%208.71429%2015.9468%208.71429%2015C8.71429%2014.0532%207.94677%2013.2857%207%2013.2857C6.05323%2013.2857%205.28571%2014.0532%205.28571%2015C5.28571%2015.9468%206.05323%2016.7143%207%2016.7143Z%22%20fill%3D%22%23A3A3A3%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18%2015C18%2016.6569%2016.6569%2018%2015%2018C13.3431%2018%2012%2016.6569%2012%2015C12%2013.3431%2013.3431%2012%2015%2012C16.6569%2012%2018%2013.3431%2018%2015ZM15%2016.7143C15.9468%2016.7143%2016.7143%2015.9468%2016.7143%2015C16.7143%2014.0532%2015.9468%2013.2857%2015%2013.2857C14.0532%2013.2857%2013.2857%2014.0532%2013.2857%2015C13.2857%2015.9468%2014.0532%2016.7143%2015%2016.7143Z%22%20fill%3D%22%23A3A3A3%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M26%2015C26%2016.6569%2024.6569%2018%2023%2018C21.3431%2018%2020%2016.6569%2020%2015C20%2013.3431%2021.3431%2012%2023%2012C24.6569%2012%2026%2013.3431%2026%2015ZM23%2016.7143C23.9468%2016.7143%2024.7143%2015.9468%2024.7143%2015C24.7143%2014.0532%2023.9468%2013.2857%2023%2013.2857C22.0532%2013.2857%2021.2857%2014.0532%2021.2857%2015C21.2857%2015.9468%2022.0532%2016.7143%2023%2016.7143Z%22%20fill%3D%22%23A3A3A3%22%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-resolve-comment { + width: 30px; + 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%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.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.81574%2014.7407%207.34084%2014.7345%207.04258%2015.0228C6.74283%2015.3125%206.73444%2015.7903%207.02383%2016.0904L11.6195%2020.8555Z%22%20fill%3D%22%23A3A3A3%22%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-resolve-comment.check { + width: 30px; + 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%235B9F27%22%2F%3E%3C%2Fsvg%3E"); +} .label-switch input[type="checkbox"]:checked + .checkbox { background: #446995; } diff --git a/apps/documenteditor/mobile/resources/less/ios/_icons.less b/apps/documenteditor/mobile/resources/less/ios/_icons.less index b5c8480645..1fb1105793 100644 --- a/apps/documenteditor/mobile/resources/less/ios/_icons.less +++ b/apps/documenteditor/mobile/resources/less/ios/_icons.less @@ -476,4 +476,21 @@ i.icon { height: 24px; .encoded-svg-background(''); } + + //comments + &.icon-menu-comment { + width: 30px; + height: 30px; + .encoded-svg-background(''); + } + &.icon-resolve-comment { + width: 30px; + height: 30px; + .encoded-svg-background(''); + } + &.icon-resolve-comment.check { + width: 30px; + height: 30px; + .encoded-svg-background(''); + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index fa01a7feff..3052c79acc 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6480,17 +6480,27 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after content: none; } .page-comments .list-block .item-inner, -.page-add-comment .list-block .item-inner { +.page-add-comment .list-block .item-inner, +.page-view-comments .list-block .item-inner, +.container-edit-comment .list-block .item-inner, +.container-add-reply .list-block .item-inner { display: block; padding: 16px 0; word-wrap: break-word; } .page-comments p, -.page-add-comment p { +.page-add-comment p, +.page-view-comments p, +.container-edit-comment p, +.container-add-reply p { margin: 0; + word-break: break-word; } .page-comments .user-name, -.page-add-comment .user-name { +.page-add-comment .user-name, +.page-view-comments .user-name, +.container-edit-comment .user-name, +.container-add-reply .user-name { font-size: 17px; line-height: 22px; color: #000000; @@ -6499,8 +6509,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after } .page-comments .comment-date, .page-add-comment .comment-date, +.page-view-comments .comment-date, +.container-edit-comment .comment-date, +.container-add-reply .comment-date, .page-comments .reply-date, -.page-add-comment .reply-date { +.page-add-comment .reply-date, +.page-view-comments .reply-date, +.container-edit-comment .reply-date, +.container-add-reply .reply-date { font-size: 12px; line-height: 18px; color: #6d6d72; @@ -6509,8 +6525,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after } .page-comments .comment-text, .page-add-comment .comment-text, +.page-view-comments .comment-text, +.container-edit-comment .comment-text, +.container-add-reply .comment-text, .page-comments .reply-text, -.page-add-comment .reply-text { +.page-add-comment .reply-text, +.page-view-comments .reply-text, +.container-edit-comment .reply-text, +.container-add-reply .reply-text { color: #000000; font-size: 15px; line-height: 25px; @@ -6519,15 +6541,34 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after padding-right: 15px; } .page-comments .reply-item, -.page-add-comment .reply-item { +.page-add-comment .reply-item, +.page-view-comments .reply-item, +.container-edit-comment .reply-item, +.container-add-reply .reply-item { margin-top: 15px; + padding-right: 16px; + padding-top: 13px; +} +.page-comments .reply-item .header-reply, +.page-add-comment .reply-item .header-reply, +.page-view-comments .reply-item .header-reply, +.container-edit-comment .reply-item .header-reply, +.container-add-reply .reply-item .header-reply { + display: flex; + justify-content: space-between; } .page-comments .reply-item .user-name, -.page-add-comment .reply-item .user-name { - padding-top: 16px; +.page-add-comment .reply-item .user-name, +.page-view-comments .reply-item .user-name, +.container-edit-comment .reply-item .user-name, +.container-add-reply .reply-item .user-name { + padding-top: 3px; } .page-comments .reply-item:before, -.page-add-comment .reply-item:before { +.page-add-comment .reply-item:before, +.page-view-comments .reply-item:before, +.container-edit-comment .reply-item:before, +.container-add-reply .reply-item:before { content: ''; position: absolute; left: auto; @@ -6543,7 +6584,10 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transform-origin: 50% 100%; } .page-comments .comment-quote, -.page-add-comment .comment-quote { +.page-add-comment .comment-quote, +.page-view-comments .comment-quote, +.container-edit-comment .comment-quote, +.container-add-reply .comment-quote { color: #aa5252; border-left: 1px solid #aa5252; padding-left: 10px; @@ -6551,22 +6595,37 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after font-size: 15px; } .page-comments .wrap-comment, -.page-add-comment .wrap-comment { +.page-add-comment .wrap-comment, +.page-view-comments .wrap-comment, +.container-edit-comment .wrap-comment, +.container-add-reply .wrap-comment { padding: 16px 16px 0 16px; } .page-comments .comment-textarea, -.page-add-comment .comment-textarea { +.page-add-comment .comment-textarea, +.page-view-comments .comment-textarea, +.container-edit-comment .comment-textarea, +.container-add-reply .comment-textarea, +.page-comments .reply-textarea, +.page-add-comment .reply-textarea, +.page-view-comments .reply-textarea, +.container-edit-comment .reply-textarea, +.container-add-reply .reply-textarea { margin-top: 10px; background: transparent; border: none; outline: none; width: 100%; min-height: 200px; + font-size: 15px; } .settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after { display: none; } +.container-edit-comment .navbar { + background-color: #FFFFFF; +} .container-view-comment { -webkit-transition: height 100ms; transition: height 100ms; @@ -6576,8 +6635,52 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after height: 50%; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); } +.container-view-comment .page-view-comments { + background-color: #FFFFFF; +} +.container-view-comment .page-view-comments .list-block { + margin-bottom: 100px; +} +.container-view-comment .page-view-comments .list-block ul:before, +.container-view-comment .page-view-comments .list-block ul:after { + content: none; +} +.container-view-comment .page-view-comments .list-block .item-inner { + padding: 0; +} +.container-view-comment .page-view-comments .list-block .item-inner .header-comment { + display: flex; + justify-content: space-between; + padding-right: 16px; +} +.container-view-comment .page-view-comments .list-block .item-inner .header-comment .comment-right { + display: flex; + justify-content: space-between; + width: 70px; +} .container-view-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); +} +.container-view-comment .toolbar:before { + content: none; +} +.container-view-comment .toolbar .toolbar-inner { + display: flex; + justify-content: space-between; + padding: 0 16px; +} +.container-view-comment .toolbar .toolbar-inner .button-left { + min-width: 80px; +} +.container-view-comment .toolbar .toolbar-inner .button-right { + min-width: 62px; + display: flex; + justify-content: space-between; +} +.container-view-comment .toolbar .toolbar-inner .button-right a { + padding: 0 8px; } .container-view-comment .swipe-container { display: flex; @@ -6591,18 +6694,50 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after background: rgba(0, 0, 0, 0.12); border-radius: 2px; } -.container-view-comment .page-content { - padding: 0 16px 80px; +.container-view-comment .list-block { + margin-top: 0; } .container-view-add-comment { height: 100%; } +.container-view-add-comment .navbar { + background-color: #FFFFFF; +} .container-view-add-comment .navbar a.link i + span { margin-left: 0; } .container-view-add-comment .page-add-comment { background-color: #FFFFFF; } +.container-view-add-comment .page-add-comment .page-content { + padding: 0 16px 80px; +} +.container-add-reply { + height: 100%; +} +.container-add-reply .navbar { + background-color: #FFFFFF; +} +.container-add-reply .navbar a.link i + span { + margin-left: 0; +} +.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); +} .tablet .searchbar.document.replace .center .searchbar:first-child { margin-right: 10px; } diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index 96e6cb2621..6d965e8e91 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -6480,17 +6480,27 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after content: none; } .page-comments .list-block .item-inner, -.page-add-comment .list-block .item-inner { +.page-add-comment .list-block .item-inner, +.page-view-comments .list-block .item-inner, +.container-edit-comment .list-block .item-inner, +.container-add-reply .list-block .item-inner { display: block; padding: 16px 0; word-wrap: break-word; } .page-comments p, -.page-add-comment p { +.page-add-comment p, +.page-view-comments p, +.container-edit-comment p, +.container-add-reply p { margin: 0; + word-break: break-word; } .page-comments .user-name, -.page-add-comment .user-name { +.page-add-comment .user-name, +.page-view-comments .user-name, +.container-edit-comment .user-name, +.container-add-reply .user-name { font-size: 17px; line-height: 22px; color: #000000; @@ -6499,8 +6509,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after } .page-comments .comment-date, .page-add-comment .comment-date, +.page-view-comments .comment-date, +.container-edit-comment .comment-date, +.container-add-reply .comment-date, .page-comments .reply-date, -.page-add-comment .reply-date { +.page-add-comment .reply-date, +.page-view-comments .reply-date, +.container-edit-comment .reply-date, +.container-add-reply .reply-date { font-size: 12px; line-height: 18px; color: #6d6d72; @@ -6509,8 +6525,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after } .page-comments .comment-text, .page-add-comment .comment-text, +.page-view-comments .comment-text, +.container-edit-comment .comment-text, +.container-add-reply .comment-text, .page-comments .reply-text, -.page-add-comment .reply-text { +.page-add-comment .reply-text, +.page-view-comments .reply-text, +.container-edit-comment .reply-text, +.container-add-reply .reply-text { color: #000000; font-size: 15px; line-height: 25px; @@ -6519,15 +6541,34 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after padding-right: 15px; } .page-comments .reply-item, -.page-add-comment .reply-item { +.page-add-comment .reply-item, +.page-view-comments .reply-item, +.container-edit-comment .reply-item, +.container-add-reply .reply-item { margin-top: 15px; + padding-right: 16px; + padding-top: 13px; +} +.page-comments .reply-item .header-reply, +.page-add-comment .reply-item .header-reply, +.page-view-comments .reply-item .header-reply, +.container-edit-comment .reply-item .header-reply, +.container-add-reply .reply-item .header-reply { + display: flex; + justify-content: space-between; } .page-comments .reply-item .user-name, -.page-add-comment .reply-item .user-name { - padding-top: 16px; +.page-add-comment .reply-item .user-name, +.page-view-comments .reply-item .user-name, +.container-edit-comment .reply-item .user-name, +.container-add-reply .reply-item .user-name { + padding-top: 3px; } .page-comments .reply-item:before, -.page-add-comment .reply-item:before { +.page-add-comment .reply-item:before, +.page-view-comments .reply-item:before, +.container-edit-comment .reply-item:before, +.container-add-reply .reply-item:before { content: ''; position: absolute; left: auto; @@ -6543,7 +6584,10 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transform-origin: 50% 100%; } .page-comments .comment-quote, -.page-add-comment .comment-quote { +.page-add-comment .comment-quote, +.page-view-comments .comment-quote, +.container-edit-comment .comment-quote, +.container-add-reply .comment-quote { color: #40865c; border-left: 1px solid #40865c; padding-left: 10px; @@ -6551,22 +6595,37 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after font-size: 15px; } .page-comments .wrap-comment, -.page-add-comment .wrap-comment { +.page-add-comment .wrap-comment, +.page-view-comments .wrap-comment, +.container-edit-comment .wrap-comment, +.container-add-reply .wrap-comment { padding: 16px 16px 0 16px; } .page-comments .comment-textarea, -.page-add-comment .comment-textarea { +.page-add-comment .comment-textarea, +.page-view-comments .comment-textarea, +.container-edit-comment .comment-textarea, +.container-add-reply .comment-textarea, +.page-comments .reply-textarea, +.page-add-comment .reply-textarea, +.page-view-comments .reply-textarea, +.container-edit-comment .reply-textarea, +.container-add-reply .reply-textarea { margin-top: 10px; background: transparent; border: none; outline: none; width: 100%; min-height: 200px; + font-size: 15px; } .settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after { display: none; } +.container-edit-comment .navbar { + background-color: #FFFFFF; +} .container-view-comment { -webkit-transition: height 100ms; transition: height 100ms; @@ -6576,8 +6635,52 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after height: 50%; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); } +.container-view-comment .page-view-comments { + background-color: #FFFFFF; +} +.container-view-comment .page-view-comments .list-block { + margin-bottom: 100px; +} +.container-view-comment .page-view-comments .list-block ul:before, +.container-view-comment .page-view-comments .list-block ul:after { + content: none; +} +.container-view-comment .page-view-comments .list-block .item-inner { + padding: 0; +} +.container-view-comment .page-view-comments .list-block .item-inner .header-comment { + display: flex; + justify-content: space-between; + padding-right: 16px; +} +.container-view-comment .page-view-comments .list-block .item-inner .header-comment .comment-right { + display: flex; + justify-content: space-between; + width: 70px; +} .container-view-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); +} +.container-view-comment .toolbar:before { + content: none; +} +.container-view-comment .toolbar .toolbar-inner { + display: flex; + justify-content: space-between; + padding: 0 16px; +} +.container-view-comment .toolbar .toolbar-inner .button-left { + min-width: 80px; +} +.container-view-comment .toolbar .toolbar-inner .button-right { + min-width: 62px; + display: flex; + justify-content: space-between; +} +.container-view-comment .toolbar .toolbar-inner .button-right a { + padding: 0 8px; } .container-view-comment .swipe-container { display: flex; @@ -6591,18 +6694,50 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after background: rgba(0, 0, 0, 0.12); border-radius: 2px; } -.container-view-comment .page-content { - padding: 0 16px 80px; +.container-view-comment .list-block { + margin-top: 0; } .container-view-add-comment { height: 100%; } +.container-view-add-comment .navbar { + background-color: #FFFFFF; +} .container-view-add-comment .navbar a.link i + span { margin-left: 0; } .container-view-add-comment .page-add-comment { background-color: #FFFFFF; } +.container-view-add-comment .page-add-comment .page-content { + padding: 0 16px 80px; +} +.container-add-reply { + height: 100%; +} +.container-add-reply .navbar { + background-color: #FFFFFF; +} +.container-add-reply .navbar a.link i + span { + margin-left: 0; +} +.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); +} i.icon.icon-search { width: 24px; height: 24px;