diff --git a/app/components/SimpleEditor/ContainerEditor.js b/app/components/SimpleEditor/ContainerEditor.js index da29425090e0d53ee44781d3c0a3696c4ccb2d32..ae7c28db654b35a113057e2861f2b628476845bf 100644 --- a/app/components/SimpleEditor/ContainerEditor.js +++ b/app/components/SimpleEditor/ContainerEditor.js @@ -34,6 +34,16 @@ class ContainerEditor extends SubstanceContainerEditor { el.addClass('sm-enabled') el.setAttribute('contenteditable', true) } + if (this.props.canNotEdit) { + el.addEventListener('keydown', function (e) { + e.preventDefault() + if (e.keyCode === 13 || e.keyCode === 32) { + const documentSession = this.context.documentSession + documentSession.undo() + } + }) + el.addEventListener('contextmenu', event => event.preventDefault()) + } return el } diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js index 1fa89756e3b71789fdcea08db645bfc8e7b07f2b..146ea851d7678044190450bd6f46c32e22c994f5 100644 --- a/app/components/SimpleEditor/Editor.js +++ b/app/components/SimpleEditor/Editor.js @@ -1,6 +1,6 @@ import { ProseEditor, - ProseEditorOverlayTools, + // ProseEditorOverlayTools, ScrollPane, SplitPane, TOCProvider @@ -9,6 +9,7 @@ import { import Comments from './panes/Comments/CommentBoxList' import CommentsProvider from './panes/Comments/CommentsProvider' import ContainerEditor from './ContainerEditor' +import Overlay from './Overlay' import Notes from './panes/Notes/Notes' import NotesProvider from './panes/Notes/NotesProvider' import TableOfContents from './panes/TableOfContents/TableOfContents' @@ -69,7 +70,7 @@ class Editor extends ProseEditor { var contentPanel = $$(ScrollPane, { scrollbarPosition: 'right', - overlay: ProseEditorOverlayTools + overlay: Overlay }) .append(editorWithComments) .attr('id', 'content-panel') @@ -95,7 +96,7 @@ class Editor extends ProseEditor { _renderEditor ($$) { var configurator = this.props.configurator return $$(ContainerEditor, { - disabled: this.props.disabled, + canNotEdit: this.props.disabled, documentSession: this.documentSession, commands: configurator.getSurfaceCommandNames(), containerId: 'body', diff --git a/app/components/SimpleEditor/Overlay.js b/app/components/SimpleEditor/Overlay.js new file mode 100644 index 0000000000000000000000000000000000000000..697ddb61af5062defb434f62d3d565c3a39644de --- /dev/null +++ b/app/components/SimpleEditor/Overlay.js @@ -0,0 +1,48 @@ +import { ProseEditorOverlayTools, documentHelpers } from 'substance' +import { each, includes, keys } from 'lodash' + +class Overlay extends ProseEditorOverlayTools { + render ($$) { + const surface = this.getSurface() + const session = this.context.documentSession + const sel = session.getSelection() + const comment = documentHelpers.getPropertyAnnotationsForSelection( + session.getDocument(), + sel, + { type: 'commnent' } + ) + + if (surface && surface.props.canNotEdit && typeof comment[0] === 'undefined') { + const commandStates = this.context.commandManager.getCommandStates() + each(keys(commandStates), (key) => { + const allowed = ['comment', 'save'] + if (!includes(allowed, key)) commandStates[key].disabled = true + }) + } + + let el = $$('div').addClass(this.getClassNames()) + let activeTools = this.getActiveTools() + + if (activeTools.length > 0) { + let toolsEl = $$('div').addClass('se-active-tools') + activeTools.forEach(tool => { + toolsEl.append( + $$(tool.Class, tool.toolProps).ref(tool.toolProps.name) + ) + }) + el.append(toolsEl) + } + return el + } + + getSurface () { + const surfaceManager = this.context.surfaceManager + return surfaceManager.getSurface('body') + } + + getClassNames () { + return 'sc-prose-editor-overlay-tools' + } +} + +export default Overlay diff --git a/app/components/SimpleEditor/SimpleEditor.jsx b/app/components/SimpleEditor/SimpleEditor.jsx index 86548150e1ba882398685e950c25af4432d35690..c7e3937eba6cf87065a9cb30ede29c1fdb4e9b10 100644 --- a/app/components/SimpleEditor/SimpleEditor.jsx +++ b/app/components/SimpleEditor/SimpleEditor.jsx @@ -103,14 +103,14 @@ export default class SimpleEditor extends React.Component { const { canEdit } = this.props let viewMode = !canEdit ? ( - <Alert bsStyle="warning" className="view-mode"> - Editor is in View Mode + <Alert bsStyle='warning' className='view-mode'> + <span>Editor is in View Mode</span> </Alert> ) : null return ( - <div className="editor-wrapper"> + <div className='editor-wrapper'> {viewMode} </div> ) diff --git a/app/components/SimpleEditor/SimpleEditor.scss b/app/components/SimpleEditor/SimpleEditor.scss index e98e606a27bc4b9ddba46a06a5d5a60d75c76f43..6787df711a1138b532885d2c5b5018e51cacab4e 100644 --- a/app/components/SimpleEditor/SimpleEditor.scss +++ b/app/components/SimpleEditor/SimpleEditor.scss @@ -24,13 +24,14 @@ $white: #fff; position: relative; .view-mode { - background-color: $primary; - border-bottom: 1px solid $border; - border-top: 1px solid $border; + // background-color: $primary; + // border-bottom: 1px solid $border; + // border-top: 1px solid $border; height: 44px; position: fixed; + right: 0; text-align: center; - width: 100%; + width: 20%; z-index: 9999; span { diff --git a/app/components/SimpleEditor/elements/comment/CommentBubble.js b/app/components/SimpleEditor/elements/comment/CommentBubble.js index dbf73165f2e83e32f4b7c0bd6e70f9a0adc81906..b8fefd04baebb47bab20cf255b90cd5bbd33492a 100644 --- a/app/components/SimpleEditor/elements/comment/CommentBubble.js +++ b/app/components/SimpleEditor/elements/comment/CommentBubble.js @@ -7,9 +7,9 @@ import { class CommentBubble extends Tool { render ($$) { - // const mode = this.getMode() const title = 'Create a new comment' let commands = this.getCommentState() + if (commands.mode !== 'create') return $$('div') commands.active = true this.setBubblePosition()