added resize mode functionality based on location of drag initiation, pinned above and global below

2 files changed, 29 insertions, 5 deletions

diff --git a/src/client/views/collections/CollectionMulticolumnView.scss b/src/client/views/collections/CollectionMulticolumnView.scss
index acb194983..5fbc35df6 100644
--- a/src/client/views/collections/CollectionMulticolumnView.scss
+++ b/src/client/views/collections/CollectionMulticolumnView.scss
@@ -19,6 +19,13 @@
         background: black;
         cursor: ew-resize;
         transition: 0.5s opacity ease;
+        display: flex;
+        flex-direction: column;
+
+        .internal {
+            width: 100%;
+            height: 100%;
+        }
     }
 
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx
index aa84e0db6..ef15b29eb 100644
--- a/src/client/views/collections/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/CollectionMulticolumnView.tsx
@@ -28,7 +28,7 @@ interface LayoutData {
 }
 
 const resolvedUnits = ["*", "px"];
-const resizerWidth = 2;
+const resizerWidth = 4;
 const resizerOpacity = 1;
 
 @observer
@@ -209,14 +209,22 @@ interface ResizerProps {
     toRight?: Doc;
 }
 
+enum ResizeMode {
+    Global,
+    Pinned,
+    Undefined
+}
+
 @observer
 class ResizeBar extends React.Component<ResizerProps> {
     @observable private isHoverActive = false;
     @observable private isResizingActive = false;
+    private resizeMode = ResizeMode.Undefined;
 
-    private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
+    private registerResizing = (e: React.PointerEvent<HTMLDivElement>, mode: ResizeMode) => {
         e.stopPropagation();
         e.preventDefault();
+        this.resizeMode = mode;
         window.removeEventListener("pointermove", this.onPointerMove);
         window.removeEventListener("pointerup", this.onPointerUp);
         window.addEventListener("pointermove", this.onPointerMove);
@@ -236,7 +244,7 @@ class ResizeBar extends React.Component<ResizerProps> {
                 const scale = widthUnit === "*" ? unitLength : 1;
                 toNarrow.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / scale;
             }
-            if (toWiden) {
+            if (this.resizeMode === ResizeMode.Pinned && toWiden) {
                 const { widthUnit, widthMagnitude } = toWiden;
                 const scale = widthUnit === "*" ? unitLength : 1;
                 toWiden.widthMagnitude = NumCast(widthMagnitude) + Math.abs(movementX) / scale;
@@ -267,6 +275,7 @@ class ResizeBar extends React.Component<ResizerProps> {
 
     @action
     private onPointerUp = () => {
+        this.resizeMode = ResizeMode.Undefined;
         this.isResizingActive = false;
         this.isHoverActive = false;
         window.removeEventListener("pointermove", this.onPointerMove);
@@ -281,10 +290,18 @@ class ResizeBar extends React.Component<ResizerProps> {
                     width: this.props.width,
                     opacity: this.isActivated && this.isHoverActive ? resizerOpacity : 0
                 }}
-                onPointerDown={this.registerResizing}
                 onPointerEnter={action(() => this.isHoverActive = true)}
                 onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}
-            />
+            >
+                <div
+                    className={"internal"}
+                    onPointerDown={e => this.registerResizing(e, ResizeMode.Pinned)}
+                />
+                <div
+                    className={"internal"}
+                    onPointerDown={e => this.registerResizing(e, ResizeMode.Global)}
+                />
+            </div>
         );
     }