diff --git a/editors/editoria/src/layout/EditoriaLayout.js b/editors/editoria/src/layout/EditoriaLayout.js index 7b905b7cb9bc08294fc7f1c80df014b5357b2621..7414f2b5ec0f51bfecc6534e5779114e47c01260 100644 --- a/editors/editoria/src/layout/EditoriaLayout.js +++ b/editors/editoria/src/layout/EditoriaLayout.js @@ -122,18 +122,21 @@ const CommentsContainerNotes = styled.div` height: 100%; `; -const CommentTrackTools = styled.div` +const CommentTrackToolsContainer = styled.div` padding: ${grid(2)}0 0 0; position: fixed; display: flex; margin-left: 5px; z-index: 1; height: 30px; - width: 29.4%; + width: 27%; background: #fff; - span { - margin-left: auto; - } +`; + +const CommentTrackTools = styled.div` + margin-left: 10px; + display: flex; + position: relative; `; const NotesAreaContainer = styled.div` @@ -290,13 +293,13 @@ const EditoriaLayout = ({ editor }) => { <WaxSurfaceScroll> <EditorContainer>{editor}</EditorContainer> <CommentsContainer> - <CommentTrackTools> - <span> + <CommentTrackToolsContainer> + <CommentTrackTools> {commentsTracks + trackBlockNodes} COMMENTS AND SUGGESTIONS <CommentTrackToolBar /> - </span> - </CommentTrackTools> + </CommentTrackTools> + </CommentTrackToolsContainer> <RightArea area="main" /> </CommentsContainer> </WaxSurfaceScroll> diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..1e9af76ad0d793253fef99f164c9e178421f3808 100644 --- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js +++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js @@ -0,0 +1,8 @@ +import React from 'react'; + +const TrackChangeOptionsComponent = ({ view = {}, groups }) => { + console.log(groups); + return <span>Options</span>; +}; + +export default TrackChangeOptionsComponent; diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js index c6e51b45a24d26605b0d6eb8487c67ff318dbef7..f6761e94c99fbad3eebc55e663bccc86d778a44f 100644 --- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js +++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js @@ -20,8 +20,8 @@ const DropWrapper = styled.div` top: 32px; `; -const TrackChangeOptionsTool = ({ view = {}, item }) => { - const { icon, title } = item; +const TrackChangeOptionsTool = ({ view = {}, item, groups }) => { + // const { icon, title } = item; const [isOpen, setIsOpen] = useState(false); const ref = useRef(); @@ -33,16 +33,17 @@ const TrackChangeOptionsTool = ({ view = {}, item }) => { <MenuButton active={isOpen} disabled={false} - iconName={icon} + iconName="more" onMouseDown={() => { setIsOpen(!isOpen); }} - title={title} + // title={title} /> {isOpen && ( <DropWrapper> <TrackChangeOptionsComponent + groups={groups} close={() => { setIsOpen(false); }} diff --git a/wax-prosemirror-services/src/WaxToolGroups/TrackCommentOptionsToolGroupService/TrackCommentOptions.js b/wax-prosemirror-services/src/WaxToolGroups/TrackCommentOptionsToolGroupService/TrackCommentOptions.js index 71947e2f7574c72dc7de863cfc8899f23208ef7a..b2e913006bb45f770cc50014f921ee8aa3af161b 100644 --- a/wax-prosemirror-services/src/WaxToolGroups/TrackCommentOptionsToolGroupService/TrackCommentOptions.js +++ b/wax-prosemirror-services/src/WaxToolGroups/TrackCommentOptionsToolGroupService/TrackCommentOptions.js @@ -1,34 +1,36 @@ import React, { useMemo } from 'react'; import { injectable, inject } from 'inversify'; -import { BlockLevelTools, Tabs, ToolGroups } from 'wax-prosemirror-components'; +import { TrackChangeOptionsTool } from 'wax-prosemirror-components'; import { isEmpty } from 'lodash'; import styled from 'styled-components'; import { v4 as uuidv4 } from 'uuid'; import ToolGroup from '../../lib/ToolGroup'; -const Empty = styled.div` - background: khaki; - height: 100%; -`; - @injectable() class TrackCommentOptions extends ToolGroup { tools = []; toolGroups = []; - constructor(@inject('TrackOptions') trackOptions, @inject('Text') text) { + constructor(@inject('TrackOptions') trackOptions) { super(); this.toolGroups = [ { - groups: [trackOptions, text], + groups: [trackOptions], }, ]; } renderTools(view) { if (isEmpty(view)) return null; - - return <span>Options</span>; + return ( + <TrackChangeOptionsTool + view={view} + groups={this._toolGroups[0].groups.map(group => ({ + // groupName: group.title.props.title, + items: group._tools, + }))} + /> + ); } } diff --git a/wax-prosemirror-services/src/WaxToolGroups/TrackOptionsToolGroupService/TrackOptions.js b/wax-prosemirror-services/src/WaxToolGroups/TrackOptionsToolGroupService/TrackOptions.js index 70562e67f6e85131eff0f6fd2081381489d8ea0f..918f94dee71dd94335aa0baabb9064472089c245 100644 --- a/wax-prosemirror-services/src/WaxToolGroups/TrackOptionsToolGroupService/TrackOptions.js +++ b/wax-prosemirror-services/src/WaxToolGroups/TrackOptionsToolGroupService/TrackOptions.js @@ -5,11 +5,12 @@ import ToolGroup from '../../lib/ToolGroup'; class TrackOptions extends ToolGroup { tools = []; constructor( + @inject('ShowHideTrackChange') showHideTrackChange, @inject('AcceptTrackChange') acceptTrackChange, @inject('RejectTrackChange') rejectTrackChange, ) { super(); - this.tools = [acceptTrackChange, rejectTrackChange]; + this.tools = [showHideTrackChange, acceptTrackChange, rejectTrackChange]; } }