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

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

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 {

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