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

[mobile] Make comment view from context menu

Browse source
This commit is contained in:
JuliaSvinareva 2021-03-08 21:30:42 +03:00
parent f63f4d3a7b
commit 48c50b145b
14 changed files with 236 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
apps/common/mobile/lib/controller/collaboration/Comments.jsx
View file

@ -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(
<ViewComments onCommentMenuClick={this.onCommentMenuClick}
onResolveComment={this.onResolveComment}
/>
<Fragment>
{this.props.allComments && <ViewComments onCommentMenuClick={this.onCommentMenuClick} onResolveComment={this.onResolveComment} />}
{this.state.isOpenViewCurComments && <ViewCurrentComments opened={this.state.isOpenViewCurComments} closeCurComments={this.closeViewCurComments} />}
</Fragment>
)
}
}

7
apps/common/mobile/lib/view/collaboration/Collaboration.jsx
View file

@ -49,7 +49,12 @@ const routes = [
},
{
path: '/comments/',
component: ViewCommentsController
component: ViewCommentsController,
options: {
props: {
allComments: true
}
}
}
];

133
apps/common/mobile/lib/view/collaboration/Comments.jsx
View file

@ -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 (
<List>
</List>
)
};
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 (
<Sheet id='view-comment-sheet'>
<Toolbar position='bottom'>
<Link className='btn-add-reply' href='#'>{_t.textAddReply}</Link>
<div className='comment-navigation row'>
<Link href='#'><Icon slot='media' icon='icon-prev'/></Link>
<Link href='#'><Icon slot='media' icon='icon-next'/></Link>
</div>
</Toolbar>
<div id='swipe-handler' className='swipe-container'>
<Icon icon='icon-swipe'/>
</div>
<CommentList />
</Sheet>
)
};
const ViewCommentPopover = () => {
useEffect(() => {
f7.popover.open('#view-comment-popover', '#btn-coauth');
});
return (
<Popover id='view-comment-popover'>
<CommentList />
</Popover>
)
};
const ViewCurrentComments = props => {
return (
Device.phone ?
<ViewCommentSheet {...props}/> :
<ViewCommentPopover {...props}/>
)
};
export {
AddComment,
EditComment,
AddReply,
EditReply,
_ViewComments as ViewComments
}
_ViewComments as ViewComments,
ViewCurrentComments
};

53
apps/common/mobile/resources/less/comments.less
View file

@ -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;
}
}
}
}

2
apps/common/mobile/resources/less/common.less
View file

@ -8,8 +8,6 @@
@background-normal: @white;
@autoColor: @black;
@comment-date: #6d6d72;
.popup, .popover, .sheet-modal {
.list {
&:first-child {

11
apps/common/mobile/resources/less/ios/icons.less
View file

@ -4,5 +4,16 @@
&.icon_mask {
background-color: white;
}
&.icon-prev {
width: 22px;
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
}
&.icon-next {
width: 22px;
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
}
}
}

11
apps/common/mobile/resources/less/material/icons.less
View file

@ -4,5 +4,16 @@
&.icon_mask {
background-color: black;
}
&.icon-prev {
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="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>');
}
&.icon-next {
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.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>');
}
}
}

3
apps/documenteditor/mobile/src/controller/ContextMenu.jsx
View file

@ -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);

8
apps/documenteditor/mobile/src/controller/Main.jsx
View file

@ -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 {
<CommentsController />
<AddCommentController />
<EditCommentController />
<ViewCommentsController />
</Fragment>
)
}

10
apps/documenteditor/mobile/src/less/icons-material.less
View file

@ -440,16 +440,6 @@
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="#40865C" fill-opacity="0.6"/></svg>');
}
&.icon-prev-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="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>');
}
&.icon-next-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.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>');
}
&.icon-done-comment {
width: 24px;
height: 24px;

12
apps/presentationeditor/mobile/src/less/icons-ios.less
View file

@ -187,18 +187,6 @@
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
}
&.icon-prev, &.icon-prev-comment {
width: 22px;
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
}
&.icon-next, &.icon-next-comment {
width: 22px;
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
}
&.icon-table-add-column-left {
width: 22px;
height: 22px;

12
apps/presentationeditor/mobile/src/less/icons-material.less
View file

@ -471,18 +471,6 @@
.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="#40865C" fill-opacity="0.6"/></svg>');
}
&.icon-prev-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="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>');
}
&.icon-next-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.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>');
}
&.icon-done-comment {
width: 24px;
height: 24px;

10
apps/spreadsheeteditor/mobile/src/less/icons-ios.less
View file

@ -123,16 +123,6 @@
height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
}
&.icon-prev, &.icon-prev-comment {
width: 22px;
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
}
&.icon-next, &.icon-next-comment {
width: 22px;
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
}
&.icon-expand-down {
width: 22px;
height: 22px;

10
apps/spreadsheeteditor/mobile/src/less/icons-material.less
View file

@ -365,16 +365,6 @@
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="#40865C" fill-opacity="0.6"/></svg>');
}
&.icon-prev-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="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>');
}
&.icon-next-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.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>');
}
&.icon-done-comment {
width: 24px;
height: 24px;