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

[mobile] Make view current comments (fix on tablet, add reply, prev and next comment, add styles)

Browse source
This commit is contained in:
JuliaSvinareva 2021-03-11 23:38:53 +03:00
parent 3b40251853
commit 299db5fcb6
3 changed files with 51 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -652,13 +652,31 @@ const CommentList = inject("storeComments", "storeAppOptions")(observer(({storeC
const [reply, setReply] = useState(); const [reply, setReply] = useState();
const [replyActionsOpened, openActionReply] = useState(false); const [replyActionsOpened, openActionReply] = useState(false);
const onViewPrevComment = () => {
if (currentIndex - 1 < 0) {
setCurrentIndex(comments.length - 1);
} else {
setCurrentIndex(currentIndex - 1);
}
};
const onViewNextComment = () => {
if (currentIndex + 1 === comments.length) {
setCurrentIndex(0);
} else {
setCurrentIndex(currentIndex + 1);
}
};
return ( return (
<Fragment> <Fragment>
<Toolbar position='bottom'> <Toolbar position='bottom'>
<Link className='btn-add-reply' href='#'>{_t.textAddReply}</Link> {!viewMode &&
<Link className='btn-add-reply' href='#' onClick={() => {onCommentMenuClick('addReply', comment);}}>{_t.textAddReply}</Link>
}
<div className='comment-navigation row'> <div className='comment-navigation row'>
<Link href='#'><Icon slot='media' icon='icon-prev'/></Link> <Link href='#' onClick={onViewPrevComment}><Icon slot='media' icon='icon-prev'/></Link>
<Link href='#'><Icon slot='media' icon='icon-next'/></Link> <Link href='#' onClick={onViewNextComment}><Icon slot='media' icon='icon-next'/></Link>
</div> </div>
</Toolbar> </Toolbar>
<Page className='page-current-comment'> <Page className='page-current-comment'>
@ -785,13 +803,13 @@ const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveCommen
) )
}; };
const ViewCommentPopover = () => { const ViewCommentPopover = ({onCommentMenuClick, onResolveComment}) => {
useEffect(() => { useEffect(() => {
f7.popover.open('#view-comment-popover', '#btn-coauth'); f7.popover.open('#view-comment-popover', '#btn-coauth');
}); });
return ( return (
<Popover id='view-comment-popover'> <Popover id='view-comment-popover' style={{height: '410px'}}>
<CommentList /> <CommentList onCommentMenuClick={onCommentMenuClick} onResolveComment={onResolveComment} />
</Popover> </Popover>
) )
}; };

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

@ -130,6 +130,9 @@
border-radius: 2px; border-radius: 2px;
} }
} }
}
#view-comment-popover, #view-comment-sheet {
.toolbar { .toolbar {
position: fixed; position: fixed;
background-color: @white; background-color: @white;
@ -156,6 +159,23 @@
} }
} }
#view-comment-popover {
background-color: @white;
.page .page-content {
padding: 16px;
padding-left: 0;
}
.comment-list {
.item-content {
.item-inner {
.comment-header, .reply-header {
padding-right: 0;
}
}
}
}
}
.page-current-comment { .page-current-comment {
position: relative; position: relative;
.page-content { .page-content {

8
apps/common/mobile/resources/less/material/comments.less
View file

@ -39,7 +39,7 @@
} }
.comment-list { .comment-list {
.item-inner:after { .item-inner:after, li:last-child li .item-inner:after {
content: none; content: none;
} }
.comment-header { .comment-header {
@ -79,4 +79,10 @@
} }
} }
#view-comment-popover {
.toolbar-bottom:after {
content: none;
}
}
} }