changes earlier BottomDrawer to use the bbui component instead

packages/builder/src/builderStore/store/frontend.js

@@ -41,8 +41,7 @@ const INITIAL_FRONTEND_STATE = {
   hasAppPackage: false,
   libraries: null,
   appId: "",
-  routes: {},
+  routes: {}
-  bottomDrawerVisible: false,
 }
 
 export const getFrontendStore = () => {

packages/builder/src/components/common/BottomDrawer.svelte

@@ -1,52 +0,0 @@
-<script>
-  import { slide } from "svelte/transition"
-  import Portal from "svelte-portal"
-
-  export let title
-  export let onClose = () => {}
-</script>
-
-<Portal>
-  <section class="drawer" transition:slide>
-    <header>
-      {title}
-      <div class="controls">
-        <slot name="buttons" />
-        <i class="ri-close-fill close" on:click={onClose} />
-      </div>
-    </header>
-    <slot name="body" />
-  </section>
-</Portal>
-
-<style>
-  .drawer {
-    height: 50vh;
-    position: absolute;
-    bottom: 0;
-    width: 100vw;
-    background: var(--background);
-    border-top: var(--border-light);
-    z-index: 2;
-  }
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: var(--border-light);
-    padding: var(--spacing-m);
-  }
-
-  .controls {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: var(--spacing-m);
-    align-items: center;
-  }
-
-  .close {
-    font-size: var(--font-size-xl);
-    cursor: pointer;
-  }
-</style>

packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte

@@ -1,10 +1,8 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { Button, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import EventEditor from "./EventEditor.svelte"
-  import BottomDrawer from "components/common/BottomDrawer.svelte"
   import { automationStore } from "builderStore"
 
   const dispatch = createEventDispatcher()
@@ -12,11 +10,7 @@
   export let value
   export let name
 
-  let drawerVisible
+  let drawer
-
-  function showDrawer() {
-    drawerVisible = true
-  }
 
   const saveEventData = async () => {
     // any automations that need created from event triggers
@@ -27,6 +21,7 @@
 
     dispatch("change", value)
     notifier.success("Component actions saved.")
+    drawer.hide()
   }
 
   // called by the parent modal when actions are saved
@@ -62,15 +57,12 @@
   }
 </script>
 
-<Button secondary small on:click={showDrawer}>Define Actions</Button>
+<Button secondary small on:click={drawer.show}>Define Actions</Button>
-
+<Drawer bind:this={drawer} title={'Actions'}>
-{#if drawerVisible}
+  <heading slot="buttons">
-  <BottomDrawer title={'Actions'} onClose={() => (drawerVisible = false)}>
+    <Button thin blue on:click={saveEventData}>Save</Button>
-    <heading slot="buttons">
+  </heading>
-      <Button thin blue on:click={saveEventData}>Save</Button>
+  <div slot="body">
-    </heading>
+    <EventEditor event={value} eventType={name} />
-    <div slot="body">
+  </div>
-      <EventEditor event={value} eventType={name} />
+</Drawer>
-    </div>
-  </BottomDrawer>
-{/if}

packages/builder/src/components/userInterface/TableViewSelect.svelte

@@ -1,16 +1,15 @@
 <script>
-  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
+  import { Button, Icon, DropdownMenu, Spacer, Heading, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import BottomDrawer from "components/common/BottomDrawer.svelte"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
 
   const dispatch = createEventDispatcher()
   let anchorRight, dropdownRight
-  let bindingDrawerOpen
+  let drawer
 
   export let value = {}
 
@@ -73,14 +72,6 @@
     dropdownRight.hide()
   }
 
-  function openBindingDrawer() {
-    bindingDrawerOpen = true
-  }
-
-  function closeDatabindingDrawer() {
-    bindingDrawerOpen = false
-  }
-
   function fetchDatasourceSchema(query) {
     const source = $backendUiStore.datasources.find(
       ds => ds._id === query.datasourceId
@@ -99,9 +90,8 @@
   <Icon name="arrowdown" />
 </div>
 {#if value.type === 'query'}
-  <i class="ri-settings-5-line" on:click={openBindingDrawer} />
+  <i class="ri-settings-5-line" on:click={drawer.show} />
-  {#if bindingDrawerOpen}
+    <Drawer title={'Query'}>
-    <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
       <div slot="buttons">
         <Button
           blue
@@ -109,6 +99,7 @@
           on:click={() => {
             notifier.success('Query parameters saved.')
             handleSelected(value)
+            drawer.hide()
           }}>
           Save
         </Button>
@@ -126,9 +117,8 @@
             bindings={queryBindableProperties} />
         {/if}
       </div>
-    </BottomDrawer>
+    </Drawer>
   {/if}
-{/if}
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
     <div class="title">