update FilterEditor and SaveFields drawers

5 years ago · 2edc795185
2 changed files with 25 additions and 38 deletions
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Label, Button, Spacer, Select, Input } from "@budibase/bbui"
+  import { Label, ActionButton, Button, Spacer, Select, Input } from "@budibase/bbui"
  import { store, currentAsset } from "builderStore"
  import { getBindableProperties } from "builderStore/dataBinding"
  import { createEventDispatcher } from "svelte"
@ -69,13 +69,10 @@
      value={field[1]}
      bindings={bindableProperties}
      on:change={event => updateFieldValue(idx, event.detail)} />
-    <div class="remove-field-container">
-      <Button
-        icon="Close"
-        size="S"
-        quiet
-        on:click={() => removeField(field[0])} />
-    </div>
+    <ActionButton
+      quiet
+      icon="Delete"
+      on:click={() => removeField(field[0])} />
  {/each}
  <div>
    <Spacer small />
@ -84,10 +81,4 @@
      {fieldLabel}
    </Button>
  </div>
-{/if}
-
-<style>
-  .remove-field-container :global(button) {
-    vertical-align: bottom;
-  }
-</style>
+{/if}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
@ -36,28 +36,24 @@
 </script>

 <Button secondary wide on:click={drawer.show}>Define Filters</Button>
-<Drawer bind:this={drawer} title={'Filtering'}>
-  <heading slot="buttons">
-    <Button thin blue on:click={saveFilter}>Save</Button>
-  </heading>
-  <div slot="body">
-    <div class="root">
-      <Body small grey>
-        {#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>
+<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>
 </Drawer>
@ -74,7 +70,7 @@
    display: grid;
    column-gap: var(--spacing-l);
    row-gap: var(--spacing-s);
+    align-items: center;
    grid-template-columns: auto 1fr auto 1fr auto;
-    align-items: baseline;
  }
 </style>