diff --git a/src/TextAnnotator.jsx b/src/TextAnnotator.jsx index 6abebd1..aad0121 100644 --- a/src/TextAnnotator.jsx +++ b/src/TextAnnotator.jsx @@ -263,6 +263,7 @@ export default class TextAnnotator extends Component { selectedElement={this.state.selectedDOMElement} config={this.props.config} env={this.props.env} + isRemovable={this.props.isRemovable} onAnnotationCreated={this.onCreateOrUpdateAnnotation('onAnnotationCreated')} onAnnotationUpdated={this.onCreateOrUpdateAnnotation('onAnnotationUpdated')} onAnnotationDeleted={this.onDeleteAnnotation} diff --git a/src/editor/Editor.jsx b/src/editor/Editor.jsx index 64a7a80..0a44d93 100644 --- a/src/editor/Editor.jsx +++ b/src/editor/Editor.jsx @@ -132,9 +132,18 @@ const Editor = props => { } }; + const onRemove = () => props.onAnnotationDeleted(props.annotation); + // Use default comment + tag widget unless host app overrides const widgets = props.config.widgets ? props.config.widgets.map(getWidget) : DEFAULT_WIDGETS; + + const removable = + currentAnnotation && + currentAnnotation.bodies.length > 0 && + !currentAnnotation.isSelection && + (props.isRemovable ? props.isRemovable(currentAnnotation) : true); + return (
@@ -160,6 +169,12 @@ const Editor = props => {
) : (
+ { removable && ( + + )} + diff --git a/themes/default/globals/includes/_buttons.scss b/themes/default/globals/includes/_buttons.scss index f811279..d51956f 100644 --- a/themes/default/globals/includes/_buttons.scss +++ b/themes/default/globals/includes/_buttons.scss @@ -40,3 +40,14 @@ background-color:transparent; text-shadow:none; } + +.r6o-btn.left { + margin-left: 8px; + margin-right: 0px; + float: left; +} + +.r6o-btn.highlight.outline { + border:1px solid $orange; + color:$orange; +} diff --git a/themes/default/globals/includes/_colors.scss b/themes/default/globals/includes/_colors.scss index 2e58e58..fcfb8b0 100644 --- a/themes/default/globals/includes/_colors.scss +++ b/themes/default/globals/includes/_colors.scss @@ -19,6 +19,9 @@ $blueish-white-hi:lighten($blueish-white, 3%); $lightgrey-border:#e5e5e5; $lightgrey-border-darker:#d6d7d9; +// Highlight color +$orange: rgb(230, 149, 0); + /** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ **/ /** Type colors **/ /** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ **/