From 31d35ac900e9cc931265a6ad32bf9012eb9b0c38 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 27 Apr 2017 00:14:27 +0300
Subject: [PATCH] notes editor in separate pane
---
app/components/SimpleEditor/Editor.js | 14 ++++++++++----
app/components/SimpleEditor/panes/Notes/Notes.js | 16 ++++++++++------
.../SimpleEditor/panes/Notes/notes.scss | 8 ++++++--
3 files changed, 26 insertions(+), 12 deletions(-)
diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js
index 29936d6..163c341 100644
--- a/app/components/SimpleEditor/Editor.js
+++ b/app/components/SimpleEditor/Editor.js
@@ -10,7 +10,7 @@ import Comments from './panes/Comments/CommentBoxList'
import CommentsProvider from './panes/Comments/CommentsProvider'
import ContainerEditor from './ContainerEditor'
-// import Notes from './panes/Notes/Notes'
+import Notes from './panes/Notes/Notes'
import NotesProvider from './panes/Notes/NotesProvider'
// import TableOfContents from './panes/TableOfContents/TableOfContents'
@@ -71,7 +71,7 @@ class Editor extends ProseEditor {
let ContextMenu = this.componentRegistry.get('context-menu') // new what does it do?
// let Dropzones = this.componentRegistry.get('dropzones') // new what does it do?
- // const footerNotes = $$(Notes).ref('footer-notes')
+ const footerNotes = $$(Notes).ref('footer-notes')
// const props = {
// book: this.props.book,
@@ -119,11 +119,17 @@ class Editor extends ProseEditor {
$$('div')
)
+ const ToolbarWithEditor = $$(SplitPane, { splitType: 'horizontal' })
+ .append(
+ toolbar,
+ contentPanelWithSplitPane
+ )
+
el.append(
$$(SplitPane, { splitType: 'horizontal' })
.append(
- toolbar,
- contentPanelWithSplitPane
+ ToolbarWithEditor,
+ footerNotes
)
)
diff --git a/app/components/SimpleEditor/panes/Notes/Notes.js b/app/components/SimpleEditor/panes/Notes/Notes.js
index 266b732..2a19f9f 100644
--- a/app/components/SimpleEditor/panes/Notes/Notes.js
+++ b/app/components/SimpleEditor/panes/Notes/Notes.js
@@ -19,7 +19,7 @@ class Notes extends Component {
}
didUpdate () {
- this.computeScrollPane()
+ this.computeMainPane()
}
render ($$) {
@@ -90,9 +90,13 @@ class Notes extends Component {
const height = (this.el.el.offsetHeight + this.el.el.offsetTop - e.clientY)
const scrollPane = document.getElementById('notes-editor-content-panel').children
scrollPane[0].style.minHeight = height - 40 + 'px'
- const mainScrollPane = document.getElementById('content-panel')
- mainScrollPane.style.height = this.el.el.offsetTop - 162 + 'px'
+
+ // const mainScrollPane = document.getElementById('content-panel')
+ // mainScrollPane.style.height = this.el.el.offsetTop - 162 + 'px'
+
this.el.el.style.height = height + 'px'
+
+ this.computeMainPane()
}
stopResize (e) {
@@ -100,9 +104,9 @@ class Notes extends Component {
window.removeEventListener('mouseup', this.stopResize, false)
}
- computeScrollPane () {
- const mainScrollPane = document.getElementById('content-panel').children
- mainScrollPane[0].style.maxHeight = this.el.el.offsetTop - 162 + 'px'
+ computeMainPane () {
+ const mainPane = document.getElementById('content-panel')
+ mainPane.style.height = this.el.el.offsetTop - 155 + 'px'
}
onNotesUpdated (change) {
diff --git a/app/components/SimpleEditor/panes/Notes/notes.scss b/app/components/SimpleEditor/panes/Notes/notes.scss
index 38306a1..e0cbaa6 100644
--- a/app/components/SimpleEditor/panes/Notes/notes.scss
+++ b/app/components/SimpleEditor/panes/Notes/notes.scss
@@ -3,7 +3,7 @@ $light-blue: #e4f0ff;
$black: #000;
$bg-rgba: rgba(255, 255, 255, 0);
-.notes-container {
+.sc-split-pane .notes-container {
background-color: $white;
bottom: 0;
counter-reset: note-footer;
@@ -21,9 +21,13 @@ $bg-rgba: rgba(255, 255, 255, 0);
background-repeat: repeat-x;
background-size: 10px 1px;
cursor: row-resize;
- height: 6px;
+ height: 10px;
position: absolute;
+<<<<<<< HEAD
top: -14px;
+=======
+ top: -6px;
+>>>>>>> notes editor in separate pane
width: 100%;
}
}
--
GitLab