diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js
index 27239f72a5515e5fbb80323e165e5be39cf68728..675b040c47730efa591b8379ac8c69200c3fe4ef 100644
--- a/app/components/SimpleEditor/Editor.js
+++ b/app/components/SimpleEditor/Editor.js
@@ -65,6 +65,7 @@ class Editor extends ProseEditor {
// left side: editor and toolbar
let toolbar = this._renderToolbar($$)
+ let toolbarLeft = this._renderToolbarLeft($$)
let editor = this._renderEditor($$)
let SplitPane = this.componentRegistry.get('split-pane')
@@ -107,6 +108,8 @@ class Editor extends ProseEditor {
commentsPane
)
+ let sideNav = $$('div').addClass('sidenav').append(toolbarLeft)
+
var contentPanel = $$(ScrollPane, {
name: 'contentPanel',
// contextMenu: 'custom',
@@ -114,8 +117,9 @@ class Editor extends ProseEditor {
})
.append(editorWithComments,
$$(Overlay),
- $$(ContextMenu)
+ $$(ContextMenu),
// $$(Dropzones)
+ sideNav
)
.attr('id', 'content-panel')
.ref('contentPanel')
@@ -167,7 +171,7 @@ class Editor extends ProseEditor {
trackChanges: this.props.trackChanges,
trackChangesView: this.state.trackChangesView,
toolGroups: [
- 'text',
+ // 'text',
'document',
'annotations',
'default',
@@ -179,6 +183,18 @@ class Editor extends ProseEditor {
.append(viewMode)
}
+ _renderToolbarLeft ($$) {
+ let commandStates = this.commandManager.getCommandStates()
+ return $$('div').addClass('se-toolbar-wrapper').append(
+ $$(Toolbar, {
+ commandStates: commandStates,
+ trackChanges: this.props.trackChanges,
+ trackChangesView: this.state.trackChangesView,
+ toolGroups: ['text']
+ }).ref('toolbarLeft')
+ )
+ }
+
_renderEditor ($$) {
const configurator = this.props.configurator
const editing = this.props.disabled ? 'selection' : 'full'
diff --git a/app/components/SimpleEditor/SimpleEditor.jsx b/app/components/SimpleEditor/SimpleEditor.jsx
index 05cbd0a49475b97f532e6843851835ca5a0aa881..dd008f79880634143663094f6a6fb5c041258aa8 100644
--- a/app/components/SimpleEditor/SimpleEditor.jsx
+++ b/app/components/SimpleEditor/SimpleEditor.jsx
@@ -44,6 +44,7 @@ export default class SimpleEditor extends React.Component {
const importer = configurator.createImporter('html')
const doc = importer.importDocument(source)
+
const editorSession = new EditorSession(doc, {
configurator: configurator
})
diff --git a/app/components/SimpleEditor/SimpleEditor.scss b/app/components/SimpleEditor/SimpleEditor.scss
index 07b4ec5be3743d6d32e6a7c4c2bb484a875954c4..92210ae6dab2d669bae21f4a10d87565257b3bed 100644
--- a/app/components/SimpleEditor/SimpleEditor.scss
+++ b/app/components/SimpleEditor/SimpleEditor.scss
@@ -7,7 +7,6 @@ $fa-font-path: '~font-awesome/fonts';
@import './panes/panes';
@import './miniEditor/miniEditor';
-
// grays
$border: #ccc;
$dark-gray: #999;
@@ -52,6 +51,7 @@ $active-blue: #4a90e2;
.sc-comment-pane-list li .comment-list .single-comment-row {
padding: 3px 12px;
}
+
.sc-overlay .se-active-tools .sc-overlay-bubble .sc-comment-icon {
top: 0;
}
@@ -64,6 +64,7 @@ $active-blue: #4a90e2;
position: absolute;
right: 0;
top: 0;
+
.se-toolbar-wrapper .sc-toolbar {
background-color: $primary;
border: 1px solid $border;
@@ -73,6 +74,7 @@ $active-blue: #4a90e2;
padding-left: 0;
vertical-align: middle;
width: 100%;
+
@-moz-document url-prefix() {
.sc-tool-group > .sc-switch-text-type {
margin: 0;
@@ -80,16 +82,17 @@ $active-blue: #4a90e2;
top: 8px;
}
}
-
.sm-target-text {
- bottom: 5px;
+ // bottom: 5px;
height: 100%;
padding: 0;
position: relative;
.sc-switch-text-type {
+ bottom: 5px;
margin-left: 1px;
width: 150px;
+
button {
color: $transparent-black;
height: inherit;
@@ -106,11 +109,14 @@ $active-blue: #4a90e2;
}
.se-options {
- top: 36px;
+ background: transparent;
+ border: 0;
+ box-shadow: none;
+ top: 27px;
}
.se-option {
- background-color: $white;
+ background-color: #E8E8E8;
border: 0;
font-family: 'Fira Sans';
}
@@ -118,7 +124,6 @@ $active-blue: #4a90e2;
} // end dropdown
.sm-target-track-change-enable {
-
button {
background-color: $inactive-grey;
border-radius: 0;
@@ -160,11 +165,13 @@ $active-blue: #4a90e2;
button::after {
content: 'Changes View Off';
}
+
.track-changes-view-active {
background-color: #228b46;
color: $white;
padding: 0 19px
}
+
.track-changes-view-active::after {
content: 'Changes View On';
}
@@ -226,19 +233,57 @@ $active-blue: #4a90e2;
background-color: $primary;
border-right: 1px solid $light-gray;
margin-top: 1px;
- }
+ .sidenav .sc-toolbar ul li.se-option.active {
+ background-color: #d8d8d8;
+ }
+
+ .sidenav {
+ background-color: #e8e8e8;
+ // box-shadow: 0 0 12px $dark-gray;
+ box-shadow: 2px 0px 1px -1px #ccc;
+ height: 100%;
+ left: 0;
+ margin-top: 149px;
+ overflow-x: hidden;
+ position: fixed;
+ top: 0;
+ width: 128px;
+ z-index: 1;
+
+ .sc-toolbar {
+ background: transparent;
+ border: 0;
+
+ ul {
+ margin: 0;
+ padding: 0;
+
+ li.se-option {
+ padding: 3px;
+ }
+ }
+
+ .sc-switch-text-type {
+ bottom: 0px;
+ margin: 0;
+ padding: 0;
+ width: 140px;
+ }
+ }
+ }
+ }
div.se-content {
- color: $transparent-black;
- font-family: 'Fira Sans';
- word-wrap: break-word;
background-color: $white;
box-shadow: 0 0 8px $dark-gray;
- margin: 1.5% 14% 7%;
+ color: $transparent-black;
+ font-family: 'Fira Sans';
+ margin: 1.5% 17.8% 7%;
min-height: 100vh;
padding: 3% 4% 1%;
transition: .3s;
+ word-wrap: break-word;
::selection {
background: $light-gray;
@@ -287,8 +332,8 @@ $active-blue: #4a90e2;
.sc-has-comments {
div.se-content {
- margin: 1.5% 27% 5% 1%;
- transition: .3s;
+ margin: 1.5% 23.6% 5% 12%;
+ transition: .3s;
}
}
diff --git a/app/components/SimpleEditor/config.js b/app/components/SimpleEditor/config.js
index 4a0825ae6625557d29902d434c5cdc7dd8e93074..2c092e15b05054985031140d19df461d51e24ec6 100644
--- a/app/components/SimpleEditor/config.js
+++ b/app/components/SimpleEditor/config.js
@@ -12,16 +12,14 @@ import {
SpellCheckPackage,
StrongPackage,
SubscriptPackage,
- SuperscriptPackage,
- SwitchTextTypePackage
+ SuperscriptPackage
} from 'substance'
-// console.log(BlockquotePackage)
-
// My Elements
import CommentPackage from './elements/comment/CommentPackage'
import ExtractPackage from './elements/extract/ExtractPackage'
import ImagePackage from './elements/images/ImagePackage'
+import LeftSwitchTextTypePackage from './elements/left_switch_text_type/LeftSwitchTextTypePackage'
import ListPackage from './elements/list/ListPackage'
import NotePackage from './elements/note/NotePackage'
import SourceNotePackage from './elements/source_note/SourceNotePackage'
@@ -40,7 +38,6 @@ let config = {
noBaseStyles: options.noBaseStyles
})
- config.import(SwitchTextTypePackage)
config.import(ParagraphPackage)
config.import(HeadingPackage)
config.import(EmphasisPackage)
@@ -54,6 +51,7 @@ let config = {
config.import(CommentPackage)
config.import(ExtractPackage)
config.import(ImagePackage)
+ config.import(LeftSwitchTextTypePackage)
config.import(LinkPackage)
config.import(ListPackage)
config.import(NotePackage)
diff --git a/app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypePackage.js b/app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypePackage.js
new file mode 100644
index 0000000000000000000000000000000000000000..07d8c896cd5e299afefb95c98020806252cc7781
--- /dev/null
+++ b/app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypePackage.js
@@ -0,0 +1,11 @@
+import {SwitchTextTypeCommand} from 'substance'
+import LeftSwitchTextTypeTool from './LeftSwitchTextTypeTool'
+
+export default {
+ name: 'switch-text-type',
+ configure: function (config, options) {
+ config.addToolGroup('text')
+ config.addCommand('switch-text-type', SwitchTextTypeCommand)
+ config.addTool('switch-text-type', LeftSwitchTextTypeTool, {toolGroup: options.toolGroup || 'text'})
+ }
+}
diff --git a/app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypeTool.js b/app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypeTool.js
new file mode 100644
index 0000000000000000000000000000000000000000..b503670091017358bd715ee4bd45d3b0eb35603e
--- /dev/null
+++ b/app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypeTool.js
@@ -0,0 +1,60 @@
+import { forEach, Tool } from 'substance'
+
+class LeftSwitchTextTypeTool extends Tool {
+
+ constructor (...args) {
+ super(...args)
+ let text = this.context.editorSession.configurator.config.textTypes
+ this.extendProps({textTypes: text})
+ }
+
+ didMount (...args) {
+ super.didMount(...args)
+ }
+
+ render ($$) {
+ let labelProvider = this.context.labelProvider
+ let el = $$('ul').addClass('sc-switch-text-type')
+
+ forEach(this.props.textTypes, function (textType) {
+ let item = $$('li')
+ .addClass('sm-' + textType.spec.name)
+ .addClass('se-option')
+ .attr('data-type', textType.spec.name)
+ .append(labelProvider.getLabel(textType.spec.name))
+ .on('click', this.handleClick)
+
+ item.ref('li-' + textType.spec.name)
+
+ if (this.props.currentTextType &&
+ textType.spec.name === this.props.currentTextType.name) {
+ item.addClass('active')
+ }
+
+ el.append(item)
+ }.bind(this))
+
+ if (this.props.currentTextType &&
+ this.props.currentTextType.name === 'container-selection') {
+ el.addClass('sm-disabled')
+ }
+
+ return el
+ }
+
+ executeCommand (textType) {
+ this.context.commandManager.executeCommand(this.getCommandName(), {
+ textType: textType
+ })
+ }
+
+ handleClick (e) {
+ e.preventDefault()
+ this.executeCommand(e.currentTarget.dataset.type)
+ }
+
+}
+
+LeftSwitchTextTypeTool.command = 'switch-text-type'
+
+export default LeftSwitchTextTypeTool
diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangeControlTool.js b/app/components/SimpleEditor/elements/track_change/TrackChangeControlTool.js
index d5b1d6cdee1dc99f294c20bd7ad15be67cf40bc7..a3ab7adfa9bf1b0a0eb93ba0ac0cb039c7e5fb26 100644
--- a/app/components/SimpleEditor/elements/track_change/TrackChangeControlTool.js
+++ b/app/components/SimpleEditor/elements/track_change/TrackChangeControlTool.js
@@ -1,6 +1,11 @@
import { Tool } from 'substance'
class TrackChangeControlTool extends Tool {
+
+ getClassNames () {
+ return 'sm-target-track-change-enable'
+ }
+
renderButton ($$) {
const el = super.renderButton($$)
diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js b/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js
index 9bbba4442ce36b323a9540c787c4bdf75c4a5666..83f007296d978af289b9b561491a1e1f330f01d0 100644
--- a/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js
+++ b/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js
@@ -1,6 +1,10 @@
import { Tool } from 'substance'
class TrackChangeControlViewTool extends Tool {
+
+ getClassNames () {
+ return 'sm-target-track-change-toggle-view'
+ }
renderButton ($$) {
const el = super.renderButton($$)
if (this.getViewMode()) el.addClass('track-changes-view-active')
@@ -15,8 +19,8 @@ class TrackChangeControlViewTool extends Tool {
getViewMode () {
const editor = this.context.editor
-
const { trackChangesView } = editor.state
+
return trackChangesView
}
}
diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangesProvider.js b/app/components/SimpleEditor/elements/track_change/TrackChangesProvider.js
index 8e7ebe93a759fec60fd4751fd5211198f647c1e1..4406615c2b9d1a97bd1d2d783a4c9826fa22a826 100644
--- a/app/components/SimpleEditor/elements/track_change/TrackChangesProvider.js
+++ b/app/components/SimpleEditor/elements/track_change/TrackChangesProvider.js
@@ -660,7 +660,6 @@ class TrackChangesProvider extends TOCProvider {
getAllExistingTrackAnnotations () {
const editorSession = this.getEditorSession()
- // const selectionState = documentSession.getSelectionState()
const selectionState = editorSession.getSelectionState()
const annotations = selectionState.getAnnotationsForType('track-change')
return annotations
@@ -762,7 +761,7 @@ class TrackChangesProvider extends TOCProvider {
// const lastChange = last(undoneChanges)
// const op = last(lastChange.ops)
//
- // const isTrack = op.path[0].split('-').slice(0, -1).join('-') === 'track-change'
+ // const isTrack = op.path[0].split('-').slice(0, -1).join('-') === 'track-change
}
/*