From 307f9977f0c1533b6fe2efcaae156679ea0edb46 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Sat, 13 May 2017 14:54:28 +0300
Subject: [PATCH] comment bubble position calculated based on vontent panel
---
app/components/SimpleEditor/Editor.js | 2 +-
.../elements/comment/CommentBubble.js | 16 ++++------------
.../SimpleEditor/notesEditor/NotesEditor.js | 2 +-
app/components/SimpleEditor/panes/Notes/Notes.js | 6 ++++--
4 files changed, 10 insertions(+), 16 deletions(-)
diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js
index ffc4973..cfbc452 100644
--- a/app/components/SimpleEditor/Editor.js
+++ b/app/components/SimpleEditor/Editor.js
@@ -111,7 +111,7 @@ class Editor extends ProseEditor {
$$(ContextMenu),
sideNav
)
- .attr('id', 'content-panel')
+ .attr('id', 'content-panel-' + this.props.containerId)
.ref('contentPanel')
const contentPanelWithSplitPane = $$(SplitPane, { sizeA: '95%', splitType: 'vertical' })
diff --git a/app/components/SimpleEditor/elements/comment/CommentBubble.js b/app/components/SimpleEditor/elements/comment/CommentBubble.js
index 6e13585..e668fa6 100644
--- a/app/components/SimpleEditor/elements/comment/CommentBubble.js
+++ b/app/components/SimpleEditor/elements/comment/CommentBubble.js
@@ -54,22 +54,14 @@ class CommentBubble extends Tool {
// without this check, the editor will break on first load
const surface = this.getSurface()
if (!surface) return
+ const containerId = this.context.editor.props.containerId
+ const contentPanel = '#content-panel-' + containerId
setTimeout(() => { // read comment below
- let documentElement = document.querySelector('.se-content')
- let overlayContainer = document.querySelector('.sc-overlay')
+ let documentElement = document.querySelector(contentPanel + ' .se-content')
+ let overlayContainer = document.querySelector(contentPanel + ' .sc-overlay')
let fix = 15
- const minEditorContentPanelChildren = document.getElementById('notes-editor-content-panel').children
- const temp = minEditorContentPanelChildren[0].children
- documentElement = temp[0]
- const children = temp[0].children
-
- if (parseInt(overlayContainer.offsetLeft) === 0 ||
- overlayContainer.style.left !== 0 && parseInt(children[1].offsetLeft) !== 0) {
- overlayContainer = children[1]
- }
-
const documentElementWidth = documentElement.offsetWidth / 1.85
const overlayContainerLeft = overlayContainer.offsetLeft
const left = documentElementWidth - overlayContainerLeft - fix
diff --git a/app/components/SimpleEditor/notesEditor/NotesEditor.js b/app/components/SimpleEditor/notesEditor/NotesEditor.js
index 3d3fcda..bfcf53d 100644
--- a/app/components/SimpleEditor/notesEditor/NotesEditor.js
+++ b/app/components/SimpleEditor/notesEditor/NotesEditor.js
@@ -45,7 +45,7 @@ class NotesEditor extends ProseEditor {
scrollbarPosition: 'right'
})
.append(editorWithComments, $$(Overlay))
- .attr('id', 'notes-editor-content-panel')
+ .attr('id', 'content-panel-' + this.props.containerId)
.ref('notesEditorContentPanel')
el.append($$(SplitPane, { sizeA: '100%', splitType: 'horizontal' })
diff --git a/app/components/SimpleEditor/panes/Notes/Notes.js b/app/components/SimpleEditor/panes/Notes/Notes.js
index aff0e09..e404563 100644
--- a/app/components/SimpleEditor/panes/Notes/Notes.js
+++ b/app/components/SimpleEditor/panes/Notes/Notes.js
@@ -133,8 +133,9 @@ class Notes extends Component {
// TODO -- should be cleaner
resize (e) {
+ const {containerId} = this.props
this.notesPaneHeight = (this.el.el.offsetHeight + this.el.el.offsetTop - e.clientY)
- const scrollPane = document.getElementById('notes-editor-content-panel').children
+ const scrollPane = document.getElementById('content-panel-' + containerId).children
scrollPane[0].style.minHeight = this.notesPaneHeight - 40 + 'px'
this.el.el.style.height = this.notesPaneHeight + 'px'
@@ -151,7 +152,8 @@ class Notes extends Component {
// compute what of main pane?
// and what is the main pane? the notes pane?
computeMainPane () {
- const mainPane = document.getElementById('content-panel')
+ const {containerId} = this.context.editor.props
+ const mainPane = document.getElementById('content-panel-' + containerId)
mainPane.style.height = this.el.el.offsetTop - 175 + 'px'
}
--
GitLab