From 05ae0af315127327e9fb300528ad35aa23a50a1f Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 11 Jan 2021 22:34:57 +0200
Subject: [PATCH] disable option to tabs
---
editors/editoria/src/layout/EditoriaLayout.js | 11 +++++++-
.../src/ui/tabs/Tabs.js | 26 +++++++++++++------
.../DisplayText.js | 4 +++
3 files changed, 32 insertions(+), 9 deletions(-)
diff --git a/editors/editoria/src/layout/EditoriaLayout.js b/editors/editoria/src/layout/EditoriaLayout.js
index 7414f2b5e..6ef72a2a7 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 06519ce39..531e93d23 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 a345abd8a..966e2af70 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 />,
};
--
GitLab