diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte index 8976bfb81e..00891c6bdc 100644 --- a/packages/bbui/src/Drawer/Drawer.svelte +++ b/packages/bbui/src/Drawer/Drawer.svelte @@ -9,7 +9,7 @@ export let title export let fillWidth export let left = "314px" - export let width = "calc(100% - 626px)" + export let width = "calc(100% - 648px)" export let headless = false const dispatch = createEventDispatcher() @@ -68,10 +68,7 @@ {#if !headless}
- {title} - - - + {title}
@@ -85,10 +82,6 @@ {/if} diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte similarity index 66% rename from packages/builder/src/components/common/bindings/BindingPicker.svelte rename to packages/builder/src/components/common/bindings/BindingSidePanel.svelte index d1baa03999..b74f3c6fcd 100644 --- a/packages/builder/src/components/common/bindings/BindingPicker.svelte +++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte @@ -137,123 +137,129 @@
- - {#if selectedCategory} -
- { - selectedCategory = null - }} - > - Back - -
- {/if} - - {#if !selectedCategory} -
- - - - - { - search = null - }} - class:searching={search} - > - - -
- {/if} - - {#if !selectedCategory && !search} - - {/if} + Back + + + {/if} - {#if selectedCategory || search} - {#each filteredCategories as category} - {#if category.bindings?.length} -
-
- {category.name} -
-
    - {#each category.bindings as binding} -
  • showBindingPopover(binding, e.target)} - on:mouseleave={hidePopover} - on:click={() => addBinding(binding)} - > - - {#if binding.display?.name} - {binding.display.name} - {:else if binding.fieldSchema?.name} - {binding.fieldSchema?.name} - {:else} - {binding.readableBinding} - {/if} - - {#if binding.display?.type || binding.fieldSchema?.type} - - - {binding.display?.type || binding.fieldSchema?.type} - + {#if !selectedCategory} +
    + + + + + { + search = null + }} + class:searching={search} + > + + +
    + {/if} + + {#if !selectedCategory && !search} +
      + {#each categoryNames as categoryName} +
    • { + selectedCategory = categoryName + }} + > + + {categoryName} + +
      • + {/each} +
    + {/if} + + {#if selectedCategory || search} + {#each filteredCategories as category} + {#if category.bindings?.length} +
    +
    + {category.name} +
    +
      + {#each category.bindings as binding} +
    • showBindingPopover(binding, e.target)} + on:mouseleave={hidePopover} + on:click={() => addBinding(binding)} + > + + {#if binding.display?.name} + {binding.display.name} + {:else if binding.fieldSchema?.name} + {binding.fieldSchema?.name} + {:else} + {binding.readableBinding} + {/if} - {/if} -
      • - {/each} -
    -
    - {/if} - {/each} + {#if binding.display?.type || binding.fieldSchema?.type} + + + {binding.display?.type || binding.fieldSchema?.type} + + + {/if} +
    • + {/each} +
+
+ {/if} + {/each} - {#if selectedCategory === "Helpers" || search} - {#if filteredHelpers?.length} -
-
Helpers
-
    - {#each filteredHelpers as helper} -
  • showHelperPopover(helper, e.target)} - on:mouseleave={hidePopover} - on:click={() => addHelper(helper, mode.name === "javascript")} - > - {helper.displayText} - - function - -
    • - {/each} -
-
+ {#if selectedCategory === "Helpers" || search} + {#if filteredHelpers?.length} +
+
Helpers
+
    + {#each filteredHelpers as helper} +
  • showHelperPopover(helper, e.target)} + on:mouseleave={hidePopover} + on:click={() => addHelper(helper, mode.name === "javascript")} + > + {helper.displayText} + + function + +
    • + {/each} +
+
+ {/if} {/if} {/if} - {/if} - + +