rewords FilterPanel to use new DrawerContent component

5 years ago · 7df0555721
4 changed files with 45 additions and 43 deletions
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@ -10,7 +10,7 @@
      </div>
    {/if}
    <div class="main">
-      <slot name="main" />
+      <slot />
    </div>
  </div>
 </div>
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@ -107,7 +107,7 @@
    </section>
  </Layout>
  </svelte:fragment>
-  <div class="main" slot="main">
+  <div class="main">
    <TextArea
      bind:getCaretPosition
      bind:value
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@ -127,19 +127,19 @@
      </div>
    {/if}
  </div>
-</DrawerContent>
-<div class="actions-container">
-  <div class="action-config">
-    {#if selectedAction}
-      <div class="selected-action-container">
-        <svelte:component
-          this={selectedActionComponent}
-          parameters={selectedAction.parameters}
-        />
-      </div>
-    {/if}
+  <div class="actions-container">
+    <div class="action-config">
+      {#if selectedAction}
+        <div class="selected-action-container">
+          <svelte:component
+            this={selectedActionComponent}
+            parameters={selectedAction.parameters}
+          />
+        </div>
+      {/if}
+    </div>
  </div>
-</div>
+</DrawerContent>

 <style>
  .action-header {
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
@ -1,5 +1,12 @@
 <script>
-  import { Button, Drawer, Spacer, Body } from "@budibase/bbui"
+  import {
+    Button,
+    Drawer,
+    Spacer,
+    Body,
+    DrawerContent,
+    Layout,
+  } from "@budibase/bbui"
  import { createEventDispatcher } from "svelte"
  import { notifications } from "@budibase/bbui"
  import {
@ -18,7 +25,7 @@

  $: schemaFields = getSchemaFields(componentInstance)

-  const getSchemaFields = component => {
+  const getSchemaFields = (component) => {
    const datasource = getDatasourceForProvider($currentAsset, component)
    const { schema } = getSchemaForDatasource(datasource)
    return Object.values(schema || {})
@ -30,42 +37,37 @@
    drawer.hide()
  }

-  const onFieldsChanged = event => {
+  const onFieldsChanged = (event) => {
    tempValue = event.detail
  }
 </script>

 <Button secondary wide on:click={drawer.show}>Define Filters</Button>
-<Drawer bind:this={drawer} title='Filtering'>
+<Drawer bind:this={drawer} title="Filtering">
  <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
-  <div class="root" slot="body">
-    <Body s>
-      {#if !Object.keys(tempValue || {}).length}
-        Add your first filter column.
-      {:else}
-        Results are filtered to only those which match all of the following
-        constaints.
-      {/if}
-    </Body>
-    <Spacer medium />
-    <div class="fields">
-      <SaveFields
-        parameterFields={value}
-        {schemaFields}
-        valueLabel="Equals"
-        on:change={onFieldsChanged} />
-    </div>
-  </div>
+  <DrawerContent slot="body">
+    <Layout>
+      <Body s>
+        {#if !Object.keys(tempValue || {}).length}
+          Add your first filter column.
+        {:else}
+          Results are filtered to only those which match all of the following
+          constaints.
+        {/if}
+      </Body>
+      <div class="fields">
+        <SaveFields
+          parameterFields={value}
+          {schemaFields}
+          valueLabel="Equals"
+          on:change={onFieldsChanged}
+        />
+      </div>
+    </Layout>
+  </DrawerContent>
 </Drawer>

 <style>
-  .root {
-    padding: var(--spacing-l);
-    min-height: calc(40vh - 2 * var(--spacing-l));
-    max-width: 800px;
-    margin: 0 auto;
-  }
-
  .fields {
    display: grid;
    column-gap: var(--spacing-l);