update FilterEditor and SaveFields drawers

6 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">
+    <ActionButton
-      <Button
+      quiet
-        icon="Close"
+      icon="Delete"
-        size="S"
+      on:click={() => removeField(field[0])} />
        quiet
        on:click={() => removeField(field[0])} />
    </div>
  {/each}
  <div>
    <Spacer small />
@ -84,10 +81,4 @@
      {fieldLabel}
    </Button>
  </div>
-{/if}
+{/if}
 <style>
  .remove-field-container :global(button) {
    vertical-align: bottom;
  }
 </style>
--- 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'}>
+<Drawer bind:this={drawer} title='Filtering'>
-  <heading slot="buttons">
+  <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
-    <Button thin blue on:click={saveFilter}>Save</Button>
+  <div class="root" slot="body">
-  </heading>
+    <Body s>
-  <div slot="body">
+      {#if !Object.keys(tempValue || {}).length}
-    <div class="root">
+        Add your first filter column.
-      <Body small grey>
+      {:else}
-        {#if !Object.keys(tempValue || {}).length}
+        Results are filtered to only those which match all of the following
-          Add your first filter column.
+        constaints.
-        {:else}
+      {/if}
-          Results are filtered to only those which match all of the following
+    </Body>
-          constaints.
+    <Spacer medium />
-        {/if}
+    <div class="fields">
-      </Body>
+      <SaveFields
-      <Spacer medium />
+        parameterFields={value}
-      <div class="fields">
+        {schemaFields}
-        <SaveFields
+        valueLabel="Equals"
-          parameterFields={value}
+        on:change={onFieldsChanged} />
          {schemaFields}
          valueLabel="Equals"
          on:change={onFieldsChanged} />
      </div>
    </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>