Merge branch 'master' of github.com:Budibase/budibase into global-bindings

packages/bbui/src/Form/Core/TextField.svelte

@@ -20,7 +20,7 @@
   let focus = false
 
   const updateValue = newValue => {
-    if (readonly) {
+    if (readonly || disabled) {
       return
     }
     if (type === "number") {
@@ -31,14 +31,14 @@
   }
 
   const onFocus = () => {
-    if (readonly) {
+    if (readonly || disabled) {
       return
     }
     focus = true
   }
 
   const onBlur = event => {
-    if (readonly) {
+    if (readonly || disabled) {
       return
     }
     focus = false
@@ -46,14 +46,14 @@
   }
 
   const onInput = event => {
-    if (readonly || !updateOnChange) {
+    if (readonly || !updateOnChange || disabled) {
       return
     }
     updateValue(event.target.value)
   }
 
   const updateValueOnEnter = event => {
-    if (readonly) {
+    if (readonly || disabled) {
       return
     }
     if (event.key === "Enter") {
@@ -69,6 +69,7 @@
   }
 
   onMount(() => {
+    if (disabled) return
     focus = autofocus
     if (focus) field.focus()
   })
@@ -108,4 +109,16 @@
   .spectrum-Textfield {
     width: 100%;
   }
+
+  input::placeholder {
+    color: var(--grey-7);
+  }
+
+  input:hover::placeholder {
+    color: var(--grey-7) !important;
+  }
+
+  input:focus::placeholder {
+    color: var(--grey-7) !important;
+  }
 </style>

packages/builder/src/builderStore/componentUtils.js

@@ -1,4 +1,5 @@
 import { store } from "./index"
+import { get } from "svelte/store"
 import { Helpers } from "@budibase/bbui"
 import {
   decodeJSBinding,
@@ -245,6 +246,10 @@ export const makeComponentUnique = component => {
 }
 
 export const getComponentText = component => {
+  if (component == null) {
+    return ""
+  }
+
   if (component?._instanceName) {
     return component._instanceName
   }
@@ -253,3 +258,16 @@ export const getComponentText = component => {
     "component"
   return capitalise(type)
 }
+
+export const getComponentName = component => {
+  if (component == null) {
+    return ""
+  }
+
+  const components = get(store)?.components || {}
+  const componentDefinition = components[component._component] || {}
+  const name =
+    componentDefinition.friendlyName || componentDefinition.name || ""
+
+  return name
+}

packages/builder/src/builderStore/index.js

@@ -4,7 +4,7 @@ import { getTemporalStore } from "./store/temporal"
 import { getThemeStore } from "./store/theme"
 import { getUserStore } from "./store/users"
 import { getDeploymentStore } from "./store/deployments"
-import { derived, writable, get } from "svelte/store"
+import { derived, get } from "svelte/store"
 import { findComponent, findComponentPath } from "./componentUtils"
 import { RoleUtils } from "@budibase/frontend-core"
 import { createHistoryStore } from "builderStore/store/history"
@@ -146,5 +146,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/components/common/NavItem.svelte

@@ -1,10 +1,11 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { AbsTooltip, Icon } from "@budibase/bbui"
   import { createEventDispatcher, getContext } from "svelte"
   import { helpers } from "@budibase/shared-core"
   import { UserAvatars } from "@budibase/frontend-core"
 
   export let icon
+  export let iconTooltip
   export let withArrow = false
   export let withActions = true
   export let indentLevel = 0
@@ -77,7 +78,11 @@
   {style}
   {draggable}
 >
-  <div class="nav-item-content" bind:this={contentRef}>
+  <div
+    class="nav-item-content"
+    bind:this={contentRef}
+    class:right={rightAlignIcon}
+  >
     {#if withArrow}
       <div
         class:opened
@@ -98,7 +103,9 @@
       </div>
     {:else if icon}
       <div class="icon" class:right={rightAlignIcon}>
+        <AbsTooltip type="info" position="right" text={iconTooltip}>
           <Icon color={iconColor} size="S" name={icon} />
+        </AbsTooltip>
       </div>
     {/if}
     <div class="text" title={showTooltip ? text : null}>
@@ -166,6 +173,11 @@
     width: max-content;
     position: relative;
     padding-left: var(--spacing-l);
+    box-sizing: border-box;
+  }
+
+  .nav-item-content.right {
+    width: 100%;
   }
 
   /* Needed to fully display the actions icon */
@@ -264,6 +276,7 @@
   }
 
   .right {
+    margin-left: auto;
     order: 10;
   }
 </style>

packages/builder/src/components/common/resizable.js

@@ -0,0 +1,119 @@
+const getResizeActions = (
+  cssProperty,
+  mouseMoveEventProperty,
+  elementProperty,
+  initialValue,
+  setValue = () => {}
+) => {
+  let element = null
+
+  const elementAction = node => {
+    element = node
+
+    if (initialValue != null) {
+      element.style[cssProperty] = `${initialValue}px`
+    }
+
+    return {
+      destroy() {
+        element = null
+      },
+    }
+  }
+
+  const dragHandleAction = node => {
+    let startProperty = null
+    let startPosition = null
+
+    const handleMouseMove = e => {
+      e.preventDefault() // Prevent highlighting while dragging
+      const change = e[mouseMoveEventProperty] - startPosition
+      element.style[cssProperty] = `${startProperty + change}px`
+    }
+
+    const handleMouseUp = e => {
+      e.preventDefault() // Prevent highlighting while dragging
+      window.removeEventListener("mousemove", handleMouseMove)
+      window.removeEventListener("mouseup", handleMouseUp)
+
+      element.style.removeProperty("transition") // remove temporary transition override
+      for (let item of document.getElementsByTagName("iframe")) {
+        item.style.removeProperty("pointer-events")
+      }
+
+      setValue(element[elementProperty])
+    }
+
+    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
+      }
+
+      element.style.transition = `${cssProperty} 0ms` // temporarily override any height transitions
+
+      // iframes swallow mouseup events if your cursor ends up over it during a drag, so make them
+      // temporarily non-interactive
+      for (let item of document.getElementsByTagName("iframe")) {
+        item.style.pointerEvents = "none"
+      }
+
+      startProperty = element[elementProperty]
+      startPosition = e[mouseMoveEventProperty]
+
+      window.addEventListener("mousemove", handleMouseMove)
+      window.addEventListener("mouseup", handleMouseUp)
+    }
+
+    const handleDoubleClick = () => {
+      element.style.removeProperty(cssProperty)
+    }
+
+    node.addEventListener("mousedown", handleMouseDown)
+    node.addEventListener("dblclick", handleDoubleClick)
+
+    return {
+      destroy() {
+        node.removeEventListener("mousedown", handleMouseDown)
+        node.removeEventListener("dblclick", handleDoubleClick)
+      },
+    }
+  }
+
+  return [elementAction, dragHandleAction]
+}
+
+export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
+  return getResizeActions(
+    "height",
+    "pageY",
+    "clientHeight",
+    initialValue,
+    setValue
+  )
+}
+
+export const getHorizontalResizeActions = (
+  initialValue,
+  setValue = () => {}
+) => {
+  return getResizeActions(
+    "width",
+    "pageX",
+    "clientWidth",
+    initialValue,
+    setValue
+  )
+}

packages/builder/src/components/design/Panel.svelte

@@ -1,8 +1,9 @@
 <script>
-  import { Icon, Body } from "@budibase/bbui"
+  import { AbsTooltip, Icon, Body } from "@budibase/bbui"
 
   export let title
   export let icon
+  export let iconTooltip
   export let showAddButton = false
   export let showBackButton = false
   export let showCloseButton = false
@@ -36,7 +37,9 @@
       <Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
     {/if}
     {#if icon}
+      <AbsTooltip type="info" text={iconTooltip}>
         <Icon name={icon} />
+      </AbsTooltip>
     {/if}
     <div class="title">
       {#if customTitleContent}
@@ -68,6 +71,7 @@
 
 <style>
   .panel {
+    min-width: 260px;
     width: 260px;
     flex: 0 0 260px;
     background: var(--background);
@@ -85,6 +89,7 @@
     border-right: var(--border-light);
   }
   .panel.wide {
+    min-width: 310px;
     width: 310px;
     flex: 0 0 310px;
   }

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte

@@ -1,7 +1,7 @@
 <script>
   import Panel from "components/design/Panel.svelte"
   import { store, selectedComponent, selectedScreen } from "builderStore"
-  import { getComponentText } from "builderStore/componentUtils"
+  import { getComponentName } from "builderStore/componentUtils"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
@@ -43,17 +43,25 @@
 
   $: id = $selectedComponent?._id
   $: id, (section = tabs[0])
+
+  $: componentName = getComponentName(componentInstance)
 </script>
 
 {#if $selectedComponent}
   {#key $selectedComponent._id}
-    <Panel {title} icon={componentDefinition?.icon} borderLeft wide>
+    <Panel
+      {title}
+      icon={componentDefinition?.icon}
+      iconTooltip={componentName}
+      borderLeft
+      wide
+    >
       <span class="panel-title-content" slot="panel-title-content">
         <input
           class="input"
           value={title}
           {title}
-          placeholder={getComponentText(componentInstance)}
+          placeholder={componentName}
           on:keypress={e => {
             if (e.key.toLowerCase() === "enter") {
               e.target.blur()

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

@@ -25,6 +25,7 @@
 
 <style>
   .app-panel {
+    min-width: 410px;
     flex: 1 1 auto;
     overflow-y: auto;
     display: flex;

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte

@@ -12,6 +12,7 @@
   import {
     findComponentPath,
     getComponentText,
+    getComponentName,
   } from "builderStore/componentUtils"
   import { get } from "svelte/store"
   import { dndStore } from "./dndStore"
@@ -110,6 +111,7 @@
         on:drop={onDrop}
         text={getComponentText(component)}
         icon={getComponentIcon(component)}
+        iconTooltip={getComponentName(component)}
         withArrow={componentHasChildren(component)}
         indentLevel={level}
         selected={$store.selectedComponentId === component._id}

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

@@ -1,21 +1,55 @@
 <script>
   import ScreenList from "./ScreenList/index.svelte"
   import ComponentList from "./ComponentList/index.svelte"
+  import { getHorizontalResizeActions } from "components/common/resizable"
+
+  const [resizable, resizableHandle] = getHorizontalResizeActions()
 </script>
 
-<div class="panel">
+<div class="panel" use:resizable>
+  <div class="content">
     <ScreenList />
     <ComponentList />
   </div>
+  <div class="divider">
+    <div class="dividerClickExtender" role="separator" use:resizableHandle />
+  </div>
+</div>
 
 <style>
   .panel {
+    display: flex;
+    min-width: 270px;
     width: 310px;
     height: 100%;
-    border-right: var(--border-light);
+  }
+
+  .content {
+    overflow: hidden;
+    flex-grow: 1;
+    height: 100%;
     display: flex;
     flex-direction: column;
     background: var(--background);
     position: relative;
   }
+
+  .divider {
+    position: relative;
+    height: 100%;
+    width: 2px;
+    background: var(--spectrum-global-color-gray-200);
+    transition: background 130ms ease-out;
+  }
+  .divider:hover {
+    background: var(--spectrum-global-color-gray-300);
+    cursor: row-resize;
+  }
+
+  .dividerClickExtender {
+    position: absolute;
+    cursor: col-resize;
+    height: 100%;
+    width: 12px;
+  }
 </style>

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

@@ -1,108 +1,50 @@
 <script>
   import { Layout } from "@budibase/bbui"
-  import {
+  import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
-    store,
-    sortedScreens,
-    userSelectedResourceMap,
-    screensHeight,
-  } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import RoleIndicator from "./RoleIndicator.svelte"
   import DropdownMenu from "./DropdownMenu.svelte"
-  import { onMount } from "svelte"
   import { goto } from "@roxi/routify"
+  import { getVerticalResizeActions } from "components/common/resizable"
   import NavHeader from "components/common/NavHeader.svelte"
 
-  let search = false
+  const [resizable, resizableHandle] = getVerticalResizeActions()
-  let resizing = false
-  let searchValue = ""
 
-  let container
+  let searching = false
+  let searchValue = ""
   let screensContainer
   let scrolling = false
-  let previousHeight = null
-  let dragOffset
 
   $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
 
-  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+  const handleOpenSearch = async () => {
-
-  $: search ? openSearch() : closeSearch()
-
-  const openSearch = async () => {
     screensContainer.scroll({ top: 0, behavior: "smooth" })
-    previousHeight = $screensHeight
-    $screensHeight = "calc(100% + 1px)"
   }
 
-  const closeSearch = async () => {
+  $: {
-    if (previousHeight) {
+    if (searching) {
-      // Restore previous height and wait for animation
+      handleOpenSearch()
-      $screensHeight = previousHeight
-      previousHeight = null
-      await sleep(300)
     }
   }
 
-  const getFilteredScreens = (screens, search) => {
+  const getFilteredScreens = (screens, searchValue) => {
     return screens.filter(screen => {
-      return !search || screen.routing.route.includes(search)
+      return !searchValue || screen.routing.route.includes(searchValue)
     })
   }
 
   const handleScroll = e => {
     scrolling = e.target.scrollTop !== 0
   }
-
-  const startResizing = e => {
-    // Reset the height store to match the true height
-    $screensHeight = `${container.getBoundingClientRect().height}px`
-
-    // Store an offset to easily compute new height when moving the mouse
-    dragOffset = parseInt($screensHeight) - e.clientY
-
-    // Add event listeners
-    resizing = true
-    document.addEventListener("mousemove", resize)
-    document.addEventListener("mouseup", stopResizing)
-  }
-
-  const resize = e => {
-    // Prevent negative heights as this screws with layout
-    const newHeight = Math.max(0, e.clientY + dragOffset)
-    if (newHeight == null || isNaN(newHeight)) {
-      return
-    }
-    $screensHeight = `${newHeight}px`
-  }
-
-  const stopResizing = () => {
-    resizing = false
-    document.removeEventListener("mousemove", resize)
-  }
-
-  onMount(() => {
-    // Ensure we aren't stuck at 100% height from leaving while searching
-    if ($screensHeight == null || isNaN(parseInt($screensHeight))) {
-      $screensHeight = "210px"
-    }
-  })
 </script>
 
-<svelte:window />
+<div class="screens" class:searching use:resizable>
-<div
-  class="screens"
-  class:search
-  class:resizing
-  style={`height:${$screensHeight};`}
-  bind:this={container}
->
   <div class="header" class:scrolling>
     <NavHeader
       title="Screens"
       placeholder="Search for screens"
       bind:value={searchValue}
-      bind:search
+      bind:search={searching}
       onAdd={() => $goto("../new")}
     />
   </div>
@@ -110,6 +52,7 @@
     {#if filteredScreens?.length}
       {#each filteredScreens as screen (screen._id)}
         <NavItem
+          scrollable
           icon={screen.routing.homeScreen ? "Home" : null}
           indentLevel={0}
           selected={$store.selectedScreenId === screen._id}
@@ -135,9 +78,11 @@
   </div>
 
   <div
+    role="separator"
+    disabled={searching}
     class="divider"
-    on:mousedown={startResizing}
+    class:disabled={searching}
-    on:dblclick={() => screensHeight.set("210px")}
+    use:resizableHandle
   />
 </div>
 
@@ -148,14 +93,12 @@
     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.search {
+  .screens.searching {
-    max-height: none;
+    max-height: 100%;
-  }
+    height: 100% !important;
-  .screens.resizing {
-    user-select: none;
-    cursor: row-resize;
   }
 
   .header {
@@ -177,9 +120,6 @@
     overflow: auto;
     flex-grow: 1;
   }
-  .screens.resizing .content {
-    pointer-events: none;
-  }
 
   .screens :global(.nav-item) {
     padding-right: 8px !important;
@@ -217,4 +157,10 @@
   .divider:hover:after {
     background: var(--spectrum-global-color-gray-300);
   }
+  .divider.disabled {
+    cursor: auto;
+  }
+  .divider.disabled:after {
+    background: var(--spectrum-global-color-gray-200);
+  }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte

@@ -40,6 +40,7 @@
   }
 
   .content {
+    width: 100vw;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;