From 81e462786bcbcdcdca49cb4b431b486e5489ed81 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 2 Jan 2017 20:04:28 +0200
Subject: [PATCH] track changes view mode--not quite working--
---
app/components/SimpleEditor/Editor.js | 11 ++++++--
app/components/SimpleEditor/SimpleEditor.scss | 3 +++
.../track_change/TrackChangeComponent.js | 27 +++++++++++++++++++
.../TrackChangeControlViewCommand.js | 5 ++--
.../TrackChangeControlViewTool.js | 21 ++++++++++++++-
.../elements/track_change/trackChange.scss | 8 ++++++
6 files changed, 70 insertions(+), 5 deletions(-)
diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js
index 02c1caa..3e2d315 100644
--- a/app/components/SimpleEditor/Editor.js
+++ b/app/components/SimpleEditor/Editor.js
@@ -22,7 +22,8 @@ class Editor extends ProseEditor {
this.handleActions({
'showComments': function () { this.toggleCommentsArea(true) },
'hideComments': function () { this.toggleCommentsArea(false) },
- 'trackChangesUpdate': function () { this.updateTrackChange() }
+ 'trackChangesUpdate': function () { this.updateTrackChange() },
+ 'trackChangesViewUpdate': function () { this.updateTrackChangeView() }
})
}
@@ -36,6 +37,11 @@ class Editor extends ProseEditor {
this.extendState({ trackChanges: !this.props.trackChanges })
}
+ updateTrackChangeView () {
+ this.extendState({ trackChangesView: !this.state.trackChangesView })
+ console.log('in editor', this.state.trackChangesView)
+ }
+
willUpdateState () {}
didMount () {
@@ -122,7 +128,8 @@ class Editor extends ProseEditor {
getInitialState () {
return {
editorReady: false,
- trackChanges: this.props.trackChanges
+ trackChanges: this.props.trackChanges,
+ trackChangesView: true
}
}
diff --git a/app/components/SimpleEditor/SimpleEditor.scss b/app/components/SimpleEditor/SimpleEditor.scss
index c83cbf2..1417159 100644
--- a/app/components/SimpleEditor/SimpleEditor.scss
+++ b/app/components/SimpleEditor/SimpleEditor.scss
@@ -106,6 +106,9 @@ $white: #fff;
.sm-target-track-change-toggle-view {
cursor: pointer;
button::after {
+ content: 'View is Off';
+ }
+ .track-changes-view-active::after {
content: 'View is On';
}
}
diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangeComponent.js b/app/components/SimpleEditor/elements/track_change/TrackChangeComponent.js
index fb744b2..b0c41a1 100644
--- a/app/components/SimpleEditor/elements/track_change/TrackChangeComponent.js
+++ b/app/components/SimpleEditor/elements/track_change/TrackChangeComponent.js
@@ -4,12 +4,25 @@ class TrackChangeComponent extends AnnotationComponent {
render ($$) {
const user = this.context.controller.props.user
const status = this.props.node.status
+ const trackChangesView = this.toggleTrackChangeView()
+ let hideDeletes = ''
+ let ShowAdditions = ''
+ // console.log('trackChangesView', trackChangesView)
+ if (trackChangesView === false && status === 'delete') {
+ hideDeletes = 'sc-track-delete-hide'
+ }
+
+ if (trackChangesView === false && status === 'add') {
+ ShowAdditions = 'sc-track-add-show'
+ }
var el = $$('span')
.attr('data-id', this.props.node.id)
.attr('data-user', user.username)
.attr('data-role', user.teams[0].name)
.addClass(this.getClassNames())
+ .addClass(hideDeletes)
+ .addClass(ShowAdditions)
.append(this.props.children)
const className = 'sc-track-change-' + status
@@ -18,6 +31,20 @@ class TrackChangeComponent extends AnnotationComponent {
return el
}
+ getSurface () {
+ const surfaceManager = this.context.surfaceManager
+ const containerId = this.context.controller.props.containerId
+
+ return surfaceManager.getSurface(containerId)
+ }
+
+ toggleTrackChangeView () {
+ const self = this
+ const surface = self.getSurface()
+ // console.log('yoyyoyoy', surface)
+ return surface._owner.state.trackChangesView
+ }
+
}
export default TrackChangeComponent
diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewCommand.js b/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewCommand.js
index 393fbe8..1eb570f 100644
--- a/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewCommand.js
+++ b/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewCommand.js
@@ -10,8 +10,9 @@ class TrackChangeControlViewCommand extends Command {
return newState
}
- execute () {
- console.log('execute command enable/disable view mode track changes')
+ execute (params, context) {
+ const surface = context.surfaceManager.getSurface('body')
+ surface.send('trackChangesViewUpdate')
return true
}
}
diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js b/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js
index 4f48f3f..1bb44a8 100644
--- a/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js
+++ b/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js
@@ -1,6 +1,25 @@
import { Tool } from 'substance'
-class TrackChangeControlViewTool extends Tool {}
+class TrackChangeControlViewTool extends Tool {
+ renderButton ($$) {
+ const el = super.renderButton($$)
+ let trackChangesViewMode = this.isTrackChangesViewOn()
+ if (trackChangesViewMode === true) el.addClass('track-changes-view-active')
+ return el
+ }
+
+ getSurface () {
+ const surfaceManager = this.context.surfaceManager
+ const containerId = this.context.controller.props.containerId
+ return surfaceManager.getSurface(containerId)
+ }
+
+ isTrackChangesViewOn () {
+ const surface = this.getSurface()
+ if (!surface) return
+ return surface._owner.state.trackChangesView
+ }
+}
TrackChangeControlViewTool.type = 'track-change-toggle-view'
diff --git a/app/components/SimpleEditor/elements/track_change/trackChange.scss b/app/components/SimpleEditor/elements/track_change/trackChange.scss
index b8131dc..d0d9d2d 100644
--- a/app/components/SimpleEditor/elements/track_change/trackChange.scss
+++ b/app/components/SimpleEditor/elements/track_change/trackChange.scss
@@ -12,3 +12,11 @@
background-color: red;
text-decoration: line-through;
}
+
+.sc-track-delete-hide {
+ display: none;
+}
+
+.sc-track-add-show {
+ background: transparent !important;
+}
--
GitLab