From 48c50b145bfdcc805121c1a9ed9936491b53ecaf Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Mon, 8 Mar 2021 21:30:42 +0300 Subject: [PATCH] [mobile] Make comment view from context menu --- .../lib/controller/collaboration/Comments.jsx | 26 ++-- .../lib/view/collaboration/Collaboration.jsx | 7 +- .../lib/view/collaboration/Comments.jsx | 133 +++++++++++++++++- .../mobile/resources/less/comments.less | 53 ++++++- apps/common/mobile/resources/less/common.less | 2 - .../mobile/resources/less/ios/icons.less | 11 ++ .../mobile/resources/less/material/icons.less | 11 ++ .../mobile/src/controller/ContextMenu.jsx | 3 + .../mobile/src/controller/Main.jsx | 8 +- .../mobile/src/less/icons-material.less | 10 -- .../mobile/src/less/icons-ios.less | 12 -- .../mobile/src/less/icons-material.less | 12 -- .../mobile/src/less/icons-ios.less | 10 -- .../mobile/src/less/icons-material.less | 10 -- 14 files changed, 236 insertions(+), 72 deletions(-) diff --git a/apps/common/mobile/lib/controller/collaboration/Comments.jsx b/apps/common/mobile/lib/controller/collaboration/Comments.jsx index 331adc103..8b44d1322 100644 --- a/apps/common/mobile/lib/controller/collaboration/Comments.jsx +++ b/apps/common/mobile/lib/controller/collaboration/Comments.jsx @@ -5,7 +5,7 @@ import {Device} from '../../../../../common/mobile/utils/device'; import { withTranslation} from 'react-i18next'; import { LocalStorage } from '../../../utils/LocalStorage'; -import {AddComment, EditComment, AddReply, EditReply, ViewComments} from '../../view/collaboration/Comments'; +import {AddComment, EditComment, AddReply, EditReply, ViewComments, ViewCurrentComments} from '../../view/collaboration/Comments'; // utils const timeZoneOffsetInMs = (new Date()).getTimezoneOffset() * 60000; @@ -409,9 +409,18 @@ class ViewCommentsController extends Component { super(props); this.onCommentMenuClick = this.onCommentMenuClick.bind(this); this.onResolveComment = this.onResolveComment.bind(this); - this.closeEditComment = this.closeEditComment.bind(this); + this.closeViewCurComments = this.closeViewCurComments.bind(this); - this.currentUser = this.props.users.currentUser; + this.state = { + isOpenViewCurComments: false + }; + + Common.Notifications.on('viewcomment', () => { + this.setState({isOpenViewCurComments: true}); + }); + } + closeViewCurComments () { + this.setState({isOpenViewCurComments: false}); } onResolveComment (comment) { let reply = null, @@ -533,15 +542,12 @@ class ViewCommentsController extends Component { break; } } - - closeEditComment () { - this.setState({showEditComment: false}); - } render() { return( - + + {this.props.allComments && } + {this.state.isOpenViewCurComments && } + ) } } diff --git a/apps/common/mobile/lib/view/collaboration/Collaboration.jsx b/apps/common/mobile/lib/view/collaboration/Collaboration.jsx index 76f48102c..03e2a3051 100644 --- a/apps/common/mobile/lib/view/collaboration/Collaboration.jsx +++ b/apps/common/mobile/lib/view/collaboration/Collaboration.jsx @@ -49,7 +49,12 @@ const routes = [ }, { path: '/comments/', - component: ViewCommentsController + component: ViewCommentsController, + options: { + props: { + allComments: true + } + } } ]; diff --git a/apps/common/mobile/lib/view/collaboration/Comments.jsx b/apps/common/mobile/lib/view/collaboration/Comments.jsx index 16f1ba3ce..4a6fb606a 100644 --- a/apps/common/mobile/lib/view/collaboration/Comments.jsx +++ b/apps/common/mobile/lib/view/collaboration/Comments.jsx @@ -1,6 +1,6 @@ import React, {useState, useEffect, Fragment} from 'react'; import {observer, inject} from "mobx-react"; -import { f7, Popup, Page, Navbar, NavLeft, NavRight, NavTitle, Link, Input, Icon, List, ListItem, Actions, ActionsGroup, ActionsButton } from 'framework7-react'; +import { f7, Popup, Sheet, Popover, Page, Toolbar, Navbar, NavLeft, NavRight, NavTitle, Link, Input, Icon, List, ListItem, Actions, ActionsGroup, ActionsButton } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../utils/device'; @@ -633,10 +633,137 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes const _ViewComments = inject('storeComments', 'storeAppOptions')(observer(ViewComments)); +const CommentList = () => { + return ( + + + + ) +}; + +const ViewCommentSheet = ({closeCurComments}) => { + const { t } = useTranslation(); + const _t = t('Common.Collaboration', {returnObjects: true}); + + const appHeight = f7.height; + //const [sheetHeight, setSheetHeight] = useState('45%'); + + let swipeStart, + swipeChange; + + useEffect(() => { + f7.sheet.open('#view-comment-sheet'); + const swipeHandler = document.getElementById('swipe-handler'); + swipeHandler.addEventListener('touchstart', handleTouchStart); + swipeHandler.addEventListener('touchmove', handleTouchMove); + swipeHandler.addEventListener('touchend', handleTouchEnd); + }); + const handleTouchStart = (event) => { + console.log('start'); + const touchObj = event.changedTouches[0]; + swipeStart = parseInt(touchObj.clientY); + swipeChange = parseInt(touchObj.clientY); + }; + const handleTouchMove = (event) => { + console.log('move'); + const touchObj = event.changedTouches[0]; + const dist = parseInt(touchObj.clientY) - swipeStart; + const height = (appHeight - parseInt(touchObj.clientY)).toString(); + document.getElementById('view-comment-sheet').style.setProperty('height', `${height}px`); + /*if (dist < 0) { + newHeight = '100%'; + me.swipeFull = true; + me.closeCommentPicker = false; + if (window.SSE) { + if ($('.container-view-comment').hasClass('onHide')) { + $('.container-view-comment').removeClass('onHide'); + } + } else { + $('.container-view-comment').css('opacity', '1'); + } + } else if (dist < 100) { + newHeight = '50%'; + me.swipeFull = false; + me.closeCommentPicker = false; + if (window.SSE) { + if ($('.container-view-comment').hasClass('onHide')) { + $('.container-view-comment').removeClass('onHide'); + } + } else { + $('.container-view-comment').css('opacity', '1'); + } + } else { + me.closeCommentPicker = true; + if (window.SSE) { + if (!$('.container-view-comment').hasClass('onHide')) { + $('.container-view-comment').addClass('onHide'); + } + } else { + $('.container-view-comment').css('opacity', '0.6'); + } + } + $('.container-view-comment').css('height', newHeight); + me.swipeHeight = newHeight; + e.preventDefault();*/ + }; + const handleTouchEnd = () => { + console.log('end'); + /*var touchobj = e.changedTouches[0]; + var swipeEnd = parseInt(touchobj.clientY); + var dist = swipeEnd - me.swipeStart; + if (me.closeCommentPicker) { + uiApp.closeModal(); + me.modalViewComment.remove(); + } else if (me.swipeFull) { + if (dist > 20) { + $('.container-view-comment').css('height', '50%'); + } + } + me.swipeHeight = undefined; + me.swipeChange = undefined; + me.closeCommentPicker = undefined;*/ + }; + return ( + + + {_t.textAddReply} +
+ + +
+ +
+ +
+ + + ) +}; + +const ViewCommentPopover = () => { + useEffect(() => { + f7.popover.open('#view-comment-popover', '#btn-coauth'); + }); + return ( + + + + ) +}; + +const ViewCurrentComments = props => { + return ( + Device.phone ? + : + + ) +}; + export { AddComment, EditComment, AddReply, EditReply, - _ViewComments as ViewComments -} + _ViewComments as ViewComments, + ViewCurrentComments +}; diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 0b4be0bec..84ac95711 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -1,3 +1,6 @@ +@comment-date: #6d6d72; +@swipe-icon: rgba(0, 0, 0, 0.12); + @import './ios/comments'; @import './material/comments'; @@ -74,7 +77,6 @@ line-height: 18px; color: @comment-date; margin: 0; - margin-top: 0; } .comment-quote { color: @themeColor; @@ -103,4 +105,53 @@ .edit-comment-popup, .add-reply-popup, .edit-reply-popup { z-index: 20000; +} + +#view-comment-sheet { + background-color: @white; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + height: 45%; + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12); + //-webkit-transition: height 100ms; + //transition: height 120ms; + .top { + height: 90%; + } + .swipe-container { + display: flex; + justify-content: center; + height: 40px; + .icon-swipe { + margin-top: 8px; + width: 40px; + height: 4px; + background: @swipe-icon; + border-radius: 2px; + } + } + .toolbar { + position: fixed; + background-color: @white; + 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); + .link { + --f7-toolbar-link-color: @themeColor; + } + .toolbar-inner { + padding: 0 16px; + } + .btn-add-reply { + padding: 0; + min-width: 80px; + font-size: 16px; + } + .comment-navigation { + min-width: 62px; + display: flex; + justify-content: space-between; + .link { + padding: 0 12px; + } + } + } } \ No newline at end of file diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 690e48226..ea20b6639 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -8,8 +8,6 @@ @background-normal: @white; @autoColor: @black; -@comment-date: #6d6d72; - .popup, .popover, .sheet-modal { .list { &:first-child { diff --git a/apps/common/mobile/resources/less/ios/icons.less b/apps/common/mobile/resources/less/ios/icons.less index 5fa78c04f..820a9527a 100644 --- a/apps/common/mobile/resources/less/ios/icons.less +++ b/apps/common/mobile/resources/less/ios/icons.less @@ -4,5 +4,16 @@ &.icon_mask { background-color: white; } + + &.icon-prev { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-next { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } } } diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index 6891a5b97..6e8f3626b 100644 --- a/apps/common/mobile/resources/less/material/icons.less +++ b/apps/common/mobile/resources/less/material/icons.less @@ -4,5 +4,16 @@ &.icon_mask { background-color: black; } + + &.icon-prev { + width: 24px; + height: 24px; + .encoded-svg-background(''); + } + &.icon-next { + width: 24px; + height: 24px; + .encoded-svg-background(''); + } } } diff --git a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx index 3e11cd706..c82ae0f3a 100644 --- a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx +++ b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx @@ -51,6 +51,9 @@ class ContextMenu extends ContextMenuController { case 'addcomment': Common.Notifications.trigger('addcomment'); break; + case 'viewcomment': + Common.Notifications.trigger('viewcomment'); + break; } console.log("click context menu item: " + action); diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index f4f9989e1..564edf439 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -6,7 +6,12 @@ import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/collaboration/Collaboration.jsx'; import {InitReviewController as ReviewController} from '../../../../common/mobile/lib/controller/collaboration/Review.jsx'; import { onAdvancedOptions } from './settings/Download.jsx'; -import {CommentsController, AddCommentController, EditCommentController} from "../../../../common/mobile/lib/controller/collaboration/Comments"; +import { + CommentsController, + AddCommentController, + EditCommentController, + ViewCommentsController +} from "../../../../common/mobile/lib/controller/collaboration/Comments"; @inject( "storeAppOptions", @@ -336,6 +341,7 @@ class MainController extends Component { + ) } diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 8b6dc0e2c..8590b8555 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -440,16 +440,6 @@ height: 24px; .encoded-svg-background(''); } - &.icon-prev-comment { - width: 24px; - height: 24px; - .encoded-svg-background(''); - } - &.icon-next-comment { - width: 24px; - height: 24px; - .encoded-svg-background(''); - } &.icon-done-comment { width: 24px; height: 24px; diff --git a/apps/presentationeditor/mobile/src/less/icons-ios.less b/apps/presentationeditor/mobile/src/less/icons-ios.less index 6b77662cd..d43e2a6b4 100644 --- a/apps/presentationeditor/mobile/src/less/icons-ios.less +++ b/apps/presentationeditor/mobile/src/less/icons-ios.less @@ -187,18 +187,6 @@ .encoded-svg-mask(''); } - &.icon-prev, &.icon-prev-comment { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - - &.icon-next, &.icon-next-comment { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - &.icon-table-add-column-left { width: 22px; height: 22px; diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index b1de085b6..3c7098570 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -471,18 +471,6 @@ .encoded-svg-background(''); } - &.icon-prev-comment { - width: 24px; - height: 24px; - .encoded-svg-background(''); - } - - &.icon-next-comment { - width: 24px; - height: 24px; - .encoded-svg-background(''); - } - &.icon-done-comment { width: 24px; height: 24px; diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less index ec61398a8..ded1d72c2 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less @@ -123,16 +123,6 @@ height: 22px; .encoded-svg-mask(''); } - &.icon-prev, &.icon-prev-comment { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - &.icon-next, &.icon-next-comment { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } &.icon-expand-down { width: 22px; height: 22px; diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less index 2f1fcf0c7..bfaba3ec2 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less @@ -365,16 +365,6 @@ height: 24px; .encoded-svg-background(''); } - &.icon-prev-comment { - width: 24px; - height: 24px; - .encoded-svg-background(''); - } - &.icon-next-comment { - width: 24px; - height: 24px; - .encoded-svg-background(''); - } &.icon-done-comment { width: 24px; height: 24px;