From 211a35e41c1dc0da6a8978239e6a34177bb2d09f Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Sun, 4 Oct 2020 13:46:08 +0300
Subject: [PATCH] Editoria mobile layout containers
---
editors/editoria/src/Editoria.js | 11 +-
wax-prosemirror-layouts/index.js | 3 +-
.../src/layouts/EditoriaMobileLayout.js | 225 ++++++++++++++++++
3 files changed, 236 insertions(+), 3 deletions(-)
create mode 100644 wax-prosemirror-layouts/src/layouts/EditoriaMobileLayout.js
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index e7b51cea4..93ecdac3a 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -1,7 +1,7 @@
import React, { Fragment } from 'react';
import { createGlobalStyle } from 'styled-components';
-import { EditoriaLayout } from 'wax-prosemirror-layouts';
+import { EditoriaLayout, EditoriaMobileLayout } from 'wax-prosemirror-layouts';
import { Wax } from 'wax-prosemirror-core';
import { config } from './config';
@@ -35,6 +35,13 @@ const user = {
username: 'demo',
};
+let layout = EditoriaLayout;
+
+if (window.innerWidth < 600) {
+ console.log('smaller');
+ layout = EditoriaMobileLayout;
+}
+
const Editoria = () => (
<Fragment>
<GlobalStyle />
@@ -45,7 +52,7 @@ const Editoria = () => (
fileUpload={file => renderImage(file)}
value={demo}
// value={`<p class="paragraph">This is the first paragraph</p><p class="paragraph">This is the second paragraph</p><p class="author">This is an author</p>`}
- layout={EditoriaLayout}
+ layout={layout}
// debug
// onChange={source => console.log(source)}
user={user}
diff --git a/wax-prosemirror-layouts/index.js b/wax-prosemirror-layouts/index.js
index c48bf92d5..54df59fd0 100644
--- a/wax-prosemirror-layouts/index.js
+++ b/wax-prosemirror-layouts/index.js
@@ -1 +1,2 @@
-export { default as EditoriaLayout } from "./src/layouts/EditoriaLayout";
+export { default as EditoriaLayout } from './src/layouts/EditoriaLayout';
+export { default as EditoriaMobileLayout } from './src/layouts/EditoriaMobileLayout';
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaMobileLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaMobileLayout.js
new file mode 100644
index 000000000..930361b94
--- /dev/null
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaMobileLayout.js
@@ -0,0 +1,225 @@
+import React, { useContext } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import PanelGroup from 'react-panelgroup';
+import { InfoArea } from 'wax-prosemirror-components';
+import { componentPlugin } from 'wax-prosemirror-services';
+import { cokoTheme } from 'wax-prosemirror-themes';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import { WaxContext } from 'wax-prosemirror-core';
+
+import { grid, th } from '@pubsweet/ui-toolkit';
+import EditorElements from './EditorElements';
+
+const divider = css`
+ .panelGroup {
+ background: ${th('colorBackgroundHue')};
+ }
+ .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')};
+
+ display: flex;
+ flex-direction: column;
+
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+
+ ${divider}
+`;
+
+const Main = styled.div`
+ display: flex;
+ flex-grow: 1;
+`;
+
+const TopMenu = styled.div`
+ display: flex;
+ height: 70px;
+ padding-top: 10px;
+ flex-wrap: wrap;
+ font-size:8px;
+ position:absolute;
+ z-index: 999;
+ top: 0;
+ bottom:0;
+ user-select: none;
+ background: ${th('colorBackgroundToolBar')}
+ border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+ > div {
+ height: 20px;
+ }
+ > div:not(:last-child) {
+ border-right: ${th('borderWidth')} ${th('borderStyle')}
+ ${th('colorFurniture')};
+ }
+ button: {
+ height: 20px;
+ }
+ svg {
+ width: 14px;
+ height: 14px;
+ }
+ div:last-child{
+ button span {
+ font-size: 10px;
+ margin: 0;
+ }
+ }
+`;
+
+const EditorArea = styled.div`
+ flex-grow: 1;
+`;
+
+const WaxSurfaceScroll = styled.div`
+ overflow-y: auto;
+ overflow-x: scroll;
+ display: flex;
+ box-sizing: border-box;
+ height: 100%;
+ width: 96%;
+ position: absolute;
+ /* PM styles for main content*/
+ ${EditorElements};
+`;
+
+const EditorContainer = styled.div`
+ width: 100%;
+ height: 100%;
+ .ProseMirror {
+ box-shadow: 0 0 8px #ecedf1;
+ min-height: 90%;
+ padding: ${grid(25)} ${grid(2)} ${grid(40)} ${grid(2)};
+ }
+`;
+
+const CommentsContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+`;
+
+const CommentsContainerNotes = styled.div`
+ background: ${th('colorBackgroundHue')};
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+`;
+
+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};
+`;
+
+const NotesContainer = styled.div`
+ counter-reset: footnote-view;
+ display: flex;
+ flex-direction: column;
+ padding-bottom: ${grid(4)};
+ height: 100%;
+ width: 96%;
+ > div {
+ padding-left: ${grid(1)};
+ padding-right: ${grid(1)};
+ }
+`;
+
+let surfaceHeight = 500;
+let notesHeight = 100;
+
+const onResizeEnd = arr => {
+ surfaceHeight = arr[0].size;
+ notesHeight = arr[1].size;
+};
+
+const hasNotes = main => {
+ const notes = DocumentHelpers.findChildrenByType(
+ main.state.doc,
+ main.state.schema.nodes.footnote,
+ true,
+ );
+ return notes;
+};
+
+const TopBar = componentPlugin('topBar');
+const NotesArea = componentPlugin('notesArea');
+const RightArea = componentPlugin('rightArea');
+const WaxOverlays = componentPlugin('waxOverlays');
+
+const EditoriaLayout = ({ editor }) => {
+ const {
+ view: { main },
+ } = useContext(WaxContext);
+
+ const notes = main && hasNotes(main);
+ const showNotes = notes && !!notes.length && notes.length > 0;
+
+ return (
+ <ThemeProvider theme={cokoTheme}>
+ <Wrapper>
+ <TopMenu>
+ <TopBar />
+ </TopMenu>
+
+ <Main>
+ <EditorArea>
+ <PanelGroup
+ direction="column"
+ panelWidths={[
+ { size: surfaceHeight, resize: 'stretch' },
+ { size: notesHeight, resize: 'stretch' },
+ ]}
+ onResizeEnd={onResizeEnd}
+ >
+ <WaxSurfaceScroll>
+ <EditorContainer>{editor}</EditorContainer>
+ <CommentsContainer>
+ <RightArea area="main" />
+ </CommentsContainer>
+ </WaxSurfaceScroll>
+
+ {showNotes && (
+ <NotesAreaContainer>
+ <NotesContainer id="notes-container">
+ <NotesArea />
+ </NotesContainer>
+ <CommentsContainerNotes>
+ <RightArea area="notes" />
+ </CommentsContainerNotes>
+ </NotesAreaContainer>
+ )}
+ </PanelGroup>
+ </EditorArea>
+ </Main>
+
+ <InfoArea />
+ <WaxOverlays />
+ </Wrapper>
+ </ThemeProvider>
+ );
+};
+
+export default EditoriaLayout;
--
GitLab