From 5ec8400c0e794f459197ded102bd7da167ba8435 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 1 Oct 2020 01:58:39 +0300
Subject: [PATCH] theme additions and fixes
---
.../src/components/Button.js | 2 ++
.../src/components/LeftMenuTitle.js | 8 ++++--
.../src/components/ToolGroupComponent.js | 2 +-
.../components/notes/NoteEditorContainer.js | 5 ++--
.../src/components/rightArea/RightArea.js | 9 ++----
.../src/components/tables/CreateTable.js | 2 ++
.../src/ui/comments/CommentBox.js | 2 +-
.../src/ui/comments/CommentItem.js | 2 +-
.../src/ui/comments/CommentItemList.js | 2 +-
.../src/ui/tables/InsertTableTool.js | 8 +++++-
.../src/ui/tabs/BlockElement.js | 6 ++++
.../src/ui/tabs/BlockLevelTools.js | 2 +-
.../src/ui/tabs/Tabs.js | 4 ++-
.../src/layouts/EditoriaLayout.js | 28 +++++++++++++------
.../src/WaxSelectionPlugin.js | 16 +++++------
.../src/BaseService/RedoService/Redo.js | 4 +++
.../src/BaseService/UndoService/Undo.js | 4 +++
.../src/coko-theme/index.js | 5 ++--
18 files changed, 73 insertions(+), 38 deletions(-)
diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js
index ed968a69a..cf7004cd1 100644
--- a/wax-prosemirror-components/src/components/Button.js
+++ b/wax-prosemirror-components/src/components/Button.js
@@ -1,3 +1,5 @@
+/* eslint react/prop-types: 0 */
+
import React, { useContext } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
import MenuButton from '../ui/buttons/MenuButton';
diff --git a/wax-prosemirror-components/src/components/LeftMenuTitle.js b/wax-prosemirror-components/src/components/LeftMenuTitle.js
index 15c4ac188..b2743816a 100644
--- a/wax-prosemirror-components/src/components/LeftMenuTitle.js
+++ b/wax-prosemirror-components/src/components/LeftMenuTitle.js
@@ -1,10 +1,12 @@
-import React from "react";
-import styled from "styled-components";
+/* eslint react/prop-types: 0 */
+
+import React from 'react';
+import styled from 'styled-components';
const LeftMenuStyled = styled.div`
border-bottom: 1px solid #d9d9d9;
color: #979797;
- font-family: "Fira Sans";
+ font-family: 'Fira Sans';
font-size: 15px;
font-weight: bold;
letter-spacing: 0.6px;
diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js
index 8fc6f640b..cae23c1c4 100644
--- a/wax-prosemirror-components/src/components/ToolGroupComponent.js
+++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js
@@ -1,5 +1,5 @@
+/* eslint react/prop-types: 0 */
import React from 'react';
-import { isFunction } from 'lodash';
import styled from 'styled-components';
import Dropdown from '../ui/buttons/Dropdown';
diff --git a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
index 3d06af263..c9b73fbdb 100644
--- a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
+++ b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
@@ -1,15 +1,16 @@
import React from 'react';
+import { grid } from '@pubsweet/ui-toolkit';
import styled from 'styled-components';
-
import NoteNumber from './NoteNumber';
const NoteEditorContainerStyled = styled.div`
display: flex;
flex-direction: row;
min-height: 28px;
- width: 100%;
+ width: 90%;
position: relative;
margin-bottom: 5px;
+ padding-left: ${grid(10)};
`;
const NoteStyled = styled.div`
diff --git a/wax-prosemirror-components/src/components/rightArea/RightArea.js b/wax-prosemirror-components/src/components/rightArea/RightArea.js
index 6e8935476..961f93a3e 100644
--- a/wax-prosemirror-components/src/components/rightArea/RightArea.js
+++ b/wax-prosemirror-components/src/components/rightArea/RightArea.js
@@ -32,12 +32,6 @@ export default ({ area }) => {
let panelWrapperHeight = {};
if (main) {
WaxSurface = main.dom.getBoundingClientRect();
-
- if (area === 'main') {
- } else {
- panelWrapper = document.getElementsByClassName('panelWrapper');
- panelWrapperHeight = panelWrapper[0].getBoundingClientRect().height;
- }
}
each(marksNodes[area], (markNode, pos) => {
@@ -56,6 +50,9 @@ export default ({ area }) => {
annotationTop =
markNodeEl.getBoundingClientRect().top - WaxSurface.top;
} else {
+ panelWrapper = document.getElementsByClassName('panelWrapper');
+ panelWrapperHeight = panelWrapper[0].getBoundingClientRect().height;
+
markNodeEl = document
.querySelector('#notes-container')
.querySelector(`[data-id="${id}"]`);
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index aaac04e05..c7795ea5e 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,3 +1,5 @@
+/* eslint react/prop-types: 0 */
+
import React, { useState, useContext } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
diff --git a/wax-prosemirror-components/src/ui/comments/CommentBox.js b/wax-prosemirror-components/src/ui/comments/CommentBox.js
index a9128114a..edd603589 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentBox.js
@@ -99,7 +99,7 @@ CommentBox.propTypes = {
PropTypes.shape({
content: PropTypes.string.isRequired,
displayName: PropTypes.string.isRequired,
- timestamp: PropTypes.string.isRequired,
+ timestamp: PropTypes.string.number,
}),
),
/** This comment's id in the document */
diff --git a/wax-prosemirror-components/src/ui/comments/CommentItem.js b/wax-prosemirror-components/src/ui/comments/CommentItem.js
index 8a668f4e2..8b94334d1 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentItem.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentItem.js
@@ -51,7 +51,7 @@ CommentItem.propTypes = {
/** Display name of user that made the comment */
displayName: PropTypes.string.isRequired,
/** When the comment was made */
- timestamp: PropTypes.string.isRequired,
+ timestamp: PropTypes.number.isRequired,
};
CommentItem.defaultProps = {};
diff --git a/wax-prosemirror-components/src/ui/comments/CommentItemList.js b/wax-prosemirror-components/src/ui/comments/CommentItemList.js
index 4a4aa16ec..d1dc93628 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentItemList.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentItemList.js
@@ -72,7 +72,7 @@ CommentItemList.propTypes = {
PropTypes.shape({
content: PropTypes.string.isRequired,
displayName: PropTypes.string.isRequired,
- timestamp: PropTypes.string.isRequired,
+ timestamp: PropTypes.number.isRequired,
}),
),
};
diff --git a/wax-prosemirror-components/src/ui/tables/InsertTableTool.js b/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
index 37168ed6d..9e85eaaf9 100644
--- a/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
+++ b/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
@@ -236,6 +236,12 @@ const TableGridSizeEditor = props => {
position: 'relative',
};
+ const infoStyle = {
+ height: '20px',
+ fontSize: '14px',
+ marginLeft: '5px',
+ };
+
return (
<div style={wrapperStyle} ref={_onRef}>
<div
@@ -245,7 +251,7 @@ const TableGridSizeEditor = props => {
>
{cells}
</div>
- <div>
+ <div style={infoStyle}>
{rows} X {cols}
</div>
</div>
diff --git a/wax-prosemirror-components/src/ui/tabs/BlockElement.js b/wax-prosemirror-components/src/ui/tabs/BlockElement.js
index c8e853035..4dd07887c 100644
--- a/wax-prosemirror-components/src/ui/tabs/BlockElement.js
+++ b/wax-prosemirror-components/src/ui/tabs/BlockElement.js
@@ -1,10 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
+import { th } from '@pubsweet/ui-toolkit';
+
import Button from '../../components/Button';
const Wrapper = styled.div`
display: flex;
+ button {
+ border-radius: 4px;
+ margin-left: 4px;
+ }
`;
const Box = styled.div`
diff --git a/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js b/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js
index f52e7b5b8..8f628c3d0 100644
--- a/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js
+++ b/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js
@@ -8,7 +8,7 @@ const Wrapper = styled.div`
padding: 8px;
> div:not(:last-child) {
- margin-bottom: 8px;
+ margin-bottom: 20px;
}
`;
diff --git a/wax-prosemirror-components/src/ui/tabs/Tabs.js b/wax-prosemirror-components/src/ui/tabs/Tabs.js
index e2751296d..f460938b6 100644
--- a/wax-prosemirror-components/src/ui/tabs/Tabs.js
+++ b/wax-prosemirror-components/src/ui/tabs/Tabs.js
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
+import { th } from '@pubsweet/ui-toolkit';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import Icon from '../buttons/Icon';
@@ -11,10 +12,11 @@ const Wrapper = styled.div`
const Tabs = styled.div`
display: flex;
flex-direction: column;
+ background: #e3e3e3;
`;
const activeTab = css`
- box-shadow: 0 0 3px blue;
+ box-shadow: 0 0 3px ${th('colorPrimary')};
`;
const Tab = styled.div`
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index e8c87ea4b..4cb3fa916 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -48,6 +48,7 @@ const TopMenu = styled.div`
display: flex;
min-height: 40px;
user-select: none;
+ background: ${th('colorBackgroundToolBar')}
border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
> div:not(:last-child) {
@@ -57,6 +58,7 @@ const TopMenu = styled.div`
`;
const SideMenu = styled.div`
+ background: ${th('colorBackgroundToolBar')}
border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
min-width: 250px;
height: 100%;
@@ -72,6 +74,7 @@ const WaxSurfaceScroll = styled.div`
box-sizing: border-box;
height: 100%;
width: 100%;
+ position: absolute;
${EditorElements};
`;
@@ -88,34 +91,41 @@ const EditorContainer = styled.div`
`;
const CommentsContainer = styled.div`
+ background: ${th('colorBackgroundHue')};
display: flex;
flex-direction: column;
width: 35%;
height: 100%;
`;
-const NotesAreaContainer = styled.div`
+const CommentsContainerNotes = styled.div`
background: ${th('colorBackgroundHue')};
+ display: flex;
+ flex-direction: column;
+ width: 35%;
+ height: 100%;
+`;
+
+const NotesAreaContainer = styled.div`
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
overflow-y: scroll;
- padding-top: ${grid(1)};
+ position: absolute;
`;
const NotesContainer = styled.div`
counter-reset: footnote-view;
display: flex;
flex-direction: column;
- padding-left: ${grid(10)};
padding-bottom: ${grid(4)};
height: 100%;
width: 65%;
`;
-let surfaceHeight = 700;
-let notesHeight = 150;
+let surfaceHeight = 600;
+let notesHeight = 200;
const onResizeEnd = arr => {
surfaceHeight = arr[0].size;
@@ -162,8 +172,8 @@ const EditoriaLayout = ({ editor }) => {
<PanelGroup
direction="column"
panelWidths={[
- { size: surfaceHeight, resize: 'dynamic' },
- { size: notesHeight, resize: 'dynamic' },
+ { size: surfaceHeight, resize: 'stretch' },
+ { size: notesHeight, resize: 'stretch' },
]}
onResizeEnd={onResizeEnd}
>
@@ -179,9 +189,9 @@ const EditoriaLayout = ({ editor }) => {
<NotesContainer id="notes-container">
<NotesArea />
</NotesContainer>
- <CommentsContainer>
+ <CommentsContainerNotes>
<RightArea area="notes" />
- </CommentsContainer>
+ </CommentsContainerNotes>
</NotesAreaContainer>
)}
</PanelGroup>
diff --git a/wax-prosemirror-plugins/src/WaxSelectionPlugin.js b/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
index 40573224f..100f9c20e 100644
--- a/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
+++ b/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
@@ -16,15 +16,13 @@ const WaxSelectionPlugin = new Plugin({
if (node.type.name === 'footnote') flag = true;
});
- if (sel && !flag) {
- const decos = [
- Decoration.inline(sel.$from.pos, sel.$to.pos, {
- class: 'wax-selection-marker',
- }),
- ];
- const deco = DecorationSet.create(editorState.doc, decos);
- return { deco };
- }
+ const decos = [
+ Decoration.inline(sel.$from.pos, sel.$to.pos, {
+ class: 'wax-selection-marker',
+ }),
+ ];
+ const deco = DecorationSet.create(editorState.doc, decos);
+ return { deco };
return state;
},
diff --git a/wax-prosemirror-services/src/BaseService/RedoService/Redo.js b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
index 7d0a8b008..2c090f96e 100644
--- a/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
+++ b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
@@ -19,4 +19,8 @@ class Redo extends Tools {
get enable() {
return redo;
}
+
+ select(state) {
+ return redo(state);
+ }
}
diff --git a/wax-prosemirror-services/src/BaseService/UndoService/Undo.js b/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
index e593e832c..50aa7e657 100644
--- a/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
+++ b/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
@@ -19,4 +19,8 @@ class Undo extends Tools {
get enable() {
return undo;
}
+
+ select(state) {
+ return undo(state);
+ }
}
diff --git a/wax-prosemirror-themes/src/coko-theme/index.js b/wax-prosemirror-themes/src/coko-theme/index.js
index 96d3fe6a0..783cf10c5 100644
--- a/wax-prosemirror-themes/src/coko-theme/index.js
+++ b/wax-prosemirror-themes/src/coko-theme/index.js
@@ -7,17 +7,18 @@ import { css } from 'styled-components';
const cokoTheme = {
/* Colors */
colorBackground: 'white',
- colorPrimary: 'teal',
+ colorPrimary: '#808080',
colorSecondary: '#E7E7E7',
colorFurniture: '#CCC',
colorBorder: '#AAA',
- colorBackgroundHue: '#F1F1F1',
+ colorBackgroundHue: '#F7F7F7',
colorSuccess: '#008800',
colorError: 'indianred',
colorText: '#111',
colorTextReverse: '#FFF',
colorTextPlaceholder: '#595959',
colorWarning: '#ffc107',
+ colorBackgroundToolBar: '#D9D9D9',
/*Buttons*/
colorButton: '#777',
--
GitLab