diff options
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.scss | 16 | ||||
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.tsx | 3 |
2 files changed, 13 insertions, 6 deletions
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss index 7849c9976..810a824cf 100644 --- a/src/client/views/nodes/ComparisonBox.scss +++ b/src/client/views/nodes/ComparisonBox.scss @@ -1,4 +1,5 @@ -.comparisonBox-interactive, .comparisonBox { +.comparisonBox-interactive, +.comparisonBox { border-radius: inherit; width: 100%; height: 100%; @@ -19,13 +20,13 @@ } } - .slide-bar { + .slide-bar { position: absolute; height: 100%; width: 3px; display: inline-block; background: white; - cursor: ew-resize; + .slide-handle { position: absolute; display: none; @@ -33,7 +34,9 @@ width: 30px; bottom: 0px; left: -10.5px; - .left-handle, .right-handle{ + + .left-handle, + .right-handle { width: 15px; } } @@ -77,10 +80,13 @@ } } } + .comparisonBox-interactive { pointer-events: unset; + cursor: ew-resize; + .slide-bar { - .slide-handle { + .slide-handle { display: flex; } } diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 47bd7e9ca..cce60628d 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -105,7 +105,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C {displayBox("before", 0, 5)} </div> - <div className="slide-bar" style={{ left: `calc(${clipWidth} - 0.5px)` }}> + <div className="slide-bar" style={{ left: `calc(${clipWidth} - 0.5px)` }} + onPointerDown={e => this.registerSliding(e, this.props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */ > <div className="slide-handle" /> </div> </div >); |