diff options
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.scss | 14 | ||||
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.tsx | 38 |
2 files changed, 27 insertions, 25 deletions
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss index 5112ed4b8..38d3a04e9 100644 --- a/src/client/views/nodes/ComparisonBox.scss +++ b/src/client/views/nodes/ComparisonBox.scss @@ -40,18 +40,18 @@ .clear-button { position: absolute; - top: 0; - height: 25px; - width: 25px; - background-color: white; - border-radius: 50%; + opacity: 1; + pointer-events: all; + cursor: pointer; } .clear-button.before { - left: 0; + top: 3px; + left: 3px; } .clear-button.after { - right: 0; + top: 3px; + right: 3px; } }
\ No newline at end of file diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index fe3f47e2a..15ba8d8f2 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -1,6 +1,6 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEye } from '@fortawesome/free-regular-svg-icons'; -import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush } from '@fortawesome/free-solid-svg-icons'; +import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush, faTimes } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, runInAction } from 'mobx'; import { observer } from "mobx-react"; @@ -71,8 +71,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C } private onPointerMove = ({ movementX }: PointerEvent) => { - const width = this.props.Document.clipWidth + movementX; - if (width && width > 0 && width < this.props.PanelWidth()) { + const width = NumCast(this.props.Document.clipWidth) + movementX; //is it ok to use NumCast + if (width && width > 5 && width < this.props.PanelWidth()) { this.props.Document.clipWidth = width; } } @@ -117,13 +117,14 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C style={{ width: this.props.PanelWidth() }}> { beforeDoc ? - <><ContentFittingDocumentView {...this.props} - Document={beforeDoc} - getTransform={this.props.ScreenToLocalTransform} /> - <div - className="clear-button before" - onClick={(e) => this.clearBeforeDoc(e)} - /></> + <> + <ContentFittingDocumentView {...this.props} + Document={beforeDoc} + getTransform={this.props.ScreenToLocalTransform} /> + <div className="clear-button before" onClick={(e) => this.clearBeforeDoc(e)}> + <FontAwesomeIcon className="clear-button before" icon={faTimes} size="sm" /> + </div> + </> : <div className="placeholder"> upload before image! @@ -141,15 +142,16 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C }}> { afterDoc ? - <><ContentFittingDocumentView {...this.props} - Document={afterDoc} - getTransform={this.props.ScreenToLocalTransform} /> - <div - className="clear-button after" - onClick={(e) => this.clearAfterDoc(e)} - /></> + <> + <ContentFittingDocumentView {...this.props} + Document={afterDoc} + getTransform={this.props.ScreenToLocalTransform} /> + <div className="clear-button after" onClick={(e) => this.clearAfterDoc(e)}> + <FontAwesomeIcon className="clear-button after" icon={faTimes} size="sm" /> + </div> + </> : - <div className="placeholder" style={{ right: "0" }}> + <div className="placeholder" style={{ textAlign: "right" }}> upload after image! </div> } |