fix substance selection

app/components/SimpleEditor/elements/track_change/TrackChangeComponent.js

@@ -16,14 +16,17 @@ class TrackChangeComponent extends AnnotationComponent {
       ShowAdditions = 'sc-track-add-show'
     }
 
-    const accept = $$('a').addClass('sc-track-item')
-                   .on('click', this.acceptTrackChange)
-                  .append('accept')
-    const reject = $$('a').addClass('sc-track-item')
-                    .on('click', this.rejectTrackChange)
-                   .append('reject')
-    const seperator = $$('span').addClass('sc-track-separator')
-                      .append(' / ')
+    const accept = $$('a')
+                    .addClass('sc-track-item-accept')
+                    .on('click', this.acceptTrackChange)
+
+    const reject = $$('a')
+                   .addClass('sc-track-item-reject')
+                   .on('click', this.rejectTrackChange)
+
+    const seperator = $$('span')
+                      .addClass('sc-track-item-separator')
+
     const container = $$('span').addClass('sc-accept-reject-container')
                       .append(accept)
                       .append(seperator)

app/components/SimpleEditor/elements/track_change/TrackChangeControlCommand.js

@@ -10,6 +10,7 @@ class TrackChangeControlCommand extends Command {
     return newState
   }
   execute (params, context) {
+    console.log('in execute')
     const surface = context.surfaceManager.getSurface('body')
     surface.send('trackChangesUpdate')
     return true

app/components/SimpleEditor/elements/track_change/trackChange.scss

@@ -2,13 +2,18 @@ $blue: #4a90e2;
 $red: #f00;
 $yellow: #f7f70c;
 
-.sc-track-change {
-  // background-color: #f7f70c;
+
+  .se-selection-fragment {
+     .sc-accept-reject-container:only-of-type  {
+         display: none;
+    }
 }
 
+
+
+
 .sc-track-change-add {
   color: $blue;
-  // display: inline-block;
   text-decoration: none;
 }
 
@@ -25,23 +30,39 @@ $yellow: #f7f70c;
   color: inherit !important;
 
   .sc-accept-reject-container {
-    display: none;
-  }
+  display: none;
+}
 }
 
-.sc-accept-reject-container {
-  display: inline-block;
+.sc-track-item-accept::after {
+  color: $blue;
+  content: 'accept';
+  cursor: pointer;
+  display: inline-flex;
   font-size: 14px;
   margin-left: -90px;
   margin-top: 20px;
   position: absolute;
+}
 
-  .sc-track-item {
-    color: $blue;
-    cursor: pointer;
-  }
+.sc-track-item-separator::after {
+  color: $blue;
+  content: '/';
+  cursor: default;
+  display: inline-flex;
+  font-size: 14px;
+  margin-left: -45px;
+  margin-top: 20px;
+  position: absolute;
+}
 
-  .sc-track-separator {
-    color: $blue;
-  }
+.sc-track-item-reject::after {
+  color: $blue;
+  content: 'reject';
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 14px;
+  margin-left: -35px;
+  margin-top: 20px;
+  position: absolute;
 }