disable option to tabs

editors/editoria/src/layout/EditoriaLayout.js

@@ -139,6 +139,13 @@ const CommentTrackTools = styled.div`
   position: relative;
 `;
 
+const CommentTrackOptions = styled.div`
+  display: flex;
+  margin-left: 10px;
+  bottom: 5px;
+  position: relative;
+`;
+
 const NotesAreaContainer = styled.div`
   background: #fff;
   display: flex;
@@ -297,7 +304,9 @@ const EditoriaLayout = ({ editor }) => {
                     <CommentTrackTools>
                       {commentsTracks + trackBlockNodes} COMMENTS AND
                       SUGGESTIONS
-                      <CommentTrackToolBar />
+                      <CommentTrackOptions>
+                        <CommentTrackToolBar />
+                      </CommentTrackOptions>
                     </CommentTrackTools>
                   </CommentTrackToolsContainer>
                   <RightArea area="main" />

wax-prosemirror-components/src/ui/tabs/Tabs.js

@@ -16,30 +16,36 @@ const Tabs = styled.div`
 `;
 
 const activeTab = css`
-  box-shadow: 0 0 1px ${th('colorPrimary')};
   background: ${th('colorBackgroundTabs')};
+  box-shadow: 0 0 1px ${th('colorPrimary')};
+`;
+
+const disabledTab = css`
+  cursor: not-allowed;
+  opacity: 0.4;
 `;
 
 const Tab = styled.div`
-  padding: 8px;
-  margin: 0 4px 4px 4px;
   cursor: pointer;
+  margin: 0 4px 4px 4px;
+  ${props => props.active && activeTab}
+  ${props => props.disabled && disabledTab}
+
+  padding: 8px;
 
   &:first-child {
     margin-top: 4px;
   }
 
-  ${props => props.active && activeTab}
-
   &:hover {
     background: ${th('colorBackgroundTabs')};
   }
 `;
 
 const Content = styled.div`
-  width: 100%;
-  height: 100%;
   background: #fff;
+  height: 100%;
+  width: 100%;
 `;
 
 const TabsPane = props => {
@@ -54,8 +60,12 @@ const TabsPane = props => {
         {tabList.map(tab => (
           <Tab
             active={tabDisplay === tab.id}
+            disabled={tab.disabled}
             key={tab.id}
-            onClick={() => setTabDisplay(tab.id)}
+            onClick={() => {
+              if (!tab.disabled) setTabDisplay(tab.id);
+            }}
+            title={tab.title}
           >
             <Icon name={tab.icon} />
           </Tab>

wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js

@@ -31,7 +31,9 @@ class DisplayText extends ToolGroup {
 
     const first = {
       id: '1',
+      title: 'block level tools',
       icon: 'title',
+      disabled: false,
       component: (
         <BlockLevelTools
           groups={this._toolGroups[0].groups.map(group => ({
@@ -45,6 +47,8 @@ class DisplayText extends ToolGroup {
 
     const second = {
       id: '2',
+      disabled: true,
+      title: 'chapter list',
       icon: 'chapterList',
       component: <Empty />,
     };