events as popover, in settings panel

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

@@ -4,24 +4,25 @@
   import HandlerSelector from "./HandlerSelector.svelte"
   import { CloseIcon } from "components/common/Icons/"
   import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
+  import { createEventDispatcher } from "svelte"
 
   export let event = []
   export let eventType
-  export let onClose
-  export let onChange
 
+  const dispatch = createEventDispatcher()
   let draftEventHandler = { parameters: [] }
 
-  $: handlers = event || []
+  $: handlers = (event && [...event]) || []
 
   const closeModal = () => {
-    onClose()
+    dispatch("close")
     draftEventHandler = { parameters: [] }
     handlers = []
   }
 
   const updateEventHandler = (updatedHandler, index) => {
     handlers[index] = updatedHandler
+    dispatch("change", handlers)
   }
 
   const updateDraftEventHandler = updatedHandler => {
@@ -30,6 +31,7 @@
 
   const deleteEventHandler = index => {
     handlers.splice(index, 1)
+    dispatch("change", handlers)
   }
 
   const createNewEventHandler = handler => {
@@ -38,18 +40,7 @@
       [EVENT_TYPE_MEMBER_NAME]: "",
     }
     handlers.push(newHandler)
-    handlers = handlers
-  }
-
-  const deleteEvent = () => {
-    handlers = []
-    onChange([])
-    closeModal()
-  }
-
-  const saveEventData = () => {
-    onChange(handlers)
-    closeModal()
+    dispatch("change", handlers)
   }
 </script>
 
@@ -79,18 +70,7 @@
     {/each}
 
   </div>
-  <div class="footer">
-
-    <Button outline on:click={deleteEvent} disabled={handlers.length === 0}>
-      Delete
-    </Button>
 
-    <div class="save">
-      <Button primary on:click={saveEventData} disabled={handlers.length === 0}>
-        Save
-      </Button>
-    </div>
-  </div>
   <div class="close-button" on:click={closeModal}>
     <CloseIcon />
   </div>
@@ -99,6 +79,7 @@
 <style>
   .container {
     position: relative;
+    width: 600px;
   }
   .heading {
     margin-bottom: 20px;

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

@@ -1,38 +1,25 @@
 <script>
-  import { Button } from "@budibase/bbui"
+  import { Button, DropdownMenu } from "@budibase/bbui"
   import EventEditorModal from "./EventEditorModal.svelte"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { getContext } from "svelte"
 
   export let value
   export let name
 
-  const dispatch = createEventDispatcher()
-
-  // Handle create app modal
-  const { open, close } = getContext("simple-modal")
-
-  const openModal = () => {
-    open(
-      EventEditorModal,
-      {
-        event: value,
-        eventType: name,
-        onChange: val => dispatch("change", val),
-        onClose: () => {
-          close()
-        },
-      },
-      {
-        closeButton: false,
-        closeOnEsc: false,
-        styleContent: { padding: 0 },
-        closeOnOuterClick: true,
-      }
-    )
-  }
+  let button
+  let dropdown
 </script>
 
-<Button secondary small on:click={openModal}>Define Actions</Button>
+<div bind:this={button}>
+  <Button secondary small on:click={dropdown.show}>Define Actions</Button>
+</div>
+<DropdownMenu bind:this={dropdown} align="right" anchor={button}>
+  <EventEditorModal
+    event={value}
+    eventType={name}
+    on:change
+    on:close={dropdown.hide} />
+</DropdownMenu>
 
 <style>
 

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

@@ -1,8 +1,5 @@
 <script>
-  import { Button } from "@budibase/bbui"
-  import IconButton from "components/common/IconButton.svelte"
-  import PlusButton from "components/common/PlusButton.svelte"
-  import Select from "components/common/Select.svelte"
+  import { Button, Select } from "@budibase/bbui"
   import StateBindingCascader from "./StateBindingCascader.svelte"
   import { find, map, keys, reduce, keyBy } from "lodash/fp"
   import { pipe } from "components/common/core"
@@ -96,7 +93,7 @@
         {#if newHandler}
           <Button primary thin on:click={onCreate}>Add Action</Button>
         {:else}
-          <Button outline thin on:click={onRemoved}>Remove Action</Button>
+          <Button secondary thin on:click={onRemoved}>Remove Action</Button>
         {/if}
       </div>
     {/if}