From 299db5fcb69540b528e2d5f9a6ec487e94fd68c3 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Thu, 11 Mar 2021 23:38:53 +0300
Subject: [PATCH] [mobile] Make view current comments (fix on tablet, add
 reply, prev and next comment, add styles)

---
 .../lib/view/collaboration/Comments.jsx       | 30 +++++++++++++++----
 .../mobile/resources/less/comments.less       | 20 +++++++++++++
 .../resources/less/material/comments.less     |  8 ++++-
 3 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/apps/common/mobile/lib/view/collaboration/Comments.jsx b/apps/common/mobile/lib/view/collaboration/Comments.jsx
index a6495feddc..e76f84edc2 100644
--- a/apps/common/mobile/lib/view/collaboration/Comments.jsx
+++ b/apps/common/mobile/lib/view/collaboration/Comments.jsx
@@ -652,13 +652,31 @@ const CommentList = inject("storeComments", "storeAppOptions")(observer(({storeC
     const [reply, setReply] = useState();
     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 (
         <Fragment>
             <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'>
-                    <Link href='#'><Icon slot='media' icon='icon-prev'/></Link>
-                    <Link href='#'><Icon slot='media' icon='icon-next'/></Link>
+                    <Link href='#' onClick={onViewPrevComment}><Icon slot='media' icon='icon-prev'/></Link>
+                    <Link href='#' onClick={onViewNextComment}><Icon slot='media' icon='icon-next'/></Link>
                 </div>
             </Toolbar>
             <Page className='page-current-comment'>
@@ -785,13 +803,13 @@ const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveCommen
     )
 };
 
-const ViewCommentPopover = () => {
+const ViewCommentPopover = ({onCommentMenuClick, onResolveComment}) => {
     useEffect(() => {
         f7.popover.open('#view-comment-popover', '#btn-coauth');
     });
     return (
-        <Popover id='view-comment-popover'>
-            <CommentList />
+        <Popover id='view-comment-popover' style={{height: '410px'}}>
+            <CommentList onCommentMenuClick={onCommentMenuClick} onResolveComment={onResolveComment} />
         </Popover>
     )
 };
diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less
index c4f1a30360..1387992e9d 100644
--- a/apps/common/mobile/resources/less/comments.less
+++ b/apps/common/mobile/resources/less/comments.less
@@ -130,6 +130,9 @@
       border-radius: 2px;
     }
   }
+}
+
+#view-comment-popover, #view-comment-sheet {
   .toolbar {
     position: fixed;
     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 {
   position: relative;
   .page-content {
diff --git a/apps/common/mobile/resources/less/material/comments.less b/apps/common/mobile/resources/less/material/comments.less
index 35725b3300..b1c72ccce8 100644
--- a/apps/common/mobile/resources/less/material/comments.less
+++ b/apps/common/mobile/resources/less/material/comments.less
@@ -39,7 +39,7 @@
   }
 
   .comment-list {
-    .item-inner:after {
+    .item-inner:after, li:last-child li .item-inner:after {
       content: none;
     }
     .comment-header {
@@ -79,4 +79,10 @@
     }
   }
 
+  #view-comment-popover {
+    .toolbar-bottom:after {
+      content: none;
+    }
+  }
+
 }
\ No newline at end of file