wip

packages/builder/src/builderStore/index.js

@@ -147,5 +147,3 @@ export const userSelectedResourceMap = derived(userStore, $userStore => {
 export const isOnlyUser = derived(userStore, $userStore => {
   return $userStore.length < 2
 })
-
-export const screensHeight = writable("210px")

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte

@@ -4,7 +4,6 @@
     store,
     sortedScreens,
     userSelectedResourceMap,
-    screensHeight,
   } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import RoleIndicator from "./RoleIndicator.svelte"
@@ -19,7 +18,6 @@
   let resizing = false
   let searchValue = ""
   let searchInput
-  let container
   let screensContainer
   let scrolling = false
 
@@ -68,8 +66,6 @@
   class="screens"
   class:searching
   class:resizing
-  style={`height:${$screensHeight};`}
-  bind:this={container}
   use:resizable
 >
   <div class="header" class:scrolling>
@@ -127,7 +123,6 @@
     class="divider"
     class:disabled={searching}
     use:resizableHandle
-    on:dblclick={() => screensHeight.set("210px")}
   />
 </div>
 
@@ -138,10 +133,11 @@
     min-height: 147px;
     max-height: calc(100% - 147px);
     position: relative;
-    transition: height 300ms ease-out;
+    transition: height 300ms ease-out, max-height 300ms ease-out;
+    height: 210px;
   }
   .screens.searching {
-    max-height: none;
+    max-height: 100%;
     height: 100% !important;
   }
   .screens.resizing {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js

@@ -1,63 +1,3 @@
-export const getHorizontalResizeActions = (initialValue, setValue = () => {}) => {
-  let element = null;
-
-  const elementAction = (node) => {
-    element = node;
-
-    if (initialValue != null) {
-      element.style.height = `${initialValue}px`
-    }
-
-    return {
-      destroy() {
-        element = null;
-      }
-    }
-  }
-
-  const dragHandleAction = (node) => {
-    let startWidth = null;
-    let startPosition = null;
-
-    const handleMouseMove = (e) => {
-      const change = e.pageX - startPosition;
-      element.style.width = `${startWidth + change}px`
-    }
-
-    const handleMouseUp = () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-      element.style.removeProperty('transition'); // remove temporary transition override
-      setValue(element.clientHeight);
-    }
-
-    const handleMouseDown = (e) => {
-      if (e.target.hasAttribute("disabled") && e.target.getAttribute("disabled") !== "false") {
-        return;
-      }
-
-      element.style.transition = "width 0ms"; // temporarily override any width transitions
-      startWidth = element.clientWidth;
-      startPosition = e.pageX;
-
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-    };
-
-    node.addEventListener("mousedown", handleMouseDown);
-
-    return {
-      destroy() {
-        node.removeEventListener("mousedown", handleMouseDown);
-      }
-    }
-  }
-
-  return [
-    elementAction,
-    dragHandleAction
-  ]
-};
 
 export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
   let element = null;
@@ -93,6 +33,16 @@ export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
     }
 
     const handleMouseDown = (e) => {
+      if (e.detail > 1) {
+        // e.detail is the number of rapid clicks, so e.detail = 2 is 
+        // a double click. We want to prevent default behaviour in 
+        // this case as it highlights nearby selectable elements, which
+        // then interferes with the resizing mousemove.
+        // Putting this on the double click handler doesn't seem to 
+        // work, so it must go here.
+        e.preventDefault();
+      }
+
       if (e.target.hasAttribute("disabled") && e.target.getAttribute("disabled") !== "false") {
         return;
       }
@@ -105,11 +55,17 @@ export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
       window.addEventListener("mouseup", handleMouseUp);
     };
 
+    const handleDoubleClick = (e) => {
+      element.style.removeProperty("height");
+    }
+
     node.addEventListener("mousedown", handleMouseDown);
+    node.addEventListener("dblclick", handleDoubleClick);
 
     return {
       destroy() {
         node.removeEventListener("mousedown", handleMouseDown);
+        node.removeEventListener("dblclick", handleDoubleClick);
       }
     }
   }