From 52ea777575509ba783b1a04b56213e8da5b0d96b Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Thu, 6 Aug 2020 09:04:40 +0200
Subject: [PATCH] feat: add readonly Wax editor to the reviewer page
---
.../src/components/review/ReviewLayout.js | 2 --
.../component-review/src/components/style.js | 3 ---
app/components/wax-collab/src/Editoria.js | 22 ++++++++--------
.../wax-collab/src/EditoriaLayout.js | 25 ++++++++++++-------
4 files changed, 27 insertions(+), 25 deletions(-)
diff --git a/app/components/component-review/src/components/review/ReviewLayout.js b/app/components/component-review/src/components/review/ReviewLayout.js
index df4b3d968b..53b1bdd2a8 100644
--- a/app/components/component-review/src/components/review/ReviewLayout.js
+++ b/app/components/component-review/src/components/review/ReviewLayout.js
@@ -85,13 +85,11 @@ const ReviewLayout = ({
return (
<Columns>
<Manuscript>
- {/* <Manuscript>
<Tabs
activeKey={editorSections[editorSections.length - 1].key}
sections={editorSections}
title="Versions"
/>
- </Manuscript> */}
<Tabs
activeKey={reviewSections[reviewSections.length - 1].key}
diff --git a/app/components/component-review/src/components/style.js b/app/components/component-review/src/components/style.js
index ed534d5833..c4b49a22d7 100644
--- a/app/components/component-review/src/components/style.js
+++ b/app/components/component-review/src/components/style.js
@@ -63,9 +63,6 @@ export const Info = styled.span`
export const EditorWrapper = styled.div`
.wax-container {
position: relative;
- .main-editor {
- margin: 3% 0 0 0;
- }
}
`
diff --git a/app/components/wax-collab/src/Editoria.js b/app/components/wax-collab/src/Editoria.js
index 5252b00fda..56c18bda0c 100644
--- a/app/components/wax-collab/src/Editoria.js
+++ b/app/components/wax-collab/src/Editoria.js
@@ -3,15 +3,15 @@ import { Wax } from 'wax-prosemirror-core'
import EditoriaLayout from './EditoriaLayout'
import { config } from './config'
-const renderImage = file => {
- const reader = new FileReader()
- return new Promise((resolve, reject) => {
- reader.onload = () => resolve(reader.result)
- reader.onerror = () => reject(reader.error)
- // Some extra delay to make the asynchronicity visible
- setTimeout(() => reader.readAsDataURL(file), 150)
- })
-}
+// const renderImage = file => {
+// const reader = new FileReader()
+// return new Promise((resolve, reject) => {
+// reader.onload = () => resolve(reader.result)
+// reader.onerror = () => reject(reader.error)
+// // Some extra delay to make the asynchronicity visible
+// setTimeout(() => reader.readAsDataURL(file), 150)
+// })
+// }
const user = {
userId: '1234',
@@ -23,8 +23,8 @@ const Editoria = ({ content, readonly }) => (
<Wax
autoFocus
config={config}
- fileUpload={file => renderImage(file)}
- layout={EditoriaLayout}
+ // fileUpload={file => renderImage(file)}
+ layout={EditoriaLayout(readonly)}
placeholder="Type Something..."
readonly={readonly}
user={user}
diff --git a/app/components/wax-collab/src/EditoriaLayout.js b/app/components/wax-collab/src/EditoriaLayout.js
index 5c53869a3e..1f703cc108 100644
--- a/app/components/wax-collab/src/EditoriaLayout.js
+++ b/app/components/wax-collab/src/EditoriaLayout.js
@@ -1,5 +1,5 @@
import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
import { InfoArea } from 'wax-prosemirror-components'
import { componentPlugin } from 'wax-prosemirror-services'
import { th, grid } from '@pubsweet/ui-toolkit'
@@ -15,8 +15,14 @@ const Layout = styled.div`
display: grid;
grid-template-areas: 'menu' 'editor';
- grid-template-rows: 40px 1fr;
- // flex-direction: column;
+ ${props =>
+ props.readonly
+ ? css`
+ grid-template-rows: 0 1fr;
+ `
+ : css`
+ grid-template-rows: 40px 1fr;
+ `} // flex-direction: column;
// height: 100vh;
// width: 100hh;
`
@@ -70,7 +76,6 @@ const Menu = styled.div`
export const Container = styled.div`
background: ${th('colorBackgroundHue')};
- padding: ${grid(2)};
`
// const LeftSideBar = componentPlugin("leftSideBar");
// const RightSideBar = componentPlugin("rightSideBar");
@@ -79,15 +84,17 @@ const TopBar = componentPlugin('topBar')
// const CommentsArea = componentPlugin("commentsArea");
const WaxOverlays = componentPlugin('waxOverlays')
-const EditoriaLayout = ({ editor }) => (
+const EditoriaLayout = readonly => ({ editor }) => (
// const {
// view: { main },
// } = useContext(WaxContext)
<Container>
- <Layout>
- <Menu>
- <TopBar />
- </Menu>
+ <Layout readonly={readonly}>
+ {!readonly && (
+ <Menu>
+ <TopBar />
+ </Menu>
+ )}
<Editor className="wax-surface-scroll">{editor}</Editor>
</Layout>
<InfoArea />
--
GitLab