From 95e799543798f665df151da636786daa7ec9afa3 Mon Sep 17 00:00:00 2001
From: john <johnbarlas39@gmail.com>
Date: Fri, 9 Dec 2016 18:34:58 +0200
Subject: [PATCH] keep notes in read-only mode, but disable editing them
---
.../SimpleEditor/ContainerEditor.js | 2 +-
.../elements/note/EditNoteTool.js | 31 +++++++++++++++----
.../elements/note/PromptTextArea.js | 10 ++++--
.../SimpleEditor/elements/note/note.scss | 4 +++
4 files changed, 37 insertions(+), 10 deletions(-)
diff --git a/app/components/SimpleEditor/ContainerEditor.js b/app/components/SimpleEditor/ContainerEditor.js
index 522f6fb..b28e256 100644
--- a/app/components/SimpleEditor/ContainerEditor.js
+++ b/app/components/SimpleEditor/ContainerEditor.js
@@ -90,7 +90,7 @@ class ContainerEditor extends SubstanceContainerEditor {
const commandStates = this.getCommandStates()
each(keys(commandStates), key => {
- const allowed = ['comment', 'save', 'undo', 'redo']
+ const allowed = ['comment', 'note', 'save', 'undo', 'redo']
if (!includes(allowed, key)) commandStates[key].disabled = true
})
}
diff --git a/app/components/SimpleEditor/elements/note/EditNoteTool.js b/app/components/SimpleEditor/elements/note/EditNoteTool.js
index 31db2dd..804bcae 100644
--- a/app/components/SimpleEditor/elements/note/EditNoteTool.js
+++ b/app/components/SimpleEditor/elements/note/EditNoteTool.js
@@ -9,20 +9,29 @@ class EditNoteTool extends Tool {
const selected = this.getSelection()
if (!selected.node) return el
+ const disabled = this.isEditorReadOnly()
+
// TODO -- on this.getLabel add a label to package and call it save note
const icon = $$(Icon, { icon: 'fa-save' })
.addClass('sc-save-icon')
- const save = $$('div').addClass('sc-save-area').append(icon).on('click', this.saveNote)
- el.append(
- $$('div').addClass('sc-edit-note-tool-container').append(
+ const save = $$('div')
+ .addClass('sc-save-area')
+ .append(icon)
+ .on('click', this.saveNote)
+
+ const noteTool = $$('div')
+ .addClass('sc-edit-note-tool-container')
+ .append(
$$(PromptTextArea, {
+ disabled: disabled,
path: [selected.node.id, 'note-content'],
placeholder: 'Type your note here'
- }),
- save
+ })
)
- )
+ if (!disabled) noteTool.append(save)
+
+ el.append(noteTool)
// to properly adjust text area height depending on text
this.setTextAreaHeight()
@@ -86,6 +95,16 @@ class EditNoteTool extends Tool {
}
})
}
+
+ getSurface () {
+ const surfaceManager = this.context.surfaceManager
+ return surfaceManager.getFocusedSurface()
+ }
+
+ isEditorReadOnly () {
+ const surface = this.getSurface()
+ return surface.isReadOnlyMode()
+ }
}
EditNoteTool.type = 'edit-note'
diff --git a/app/components/SimpleEditor/elements/note/PromptTextArea.js b/app/components/SimpleEditor/elements/note/PromptTextArea.js
index ce4d2d6..fc6ca23 100644
--- a/app/components/SimpleEditor/elements/note/PromptTextArea.js
+++ b/app/components/SimpleEditor/elements/note/PromptTextArea.js
@@ -4,20 +4,24 @@ import { Component } from 'substance'
class TextArea extends Component {
render ($$) {
+ const { disabled, path, placeholder, rows } = this.props
+
const documentSession = this.context.documentSession
const doc = documentSession.getDocument()
- const val = doc.get(this.props.path)
+ const val = doc.get(path)
const el = $$('textarea')
.attr({
- rows: this.props.rows || '1',
// cols: this.props.columns || '40',
- placeholder: this.props.placeholder || 'Type your text here'
+ placeholder: placeholder || 'Type your text here',
+ rows: rows || '1'
})
.addClass('se-note-textarea')
.append(val)
.on('keyup', this.textAreaAdjust)
+ if (disabled) el.attr('disabled', 'true')
+
return el
}
diff --git a/app/components/SimpleEditor/elements/note/note.scss b/app/components/SimpleEditor/elements/note/note.scss
index cd7a984..300847a 100644
--- a/app/components/SimpleEditor/elements/note/note.scss
+++ b/app/components/SimpleEditor/elements/note/note.scss
@@ -56,5 +56,9 @@ $red: #591818;
overflow: hidden;
resize: none;
width: 310px;
+
+ &[disabled] {
+ border-right: 0;
+ }
}
}
--
GitLab