diff --git a/editors/editoria/src/layout/EditoriaLayout.js b/editors/editoria/src/layout/EditoriaLayout.js index 7414f2b5ec0f51bfecc6534e5779114e47c01260..6ef72a2a7d796375a4ccf07da119b2a358f019c7 100644 --- a/editors/editoria/src/layout/EditoriaLayout.js +++ b/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" /> diff --git a/wax-prosemirror-components/src/ui/tabs/Tabs.js b/wax-prosemirror-components/src/ui/tabs/Tabs.js index 06519ce399573f7acf0b2f633b9419f04681b7bf..531e93d23b683df57a5200184e3cc87a1a611a35 100644 --- a/wax-prosemirror-components/src/ui/tabs/Tabs.js +++ b/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> diff --git a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js index a345abd8acab4e3512b594177be9bc19d0bb594a..966e2af707a4c03ba742323a8d52f202f9c163a9 100644 --- a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js +++ b/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 />, };