From eba23de5267de17fc06d896a944d54ad289d2370 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 22 Sep 2021 16:17:46 +0300
Subject: [PATCH] styling
---
editors/demo/src/NCBI/NCBI.js | 49 ++++++++++++++-----
.../src/NCBI/layout/EditorMiniElements.js | 17 +++++++
editors/demo/src/NCBI/layout/NcbiLayout.js | 11 -----
3 files changed, 53 insertions(+), 24 deletions(-)
diff --git a/editors/demo/src/NCBI/NCBI.js b/editors/demo/src/NCBI/NCBI.js
index 77aabf3cd..a32df6fab 100644
--- a/editors/demo/src/NCBI/NCBI.js
+++ b/editors/demo/src/NCBI/NCBI.js
@@ -7,27 +7,50 @@ import { NcbiLayout, NcbiMiniLayout } from './layout';
import { configTitle, configMini } from './config';
const Wrapper = styled.div`
- padding: 50px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ padding-top: 50px;
+ width: 100%;
`;
-const Divider = styled.div`
- height: 50px;
- width: 100%;
+const FirstEditor = styled.div`
+ margin-right: 20px;
+`;
+
+const SecondEditor = styled.div``;
+
+const TitleEditor = styled.div`
+ background: #fff;
+ height: 20px;
+ position: relative;
+ top: 2px;
+ width: 80px;
`;
const Ncbi = () => {
return (
<>
<Wrapper>
- <Wax
- config={configTitle}
- autoFocus
- value="This is a really really really long title that you cannot break into multiple lines"
- layout={NcbiLayout}
- />
- <Divider></Divider>
-
- <Wax config={configMini} autoFocus value="" layout={NcbiMiniLayout} />
+ <FirstEditor>
+ <TitleEditor>Basic Editor</TitleEditor>
+
+ <Wax
+ config={configMini}
+ autoFocus
+ value=""
+ layout={NcbiMiniLayout}
+ placeholder="Start Typing ..."
+ />
+ </FirstEditor>
+ <SecondEditor>
+ <TitleEditor>Title Editor</TitleEditor>
+ <Wax
+ config={configTitle}
+ value="This is a really really really long title that you cannot break into multiple lines"
+ layout={NcbiLayout}
+ />
+ </SecondEditor>
</Wrapper>
</>
);
diff --git a/editors/demo/src/NCBI/layout/EditorMiniElements.js b/editors/demo/src/NCBI/layout/EditorMiniElements.js
index b745fb41d..acb543571 100644
--- a/editors/demo/src/NCBI/layout/EditorMiniElements.js
+++ b/editors/demo/src/NCBI/layout/EditorMiniElements.js
@@ -60,4 +60,21 @@ export default css`
sub {
line-height: 0;
}
+
+ p {
+ line-height: 21px;
+ }
+
+ /* placeholder */
+ .empty-node::before {
+ color: #aaa;
+ float: left;
+ font-style: italic;
+ pointer-events: none;
+ height: 0;
+ }
+
+ p.empty-node:first-child::before {
+ content: attr(data-content);
+ }
`;
diff --git a/editors/demo/src/NCBI/layout/NcbiLayout.js b/editors/demo/src/NCBI/layout/NcbiLayout.js
index 61b7831d2..061ccd11f 100644
--- a/editors/demo/src/NCBI/layout/NcbiLayout.js
+++ b/editors/demo/src/NCBI/layout/NcbiLayout.js
@@ -65,22 +65,11 @@ const EditorContainer = styled.div`
}
`;
-const TitleEditor = styled.div`
- background: #fff;
- height: 20px;
- left: 51px;
- position: absolute;
- top: 91px;
- width: 80px;
-`;
-
const TopBar = ComponentPlugin('topBar');
const WaxOverlays = ComponentPlugin('waxOverlays');
-console.log(cokoTheme);
const NcbiLayout = ({ editor }) => (
<ThemeProvider theme={cokoTheme}>
<Wrapper>
- <TitleEditor>Title Editor</TitleEditor>
<TopMenu>
<TopBar />
</TopMenu>
--
GitLab