diff --git a/app/components/SimpleEditor/ContainerEditor.js b/app/components/SimpleEditor/ContainerEditor.js index 522f6fb6fea2aa7e2a97c44a2c54450b61a041fe..b28e25672fc85229056746745acb1edc6ed74b94 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 31db2ddcb1ad209240f526833e740716a1c9e8eb..804bcae5f320810e755028bd2a11828164565534 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 ce4d2d6cec3cae64aaca298aa0a06ab08ba3cd86..fc6ca23278bd7819850a1286a07092296b3b73aa 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 cd7a9841aab3974654ff371dade50cb2e783e3df..300847a5e8975757114ef56c34738dded8672775 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; + } } }