From d4f384e532e528649667afb92df0d3795d07ee7c Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 26 Nov 2021 00:01:37 +0400 Subject: [PATCH] [common] Edit comment list --- .../lib/controller/collaboration/Comments.jsx | 28 +++++++++++- .../lib/view/collaboration/Comments.jsx | 42 +++++++++++++++--- .../mobile/resources/less/comments.less | 40 +++++++++++------ .../resources/less/common-material.less | 44 +++++++++++++++++++ apps/common/mobile/resources/less/icons.less | 10 +++++ 5 files changed, 142 insertions(+), 22 deletions(-) diff --git a/apps/common/mobile/lib/controller/collaboration/Comments.jsx b/apps/common/mobile/lib/controller/collaboration/Comments.jsx index 8faa8277c..88659ad33 100644 --- a/apps/common/mobile/lib/controller/collaboration/Comments.jsx +++ b/apps/common/mobile/lib/controller/collaboration/Comments.jsx @@ -444,6 +444,7 @@ class ViewCommentsController extends Component { this.onCommentMenuClick = this.onCommentMenuClick.bind(this); this.onResolveComment = this.onResolveComment.bind(this); this.closeViewCurComments = this.closeViewCurComments.bind(this); + this.onAddNewComment = this.onAddNewComment.bind(this); this.state = { isOpenViewCurComments: false @@ -602,6 +603,29 @@ class ViewCommentsController extends Component { } } + onAddNewComment (commentText, documentFlag) { + const api = Common.EditorApi.get(); + let comment; + + if (typeof Asc.asc_CCommentDataWord !== 'undefined') { + comment = new Asc.asc_CCommentDataWord(null); + } else { + comment = new Asc.asc_CCommentData(null); + } + if (commentText.length > 0) { + comment.asc_putText(commentText); + comment.asc_putTime(utcDateToString(new Date())); + comment.asc_putOnlyOfficeTime(ooDateToString(new Date())); + comment.asc_putUserId(this.props.users.currentUser.asc_getIdOriginal()); + comment.asc_putUserName(this.props.users.currentUser.asc_getUserName()); + comment.asc_putSolved(false); + + !!comment.asc_putDocumentFlag && comment.asc_putDocumentFlag(documentFlag); + + api.asc_addComment(comment); + } + } + showComment (comment) { const api = Common.EditorApi.get(); @@ -614,8 +638,8 @@ class ViewCommentsController extends Component { return( {this.props.allComments && } - {this.state.isOpenViewCurComments && } + {this.state.isOpenViewCurComments && { +const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(observer(({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment, storeReview, wsProps, onAddNewComment}) => { const { t } = useTranslation(); const _t = t('Common.Collaboration', {returnObjects: true}); const isAndroid = Device.android; @@ -772,6 +772,22 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob } }; + const resizeArea = (text_id, minHeight, maxHeight) => { + let area = $$(text_id)[0]; + let area_hidden = $$(text_id + "_hidden")[0]; + let text = ''; + + area.value.replace(/[<>]/g, '_').split("\n").forEach(function(s) { + text = text + '
' + s.replace(/\s\s/g, '  ') + ' 
'+"\n"; + }); + + area_hidden.innerHTML = text; + let height = area_hidden.offsetHeight + 15; + height = Math.max(minHeight, height); + height = Math.min(maxHeight, height); + area.style.height = height + 'px'; + } + if(!comment) { if (comments.length > 0) { onViewNextComment(); @@ -782,16 +798,28 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob return ( - {!viewMode && + {/* {!viewMode && {onCommentMenuClick('addReply', comment);}}>{_t.textAddReply} }
-
+ */} +
+ +
+ {/*
+ View All +
+ + +
+
*/}
@@ -868,7 +896,7 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob })); -const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveComment, wsProps}) => { +const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveComment, wsProps, onAddNewComment}) => { useEffect(() => { f7.sheet.open('#view-comment-sheet'); }); @@ -914,19 +942,19 @@ const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveCommen
- + ) }; -const ViewCommentPopover = ({onCommentMenuClick, onResolveComment, wsProps}) => { +const ViewCommentPopover = ({onCommentMenuClick, onResolveComment, wsProps, onAddNewComment}) => { useEffect(() => { f7.popover.open('#view-comment-popover', '#btn-coauth'); }); return ( - + ) }; diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 9dc7945cb..6c09a3df5 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -52,19 +52,19 @@ padding-right: 0; padding-bottom: 0; padding-top: 16px; - .comment-header { - display: flex; - justify-content: space-between; - padding-right: 16px; - .right { - display: flex; - justify-content: flex-end; - width: 70px; - .comment-resolve { - margin-right: 10px; - } - } - } + // .comment-header { + // display: flex; + // justify-content: space-between; + // padding-right: 16px; + // .right { + // display: flex; + // justify-content: flex-end; + // width: 70px; + // .comment-resolve { + // margin-right: 10px; + // } + // } + // } .reply-header { display: flex; justify-content: space-between; @@ -113,6 +113,20 @@ } } +.comment-header { + display: flex; + justify-content: space-between; + padding-right: 16px; + .right { + display: flex; + justify-content: flex-end; + width: 70px; + .comment-resolve { + margin-right: 10px; + } + } +} + .edit-comment-popup, .add-reply-popup, .edit-reply-popup { z-index: 20000; } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index da9496959..1dd0c4a92 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -618,4 +618,48 @@ margin-right: 0; } } + + // Comments + + .comment-text_hidden { + position: relative; + } + + #comment-text_hidden { + visibility:hidden; + position: absolute; + } + + .comment-field { + position: relative; + background: @background-tertiary; + border: 0.5px solid rgba(0, 0, 0, 0.15); + border-radius: 16px; + height: 32px; + padding: 4px 41px 4px 16px; + color: @text-normal; + width: 100%; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.25px; + word-wrap: break-word; + overflow:hidden; + &::placeholder { + color: @text-tertiary; + } + } + + .comment-button { + position: absolute; + right: 27px; + top: 15px; + width: 19px; + height: 19px; + background: transparent; + outline: none; + border: 0; + padding: 0; + } } diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index ac7a718c2..b56f5b7d8 100644 --- a/apps/common/mobile/resources/less/icons.less +++ b/apps/common/mobile/resources/less/icons.less @@ -30,4 +30,14 @@ i.icon { height: 24px; .encoded-svg-background(''); } + &.icon-comment-button { + width: 18px; + height: 18px; + .encoded-svg-mask('', @text-tertiary); + } + &.icon-comment-button.active { + width: 18px; + height: 18px; + .encoded-svg-mask(''); + } }