From a6429442a32485ab5bc139bc66a28d4c9a769592 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 11 Jan 2021 21:33:06 +0200
Subject: [PATCH] options tool in progress
---
editors/editoria/src/layout/EditoriaLayout.js | 21 ++++++++++--------
.../TrackChangeOptionsComponent.js | 8 +++++++
.../trackChanges/TrackChangeOptionsTool.js | 9 ++++----
.../TrackCommentOptions.js | 22 ++++++++++---------
.../TrackOptions.js | 3 ++-
5 files changed, 39 insertions(+), 24 deletions(-)
diff --git a/editors/editoria/src/layout/EditoriaLayout.js b/editors/editoria/src/layout/EditoriaLayout.js
index 7b905b7cb..7414f2b5e 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 e69de29bb..1e9af76ad 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 c6e51b45a..f6761e94c 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 71947e2f7..b2e913006 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 70562e67f..918f94dee 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];
}
}
--
GitLab