From b117146073eb950f4da4d9c15f2f64aa9f81a8ee Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 28 Feb 2017 12:48:10 +0200
Subject: [PATCH] read only mode appended in the editor
---
app/components/SimpleEditor/Editor.js | 10 +++++++---
app/components/SimpleEditor/SimpleEditor.jsx | 19 +------------------
app/components/SimpleEditor/SimpleEditor.scss | 13 +++++--------
3 files changed, 13 insertions(+), 29 deletions(-)
diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js
index 50a62cf..6e04486 100644
--- a/app/components/SimpleEditor/Editor.js
+++ b/app/components/SimpleEditor/Editor.js
@@ -59,8 +59,8 @@ class Editor extends ProseEditor {
const el = $$('div').addClass('sc-prose-editor')
// left side: editor and toolbar
- var toolbar = this._renderToolbar($$)
- var editor = this._renderEditor($$)
+ let toolbar = this._renderToolbar($$)
+ let editor = this._renderEditor($$)
let SplitPane = this.componentRegistry.get('split-pane')
let ScrollPane = this.componentRegistry.get('scroll-pane')
@@ -144,6 +144,10 @@ class Editor extends ProseEditor {
// TODO -- use this to insert read-only mode alert
_renderToolbar ($$) {
+ let viewMode = this.props.disabled ? $$('span')
+ .addClass('view-mode')
+ .append('Editor is in Read-Only mode')
+ : ''
let commandStates = this.commandManager.getCommandStates()
return $$('div').addClass('se-toolbar-wrapper').append(
$$(Toolbar, {
@@ -152,7 +156,7 @@ class Editor extends ProseEditor {
trackChangesView: this.state.trackChangesView,
toolGroups: ['text', 'document', 'annotations', 'default', 'track-change-enable', 'track-change-toggle-view']
}).ref('toolbar')
- )
+ ).append(viewMode)
}
_renderEditor ($$) {
diff --git a/app/components/SimpleEditor/SimpleEditor.jsx b/app/components/SimpleEditor/SimpleEditor.jsx
index 82ddf89..d703bf7 100644
--- a/app/components/SimpleEditor/SimpleEditor.jsx
+++ b/app/components/SimpleEditor/SimpleEditor.jsx
@@ -1,7 +1,6 @@
// import { get } from 'lodash'
import React from 'react'
import ReactDOM from 'react-dom'
-import { Alert } from 'react-bootstrap'
import {
ProseEditorConfigurator as Configurator,
@@ -24,11 +23,6 @@ export default class SimpleEditor extends React.Component {
this._releaseLock = this._releaseLock.bind(this)
this._acquireLock = this._acquireLock.bind(this)
-
- // TODO -- delete, along with Alert
- this.state = {
- canEdit: false
- }
}
// TODO -- is this necessary?
@@ -209,19 +203,8 @@ export default class SimpleEditor extends React.Component {
// TODO -- do I even need a render here?
render () {
- // TODO -- DELETE THIS !!!!!
- let viewMode = !this.state.canEdit
- ? (
- <Alert bsStyle='warning' className='view-mode'>
- <span>Editor is in Read-Only Mode</span>
- </Alert>
- )
- : null
-
return (
- <div className='editor-wrapper'>
- {viewMode}
- </div>
+ <div className='editor-wrapper' />
)
}
}
diff --git a/app/components/SimpleEditor/SimpleEditor.scss b/app/components/SimpleEditor/SimpleEditor.scss
index 8a0609c..b302c5b 100644
--- a/app/components/SimpleEditor/SimpleEditor.scss
+++ b/app/components/SimpleEditor/SimpleEditor.scss
@@ -28,18 +28,13 @@ $active-blue: #4a90e2;
position: relative;
.view-mode {
- height: 44px;
- position: fixed;
+ font-size: 14px;
+ position: absolute;
right: 0;
text-align: center;
+ top: 10px;
width: 20%;
z-index: 9999;
-
- span {
- font-size: 14px;
- position: relative;
- top: 10px;
- }
}
.track-changes-mode {
@@ -124,6 +119,7 @@ $active-blue: #4a90e2;
background-color: $inactive-grey;
border-radius: 0;
color: $white;
+ line-height: 0;
// cursor: pointer;
padding: 0 19px;
position: relative;
@@ -154,6 +150,7 @@ $active-blue: #4a90e2;
cursor: pointer;
padding: 0 19px;
position: relative;
+ line-height: 0;
}
button::after {
--
GitLab