Skip to content
Snippets Groups Projects
Commit a5711826 authored by chris's avatar chris
Browse files

cleanup hhmi layout and file

parent e15a617a
No related branches found
No related tags found
1 merge request!289Pm node views portals
Hide whitespace changes
Inline Side-by-side
editors/demo/src/HHMI/HHMI.js
+ 0
− 17
View file @ a5711826
import React from 'react';
import { createGlobalStyle } from 'styled-components';
import { Wax } from 'wax-prosemirror-core';
import { HhmiLayout } from './layout';
import { config } from './config';
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
overflow-y: hidden;
padding: 0;
}
#root {
height:100vh;
width:100vw;
}
`;
const renderImage = file => {
const reader = new FileReader();
return new Promise((accept, fail) => {
......@@ -32,18 +18,15 @@ const renderImage = file => {
const Hhmi = () => {
return (
<>
<GlobalStyle />
<Wax
config={config}
autoFocus
placeholder="Type Something..."
fileUpload={file => renderImage(file)}
value=""
targetFormat="JSON"
// readonly
layout={HhmiLayout}
// onChange={source => console.log(source)}
// user={user}
/>
</>
);
......
editors/demo/src/HHMI/layout/EditorElements.js
+ 16
− 153
View file @ a5711826
import { css } from 'styled-components';
import { lighten, th } from '@pubsweet/ui-toolkit';
import { th } from '@pubsweet/ui-toolkit';
/* All styles regarding ProseMirror surface and elements */
......@@ -54,37 +54,17 @@ export default css`
font-size: 14px;
} */
.ProseMirror footnote {
font-variant-numeric: lining-nums proportional-nums;
display: inline-block;
text-align: center;
width: 17px;
height: 17px;
background: white;
border-bottom: 2px solid black;
color: black;
cursor: pointer;
}
.ProseMirror footnote::after {
content: counter(footnote);
position: relative;
bottom: 2px;
font-size: 16px;
counter-increment: footnote;
}
hr {
padding: 2px 10px;
border: none;
margin: 1em 0;
padding: 2px 10px;
}
hr:after {
background-color: silver;
content: '';
display: block;
height: 1px;
background-color: silver;
line-height: 2px;
}
......@@ -94,10 +74,10 @@ export default css`
}
blockquote {
padding-left: 1em;
border-left: 3px solid #eee;
margin-left: 0;
margin-right: 0;
padding-left: 1em;
}
figure {
......@@ -144,15 +124,15 @@ export default css`
/* Tables */
table {
border: 1px solid #eee;
border-collapse: initial;
border-spacing: 0;
border-width: 0 thin thin 0;
border: 1px solid #eee;
table-layout: fixed;
width: 100%;
margin: 0;
overflow: hidden;
page-break-inside: avoid;
table-layout: fixed;
width: 100%;
}
th,
......@@ -170,14 +150,14 @@ export default css`
}
.column-resize-handle {
background-color: #adf;
bottom: 0;
pointer-events: none;
position: absolute;
right: -2px;
top: 0;
bottom: 0;
width: 4px;
z-index: 20;
background-color: #adf;
pointer-events: none;
}
.ProseMirror.resize-cursor {
......@@ -186,15 +166,15 @@ export default css`
}
/* Give selected cells a blue overlay */
.selectedCell:after {
z-index: 2;
position: absolute;
background: rgba(200, 200, 255, 0.4);
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: rgba(200, 200, 255, 0.4);
pointer-events: none;
z-index: 2;
}
/* placeholder */
......@@ -238,77 +218,6 @@ export default css`
content: '¶';
}
span.deletion {
text-decoration: line-through;
color: ${th('colorError')};
footnote {
background: ${th('colorError')};
}
}
span.insertion {
color: royalblue;
footnote {
background: royalblue;
}
}
.selected-insertion {
background: ${lighten('royalblue', 0.65)};
}
.selected-deletion {
background: ${lighten('indianred', 0.65)};
}
.selected-format-change,
.selected-block-change {
background-color: #eefbfb;
}
.format-change {
border-bottom: 2px solid royalblue;
}
[data-track] {
position: relative;
}
[data-track]::before {
content: '';
position: absolute;
border-left: 2px solid royalblue;
left: -10px;
height: 100%;
}
.insertion .show-insertion {
color: black;
}
.deletion .hide-deletion {
display: none;
}
li[data-track]::before,
li [data-track]::before {
left: -5px;
}
span.comment {
border-bottom: 2px solid gold;
border-radius: 3px 3px 0 0;
.active-comment {
background-color: gold;
/* color: black; */
}
}
span.search-result {
background: #bee594;
}
/* == Math Nodes ======================================== */
.math-node {
......@@ -342,8 +251,8 @@ export default css`
}
.math-node .math-src {
display: none;
color: rgb(132, 33, 162);
display: none;
tab-size: 4;
}
......@@ -424,52 +333,6 @@ export default css`
padding-top: 2px;
}
span[data-type='inline'] {
display: inline;
font-weight: 500;
}
span[data-type='inline']:before {
color: #006f19;
content: ' | ';
font-weight: 600;
margin-left: 0;
}
span[data-type='inline']:after {
color: #006f19;
content: ' | ';
display: inline;
font-weight: 600;
}
p[data-type='block'] {
display: block;
margin-top: 1em;
}
p[data-type='block']:before {
color: #006f19;
content: '⌜';
display: inline;
font-weight: 600;
font-size: 22px;
position: relative;
top: 2px;
left: 6px;
}
p[data-type='block']:after {
color: #006f19;
content: '⌟';
display: inline;
font-weight: 600;
font-size: 22px;
position: relative;
top: 5px;
right: 6px;
}
.transform-icon {
transform: rotate(40deg);
}
......
editors/demo/src/HHMI/layout/HhmiLayout.js
+ 17
− 193
View file @ a5711826
import React, { useContext, useState, useCallback, useEffect } from 'react';
import styled, { css, ThemeProvider } from 'styled-components';
import PanelGroup from 'react-panelgroup';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
import React, { useContext } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
import { grid, th } from '@pubsweet/ui-toolkit';
import { cokoTheme } from '../theme';
......@@ -10,37 +8,16 @@ import EditorElements from './EditorElements';
/* Katex css */
import '~../../katex/dist/katex.min.css';
const divider = css`
.panelGroup {
background: #fff;
}
.divider {
> div {
background: ${th('colorBorder')};
height: ${grid(1)};
max-height: ${grid(1)};
&:hover {
height: ${grid(2)};
max-height: ${grid(2)};
}
}
}
`;
const Wrapper = styled.div`
background: ${th('colorBackground')};
font-family: ${th('fontInterface')};
font-size: ${th('fontSizeBase')};
line-height: ${grid(4)};
display: flex;
flex-direction: column;
font-family: ${th('fontInterface')};
font-size: ${th('fontSizeBase')};
height: 100%;
width: 100%;
line-height: ${grid(4)};
overflow: hidden;
${divider}
width: 100%;
* {
box-sizing: border-box;
......@@ -54,12 +31,12 @@ const Main = styled.div`
`;
const TopMenu = styled.div`
background: ${th('colorBackgroundToolBar')};
border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
border-top: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
display: flex;
min-height: 40px;
user-select: none;
background: ${th('colorBackgroundToolBar')};
border-top: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
> div:not(:last-child) {
border-right: ${th('borderWidth')} ${th('borderStyle')}
......@@ -85,19 +62,19 @@ const EditorArea = styled.div`
`;
const WaxSurfaceScroll = styled.div`
overflow-y: auto;
display: flex;
box-sizing: border-box;
display: flex;
height: 100%;
width: 100%;
overflow-y: auto;
position: absolute;
width: 100%;
/* PM styles for main content*/
${EditorElements};
`;
const EditorContainer = styled.div`
width: 65%;
height: 100%;
width: 65%;
.ProseMirror {
box-shadow: 0 0 8px #ecedf1;
......@@ -106,107 +83,11 @@ const EditorContainer = styled.div`
}
`;
const CommentsContainer = styled.div`
display: flex;
flex-direction: column;
width: 35%;
height: 100%;
`;
const CommentsContainerNotes = styled.div`
display: flex;
flex-direction: column;
width: 35%;
height: 100%;
`;
const CommentTrackToolsContainer = styled.div`
display: flex;
position: fixed;
padding-top: 5px;
right: 30px;
z-index: 1;
background: white;
width: 25%;
`;
const CommentTrackTools = styled.div`
margin-left: auto;
display: flex;
position: relative;
z-index: 1;
`;
const CommentTrackOptions = styled.div`
display: flex;
margin-left: 10px;
bottom: 5px;
position: relative;
`;
const NotesAreaContainer = styled.div`
background: #fff;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
overflow-y: scroll;
position: absolute;
/* PM styles for note content*/
${EditorElements};
.ProseMirror {
display: inline;
}
`;
const NotesContainer = styled.div`
box-shadow: 0 0 8px #ecedf1;
counter-reset: footnote-view;
display: flex;
flex-direction: column;
padding-bottom: ${grid(4)};
height: 100%;
width: 65%;
`;
const WaxBottomRightInfo = styled.div``;
const InfoContainer = styled.div`
display: flex;
position: fixed;
bottom: 1px;
right: 21px;
z-index: 999;
`;
let surfaceHeight = (window.innerHeight / 5) * 3;
let notesHeight = (window.innerHeight / 5) * 2;
const onResizeEnd = arr => {
surfaceHeight = arr[0].size;
notesHeight = arr[1].size;
};
const getNotes = main => {
const notes = DocumentHelpers.findChildrenByType(
main.state.doc,
main.state.schema.nodes.footnote,
true,
);
return notes;
};
const LeftSideBar = ComponentPlugin('leftSideBar');
const MainMenuToolBar = ComponentPlugin('mainMenuToolBar');
const NotesArea = ComponentPlugin('notesArea');
const RightArea = ComponentPlugin('rightArea');
const CommentTrackToolBar = ComponentPlugin('commentTrackToolBar');
const WaxOverlays = ComponentPlugin('waxOverlays');
const BottomRightInfo = ComponentPlugin('BottomRightInfo');
const HhmiLayout = ({ editor }) => {
const {
view: { main },
options,
} = useContext(WaxContext);
const { options } = useContext(WaxContext);
let fullScreenStyles = {};
......@@ -223,26 +104,6 @@ const HhmiLayout = ({ editor }) => {
zIndex: '99999',
};
}
const notes = main && getNotes(main);
const commentsTracksCount =
main && DocumentHelpers.getCommentsTracksCount(main);
const trackBlockNodesCount =
main && DocumentHelpers.getTrackBlockNodesCount(main);
const areNotes = notes && !!notes.length && notes.length > 0;
const [hasNotes, setHasNotes] = useState(areNotes);
const showNotes = () => {
setHasNotes(areNotes);
};
const delayedShowedNotes = useCallback(
setTimeout(() => showNotes(), 100),
[],
);
useEffect(() => {}, [delayedShowedNotes]);
return (
<ThemeProvider theme={cokoTheme}>
......@@ -253,49 +114,12 @@ const HhmiLayout = ({ editor }) => {
<Main>
<EditorArea>
<PanelGroup
direction="column"
panelWidths={[
{ size: surfaceHeight, resize: 'stretch' },
{ size: notesHeight, resize: 'resize' },
]}
onResizeEnd={onResizeEnd}
>
<WaxSurfaceScroll>
<EditorContainer>{editor}</EditorContainer>
<CommentsContainer>
<CommentTrackToolsContainer>
<CommentTrackTools>
{commentsTracksCount + trackBlockNodesCount} COMMENTS AND
SUGGESTIONS
<CommentTrackOptions>
<CommentTrackToolBar />
</CommentTrackOptions>
</CommentTrackTools>
</CommentTrackToolsContainer>
<RightArea area="main" />
</CommentsContainer>
</WaxSurfaceScroll>
{hasNotes && (
<NotesAreaContainer>
<NotesContainer id="notes-container">
<NotesArea view={main} />
</NotesContainer>
<CommentsContainerNotes>
<RightArea area="notes" />
</CommentsContainerNotes>
</NotesAreaContainer>
)}
</PanelGroup>
<WaxSurfaceScroll>
<EditorContainer>{editor}</EditorContainer>
</WaxSurfaceScroll>
</EditorArea>
</Main>
<WaxOverlays />
<WaxBottomRightInfo>
<InfoContainer id="info-container">
<BottomRightInfo />
</InfoContainer>
</WaxBottomRightInfo>
</Wrapper>
</ThemeProvider>
);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment