component in progress

editors/editoria/src/layout/EditoriaLayout.js

@@ -124,14 +124,13 @@ const CommentsContainerNotes = styled.div`
 
 const CommentTrackToolsContainer = styled.div`
   padding: ${grid(2)}0 0 0;
-  position: fixed;
+  position: absolute;
   display: flex;
-  margin-left: 5px;
   flex-dirextion: row;
   // justify-content: center;
   z-index: 1;
   height: 30px;
-  width: 27%;
+  width: 34%;
   background: #fff;
 `;
 

wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
 import { WaxContext } from 'wax-prosemirror-core';
+import Icon from '../../helpers/Icon';
 
 const Wrapper = styled.div`
   background: #fff;
@@ -17,7 +18,32 @@ const Wrapper = styled.div`
 
 const TotalSuggestions = styled.span`
   color: #bdc2ca;
-  font-size: 15px;
+  font-size: 14px;
+`;
+
+const TotalComments = styled.span`
+  color: #bdc2ca;
+  font-size: 14px;
+`;
+
+const ShowComments = styled.div`
+  color: #bdc2ca;
+  font-size: 14px;
+
+  svg {
+    cursor: not-allowed;
+    fill: #85adff;
+    opacity: 0.6;
+    width: 50px !important;
+    height: 50px !important;
+  }
+`;
+
+const StyledToggleOn = styled(Icon)`
+  cursor: pointer;
+  height: 32px;
+  margin-left: auto;
+  width: 32px;
 `;
 
 const getInlineTracks = main => {
@@ -51,18 +77,34 @@ const getTrackBlockNodes = main => {
   return trackBlockNodes;
 };
 
+const getComments = main => {
+  const comments = DocumentHelpers.findChildrenByMark(
+    main.state.doc,
+    main.state.schema.marks.comment,
+    true,
+  );
+  return comments;
+};
+
 const TrackChangeOptionsComponent = ({ groups }) => {
   console.log(groups);
   const { app, view, activeViewId } = useContext(WaxContext);
 
   const inlineTracks = getInlineTracks(view.main).length;
   const blockTracks = getTrackBlockNodes(view.main).length;
+  const comments = getComments(view.main).length;
 
   return (
     <Wrapper>
       <TotalSuggestions>
-        {inlineTracks + blockTracks} Suggestions
+        {inlineTracks + blockTracks} SUGGESTIONS
       </TotalSuggestions>
+      <div>-----</div>
+      <TotalComments>{comments} COMMENTS</TotalComments>
+      <ShowComments>
+        Show comments
+        <StyledToggleOn name="toggleOn" />
+      </ShowComments>
     </Wrapper>
   );
 };

wax-prosemirror-components/src/icons/icons.js

@@ -296,7 +296,14 @@ export default {
     <Svg className={className} fill="none" viewBox="0 0 24 24">
       <title> Viewing </title>
       <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />{' '}
+      <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
+    </Svg>
+  ),
+  toggleOn: ({ className }) => (
+    <Svg className={className} fill="none" viewBox="0 0 24 24">
+      <title> Viewing </title>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z" />
     </Svg>
   ),
   specialCharacters: ({ className }) => (