set up overlapping images and slider bar

2 files changed, 56 insertions, 21 deletions

diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index 57c680d55..2c907a010 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -4,8 +4,36 @@
     width: 100%;
     height: 100%;
 
-    .beforeBox-cont {
-        width: 100%;
+    .clip-div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50%;
         height: 100%;
+        overflow: hidden;
+        z-index: 999;
+
+        .beforeBox-cont {
+            height: 100%;
+            width: 300px;
+        }
+
+        .slide-bar {
+            position: absolute;
+            width: 5px;
+            height: 100%;
+            top: 0;
+            right: 0;
+            background-color: black;
+            cursor: ew-resize;
+        }
+    }
+
+    .afterBox-cont {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        width: 300px;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 9120daa6c..5c44b3068 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -58,11 +58,13 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
 
     clearBeforeDoc = (e: PointerEvent) => {
         e.stopPropagation;
+        e.preventDefault;
         delete this.props.Document.beforeDoc;
     }
 
     clearAfterDoc = (e: PointerEvent) => {
         e.stopPropagation;
+        e.preventDefault;
         delete this.props.Document.afterDoc;
     }
 
@@ -75,22 +77,25 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
         const afterDoc = this.props.Document.afterDoc as Doc;
         return (
             <div className={`comparisonBox`} style={{ backgroundColor: "blue" }}>
-                <div
-                    className="beforeBox-cont"
-                    key={this.props.Document[Id]}
-                    ref={(ele) => {
-                        this._beforeDropDisposer && this._beforeDropDisposer();
-                        this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc");
-                    }}
-                    style={{ backgroundColor: "red" }}
-                >
-                    {
-                        beforeDoc ?
-                            <ContentFittingDocumentView {...this.props}
-                                Document={beforeDoc}
-                                getTransform={this.props.ScreenToLocalTransform} />
-                            : null
-                    }
+                <div className="clip-div">
+                    <div
+                        className="beforeBox-cont"
+                        key={this.props.Document[Id]}
+                        ref={(ele) => {
+                            this._beforeDropDisposer && this._beforeDropDisposer();
+                            this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc");
+                        }}
+                        style={{ backgroundColor: "red" }}>
+                        {
+                            beforeDoc ?
+                                <ContentFittingDocumentView {...this.props}
+                                    Document={beforeDoc}
+                                    getTransform={this.props.ScreenToLocalTransform} />
+                                :
+                                <div className="placeholder">upload before image!</div>
+                        }
+                    </div>
+                    <div className="slide-bar" />
                 </div>
                 <div
                     className="afterBox-cont"
@@ -99,14 +104,16 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                         this._afterDropDisposer && this._afterDropDisposer();
                         this._afterDropDisposer = this.createDropTarget(ele, "afterDoc");
                     }}
-                    style={{ backgroundColor: "orange" }}
-                >
+                    style={{ backgroundColor: "orange" }}>
                     {
                         afterDoc ?
                             <ContentFittingDocumentView {...this.props}
                                 Document={afterDoc}
                                 getTransform={this.props.ScreenToLocalTransform} />
-                            : null
+                            :
+                            <div className="placeholder" style={{ float: "right" }}>
+                                upload after image!
+                            </div>
                     }
                 </div>
             </div>);