From d645d8fd488ad435b471376b962d5fe3e6941e02 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 4 Apr 2017 10:40:30 +0300
Subject: [PATCH] move resizable note pane to panes/notes
---
app/components/SimpleEditor/Editor.js | 29 +------
app/components/SimpleEditor/SimpleEditor.scss | 20 -----
.../SimpleEditor/panes/Notes/Notes.js | 82 +++++--------------
.../SimpleEditor/panes/Notes/notes.scss | 32 +++++---
4 files changed, 44 insertions(+), 119 deletions(-)
diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js
index b1328a4..cb00ee1 100644
--- a/app/components/SimpleEditor/Editor.js
+++ b/app/components/SimpleEditor/Editor.js
@@ -22,8 +22,6 @@ class Editor extends ProseEditor {
constructor (parent, props) {
super(parent, props)
- this.stopResize = this.stopResize.bind(this)
-
this.handleActions({
'showComments': function () { this.toggleCommentsArea(true) },
'hideComments': function () { this.toggleCommentsArea(false) },
@@ -56,31 +54,10 @@ class Editor extends ProseEditor {
this.extendState({ editorReady: true })
}
- initResize (e) {
- window.addEventListener('mousemove', this.resize, false)
- window.addEventListener('mouseup', this.stopResize, false)
- }
-
- resize (e) {
- const notesContainer = document.getElementsByClassName('notes-container')
- notesContainer[0].style.height = (notesContainer[0].offsetHeight + notesContainer[0].offsetTop - e.clientY) + 'px'
- }
-
- stopResize (e) {
- window.removeEventListener('mousemove', this.resize, false)
- window.removeEventListener('mouseup', this.stopResize, false)
- }
-
render ($$) {
// const { trackChangesView } = this.state
// const canToggleTrackChanges = this.canToggleTrackChanges()
- const resizer = $$('div').addClass('resize-area')
- const notesContainer = $$('div')
- .addClass('notes-container').append(resizer)
-
- resizer.addEventListener('mousedown', this.initResize, false)
-
const el = $$('div').addClass('sc-prose-editor')
// left side: editor and toolbar
@@ -108,9 +85,7 @@ class Editor extends ProseEditor {
var editorWithFooter = $$('div')
.append(
- editor,
- footerNotes,
- // notesContainer
+ editor
)
var commentsPane = this.state.editorReady
@@ -141,7 +116,7 @@ class Editor extends ProseEditor {
$$(ContextMenu),
// $$(Dropzones)
sideNav,
- notesContainer
+ footerNotes
)
.attr('id', 'content-panel')
.ref('contentPanel')
diff --git a/app/components/SimpleEditor/SimpleEditor.scss b/app/components/SimpleEditor/SimpleEditor.scss
index 1880da6..f107198 100644
--- a/app/components/SimpleEditor/SimpleEditor.scss
+++ b/app/components/SimpleEditor/SimpleEditor.scss
@@ -333,24 +333,4 @@ $active-blue: #4a90e2;
flex-wrap: wrap;
margin-left: 8%;
}
-
- .notes-container {
- background-color: $white;
- bottom: 0;
- height: 95px;
- left: 130px;
- max-height: 700px;
- min-height: 10px;
- position: fixed;
- width: 67.4%;
- z-index: 0;
- .resize-area {
- background-color: red;
- cursor: row-resize;
- height: 5px;
- position: absolute;
- top: 0;
- width: 100%;
- }
- }
}
diff --git a/app/components/SimpleEditor/panes/Notes/Notes.js b/app/components/SimpleEditor/panes/Notes/Notes.js
index be97a2b..79d144a 100644
--- a/app/components/SimpleEditor/panes/Notes/Notes.js
+++ b/app/components/SimpleEditor/panes/Notes/Notes.js
@@ -1,77 +1,39 @@
import { Component } from 'substance'
class Notes extends Component {
+ constructor (props) {
+ super(props)
+
+ this.resize = this.resize.bind(this)
+ this.stopResize = this.stopResize.bind(this)
+ }
// use toc:updated to avoid rewriting TOCProvider's this.handleDocumentChange
didMount () {
this.context.editorSession.onUpdate('document', this.onNotesUpdated, this)
}
- render ($$) {
- const provider = this.getProvider()
- const entries = provider.getEntries()
- let self = this
-
- const listItems = entries.map(function (entry, i) {
- let extractedElement = ''
- if (entry.content) {
- extractedElement = self.parseEntryContent($$, entry.content)
- return extractedElement
- .attr('data-id', entry.id)
- .addClass('sc-notes-footer-item')
- }
- return $$('li')
- .attr('data-id', entry.id)
- .addClass('sc-notes-footer-item')
- .append(extractedElement)
- })
-
- if (listItems.length === 0) return $$('div')
- return $$('ol')
- .addClass('sc-notes-footer')
- .append(listItems)
+ initResize (e) {
+ window.addEventListener('mousemove', this.resize, false)
+ window.addEventListener('mouseup', this.stopResize, false)
}
- parseEntryContent ($$, content) {
- let parser = new DOMParser()
- let parsedContent = parser.parseFromString(content, 'text/html').body
- let parentElement = parsedContent.childNodes[0]
- let children = parentElement.childNodes
- let constructedElement = $$('li')
-
- for (let i = 0; i < children.length; i++) {
- if (children[i].nodeName === '#text') {
- constructedElement.append(children[i].data)
- } else {
- let contructedChildElement = $$(children[i].nodeName)
- // Case of nested styling, first contruct the sub child node
- if (children[i].children.length === 1) {
- let contructedSubChildElement = $$(children[i].children[0].nodeName)
- this.assignVirtualElementClass(children[i].children[0], contructedSubChildElement)
- this.assignVirtualElementClass(children[i], contructedChildElement)
+ resize (e) {
+ this.el.el.style.height = (this.el.el.offsetHeight + this.el.el.offsetTop - e.clientY) + 'px'
+ }
- contructedSubChildElement.append(children[i].children[0].innerText)
- contructedChildElement.append(contructedSubChildElement)
- } else {
- this.assignVirtualElementClass(children[i], contructedChildElement)
- contructedChildElement.append(children[i].innerText)
- }
+ stopResize (e) {
+ window.removeEventListener('mousemove', this.resize, false)
+ window.removeEventListener('mouseup', this.stopResize, false)
+ }
- constructedElement.append(contructedChildElement)
- }
- }
+ render ($$) {
+ const resizer = $$('div').addClass('resize-area')
+ const notesContainer = $$('div')
+ .addClass('notes-container').append(resizer)
- return constructedElement
- }
+ resizer.addEventListener('mousedown', this.initResize, false)
- assignVirtualElementClass (DOMElement, virtualElement) {
- switch (DOMElement.nodeName) {
- case 'STRONG':
- virtualElement.addClass('sc-strong')
- break
- case 'EM':
- virtualElement.addClass('sc-emphasis')
- break
- }
+ return notesContainer
}
getProvider () {
diff --git a/app/components/SimpleEditor/panes/Notes/notes.scss b/app/components/SimpleEditor/panes/Notes/notes.scss
index fa7849c..622a56f 100644
--- a/app/components/SimpleEditor/panes/Notes/notes.scss
+++ b/app/components/SimpleEditor/panes/Notes/notes.scss
@@ -1,14 +1,22 @@
-$gray: #ddd;
+$white: #fff;
-.sc-notes-footer {
- border-top: 1px solid $gray;
- counter-reset: note-footer;
- font-size: 14px;
- list-style-type: none;
- padding-top: 25px;
-}
+.notes-container {
+ background-color: $white;
+ bottom: 0;
+ height: 95px;
+ left: 130px;
+ max-height: 700px;
+ min-height: 10px;
+ position: fixed;
+ width: 67.4%;
+ z-index: 0;
-.sc-notes-footer-item::before {
- content: ''counter(note-footer)'. ';
- counter-increment: note-footer;
-}
+ .resize-area {
+ background-color: red;
+ cursor: row-resize;
+ height: 5px;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+ }
--
GitLab