Create DrawerContent component

2021-04-27 17:43:56 +02:00 · 2021-04-27 17:43:56 +02:00 · a1cad7ab0d
parent 3ebfa3615b
commit a1cad7ab0d
6 changed files with 81 additions and 72 deletions
--- a/packages/bbui/src/Drawer/DrawerContentWithSidebar.svelte
+++ b/packages/bbui/src/Drawer/DrawerContentWithSidebar.svelte
@ -0,0 +1,42 @@
+<div class="drawer-contents">
+  <div class="container" data-cy="binding-dropdown-modal">
+    <div class="sidebar">
+      <slot name="sidebar" />
+    </div>
+    <div class="main">
+      <slot name="main" />
+    </div>
+  </div>
+</div>
+
+<style>
+  .drawer-contents {
+    height: 40vh;
+    overflow-y: auto;
+  }
+  .container {
+    height: 100%;
+    display: grid;
+    grid-template-columns: 290px 1fr;
+  }
+  .sidebar {
+    border-right: var(--border-light);
+    padding: var(--spacing-l);
+    overflow: auto;
+  }
+
+  .sidebar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .main {
+    padding: var(--spacing-l);
+    font-family: var(--font-sans);
+  }
+  .main :global(textarea) {
+    min-height: 200px;
+  }
+  .main :global(p) {
+    margin: 0;
+  }
+</style>
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@ -10,6 +10,7 @@ export { default as Select } from "./Form/Select.svelte"
 export { default as Combobox } from "./Form/Combobox.svelte"
 export { default as Dropzone } from "./Form/Dropzone.svelte"
 export { default as Drawer } from "./Drawer/Drawer.svelte"
+export { default as DrawerContentWithSidebar } from "./Drawer/DrawerContentWithSidebar.svelte"
 export { default as Avatar } from "./Avatar/Avatar.svelte"
 export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
 export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
--- a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@ -47,8 +47,4 @@
    justify-content: flex-end;
    align-items: center;
  }
-
-  div.icon i {
-    font-size: 16px;
-  }
 </style>
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@ -11,19 +11,21 @@

 <form>
  {#each Object.keys(schema) as configKey}
-    {#if schema[configKey].type === 'object'}
+    {#if schema[configKey].type === "object"}
      <Label>{capitalise(configKey)}</Label>
      <Spacer small />
      <KeyValueBuilder
        defaults={schema[configKey].default}
-        bind:object={integration[configKey]} />
+        bind:object={integration[configKey]}
+      />
    {:else}
      <div class="form-row">
        <Label>{capitalise(configKey)}</Label>
        <Input
          type={schema[configKey].type}
          on:change
-          bind:value={integration[configKey]} />
+          bind:value={integration[configKey]}
+        />
      </div>
    {/if}
  {/each}
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@ -1,6 +1,6 @@
 <script>
  import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+  import { Search, TextArea, Heading, Spacer, Label, Layout, DrawerContentWithSidebar } from "@budibase/bbui"
  import { createEventDispatcher } from "svelte"
  import { isValid } from "@budibase/string-templates"
  import {
@ -57,16 +57,15 @@
  }
 </script>

-<div class="drawer-contents">
-  <div class="container" data-cy="binding-dropdown-modal">
-    <div class="list">
-      <Search placeholder="Search" bind:value={search} />
-      <Spacer medium />
+<DrawerContentWithSidebar>
+  <Search placeholder="Search" bind:value={search} />
+      <svelte:fragment slot="sidebar">
+        <Spacer medium />
      {#if context}
        <Heading xs h3>Columns</Heading>
        <Spacer small />
        <ul>
-          {#each context.filter(context =>
+          {#each context.filter((context) =>
            context.readableBinding.match(searchRgx)
          ) as { readableBinding }}
            <li on:click={() => addToText(readableBinding)}>
@ -80,7 +79,7 @@
        <Heading xs h3>Components</Heading>
        <Spacer small />
        <ul>
-          {#each instance.filter(instance =>
+          {#each instance.filter((instance) =>
            instance.readableBinding.match(searchRgx)
          ) as { readableBinding }}
            <li on:click={() => addToText(readableBinding)}>
@ -93,7 +92,7 @@
      <Heading xs h3>Helpers</Heading>
      <Spacer small />
      <ul>
-        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+        {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
          <li on:click={() => addToText(helper.text)}>
            <div>
              <Label extraSmall>{helper.displayText}</Label>
@ -105,49 +104,24 @@
          </li>
        {/each}
      </ul>
-    </div>
-    <div class="text">
-      <TextArea
-        bind:getCaretPosition
-        bind:value
-        placeholder="Add text, or click the objects on the left to add them to the textbox." />
-      {#if !valid}
-        <p class="syntax-error">
-          Current Handlebars syntax is invalid, please check the guide
-          <a href="https://handlebarsjs.com/guide/">here</a>
-          for more details.
-        </p>
-      {/if}
-    </div>
-  </div>
-</div>
+      </svelte:fragment>
+      <svelte:fragment slot="main">
+        <TextArea
+          bind:getCaretPosition
+          bind:value
+          placeholder="Add text, or click the objects on the left to add them to the textbox."
+        />
+        {#if !valid}
+          <p class="syntax-error">
+            Current Handlebars syntax is invalid, please check the guide
+            <a href="https://handlebarsjs.com/guide/">here</a>
+            for more details.
+          </p>
+        {/if}
+      </svelte:fragment>
+</DrawerContentWithSidebar>

 <style>
-  .container {
-    height: 100%;
-    display: grid;
-    grid-template-columns: 260px 1fr;
-  }
-  .list {
-    border-right: var(--border-light);
-    padding: var(--spacing-l);
-    overflow: auto;
-  }
-
-  .list::-webkit-scrollbar {
-    display: none;
-  }
-
-  .text {
-    padding: var(--spacing-l);
-    font-family: var(--font-sans);
-  }
-  .text :global(textarea) {
-    min-height: 200px;
-  }
-  .text :global(p) {
-    margin: 0;
-  }
  ul {
    list-style: none;
    padding-left: 0;
@ -182,11 +156,6 @@
    color: var(--blue);
  }

-  .drawer-contents {
-    height: 40vh;
-    overflow-y: auto;
-  }
-
  .syntax-error {
    padding-top: var(--spacing-m);
    color: var(--red);
--- a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -9,7 +9,9 @@

  let unsaved = false

-  $: datasource = $datasources.list.find(ds => ds._id === $datasources.selected)
+  $: datasource = $datasources.list.find(
+    (ds) => ds._id === $datasources.selected
+  )
  $: integration = datasource && $integrations[datasource.source]

  async function saveDatasource() {
@ -46,7 +48,8 @@
      <svelte:component
        this={ICONS[datasource.source]}
        height="26"
-        width="26" />
+        width="26"
+      />
      <Heading m>{datasource.name}</Heading>
    </header>
    <Body small grey lh>{integration.description}</Body>
@ -63,17 +66,18 @@
      <IntegrationConfigForm
        schema={integration.datasource}
        integration={datasource.config}
-        on:change={setUnsaved} />
+        on:change={setUnsaved}
+      />
      <Spacer extraLarge />
      <Divider />
      <Spacer extraLarge />
      <div class="query-header">
        <Heading s>Queries</Heading>
-        <Button secondary on:click={() => $goto('./new')}>Add Query</Button>
+        <Button secondary on:click={() => $goto("./new")}>Add Query</Button>
      </div>
      <Spacer extraLarge />
      <div class="query-list">
-        {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
+        {#each $queries.list.filter((query) => query.datasourceId === datasource._id) as query}
          <div class="query-list-item" on:click={() => onClickQuery(query)}>
            <p class="query-name">{query.name}</p>
            <p>{capitalise(query.queryVerb)}</p>
@ -86,11 +90,6 @@
 {/if}

 <style>
-  h3 {
-    margin: 0;
-    font-size: 24px;
-  }
-
  section {
    margin: 0 auto;
    width: 640px;