Merge pull request #322 from Budibase/feature/fix-events-modal

Feature/fix events modal

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

@@ -22,7 +22,6 @@
     font-size: 14px;
     position: relative;
     border: var(--grey-dark) 1px solid;
-    max-width: 256px;
   }
 
   .adjusted {

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

@@ -1,5 +1,6 @@
 <script>
   import { store } from "builderStore"
+  import { Button } from "@budibase/bbui"
   import Modal from "../../common/Modal.svelte"
   import HandlerSelector from "./HandlerSelector.svelte"
   import IconButton from "../../common/IconButton.svelte"
@@ -8,12 +9,12 @@
   import Select from "../../common/Select.svelte"
   import Input from "../../common/Input.svelte"
   import getIcon from "../../common/icon"
+  import { CloseIcon } from "components/common/Icons/"
 
   import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
 
   export let event
   export let eventOptions = []
-  export let open
   export let onClose
 
   let eventType = ""
@@ -62,20 +63,16 @@
   }
 </script>
 
-<Modal bind:isOpen={open} onClosed={closeModal}>
+<div class="container">
-  <h2>
+  <div class="body">
+    <div class="heading">
+      <h3>
         {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
-  </h2>
+      </h3>
-  <a href="https://docs.budibase.com/" target="_blank">
+    </div>
-    Click here to learn more about component events
-  </a>
-
     <div class="event-options">
-    <div>
+      <div class="section">
-      <header>
+        <h4>Event Type</h4>
-        <h5>Event Type</h5>
-        {@html getIcon('info', 20)}
-      </header>
         <Select bind:value={eventType}>
           {#each eventOptions as option}
             <option value={option.name}>{option.name}</option>
@@ -84,10 +81,8 @@
       </div>
     </div>
 
-  <header>
+    <div class="section">
-    <h5>Event Action(s)</h5>
+      <h4>Event Action(s)</h4>
-    {@html getIcon('info', 20)}
-  </header>
       <HandlerSelector
         newHandler
         onChanged={updateDraftEventHandler}
@@ -96,6 +91,7 @@
           draftEventHandler = { parameters: [] }
         }}
         handler={draftEventHandler} />
+    </div>
     {#if eventData}
       {#each eventData.handlers as handler, index}
         <HandlerSelector
@@ -106,61 +102,72 @@
       {/each}
     {/if}
 
-  <div class="actions">
-    <ActionButton
-      alert
-      disabled={eventData.handlers.length === 0}
-      hidden={!eventData.name}
-      on:click={deleteEvent}>
-      Delete
-    </ActionButton>
-    <ActionButton
-      disabled={eventData.handlers.length === 0}
-      on:click={saveEventData}>
-      Save
-    </ActionButton>
   </div>
-</Modal>
+  <div class="footer">
+    {#if eventData.name}
+      <Button
+        outline
+        on:click={deleteEvent}
+        disabled={eventData.handlers.length === 0}>
+        Delete
+      </Button>
+    {/if}
+    <div class="save">
+      <Button
+        primary
+        on:click={saveEventData}
+        disabled={eventData.handlers.length === 0}>
+        Save
+      </Button>
+    </div>
+  </div>
+  <div class="close-button" on:click={closeModal}>
+    <CloseIcon />
+  </div>
+</div>
 
 <style>
-  h2 {
+  .container {
-    color: var(--primary100);
+    position: relative;
-    font-size: 20px;
+  }
-    font-weight: bold;
+  .heading {
-    margin-bottom: 0;
+    margin-bottom: 20px;
   }
 
-  h5 {
+  .close-button {
-    color: rgba(22, 48, 87, 0.6);
+    cursor: pointer;
-    font-size: 15px;
+    position: absolute;
-    margin: 0;
+    top: 20px;
+    right: 20px;
+  }
+  .close-button :global(svg) {
+    width: 24px;
+    height: 24px;
   }
 
-  .event-options {
+  h4 {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 10px;
-  }
-
-  .actions,
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .actions {
-    margin-top: auto;
-  }
-
-  header {
-    margin-top: 30px;
     margin-bottom: 10px;
   }
 
-  a {
+  h3 {
-    color: rgba(22, 48, 87, 0.6);
+    margin: 0;
-    font-size: 13px;
+    font-size: 24px;
-    margin-top: 0;
+    font-weight: bold;
+  }
+  .body {
+    padding: 40px;
+    display: grid;
+    grid-gap: 20px;
+  }
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 30px 40px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 50px;
+    background-color: var(--grey-light);
+  }
+  .save {
+    margin-left: 20px;
   }
 </style>

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

@@ -1,4 +1,5 @@
 <script>
+  import { getContext } from "svelte"
   import {
     keys,
     map,
@@ -17,7 +18,6 @@
   import PlusButton from "components/common/PlusButton.svelte"
   import IconButton from "components/common/IconButton.svelte"
   import EventEditorModal from "./EventEditorModal.svelte"
-  import HandlerSelector from "./HandlerSelector.svelte"
 
   import { PencilIcon } from "components/common/Icons"
   import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@@ -26,7 +26,6 @@
 
   export let component
 
-  let modalOpen = false
   let events = []
   let selectedEvent = null
 
@@ -40,14 +39,28 @@
       }))
   }
 
+  // Handle create app modal
+  const { open, close } = getContext("simple-modal")
+
   const openModal = event => {
     selectedEvent = event
-    modalOpen = true
+    open(
-  }
+      EventEditorModal,
-
+      {
-  const closeModal = () => {
+        eventOptions: events,
+        event: selectedEvent,
+        onClose: () => {
+          close()
           selectedEvent = null
-    modalOpen = false
+        },
+      },
+      {
+        closeButton: false,
+        closeOnEsc: false,
+        styleContent: { padding: 0 },
+        closeOnOuterClick: true,
+      }
+    )
   }
 </script>
 
@@ -71,11 +84,6 @@
     {/each}
   </form>
 </div>
-<EventEditorModal
-  open={modalOpen}
-  onClose={closeModal}
-  eventOptions={events}
-  event={selectedEvent} />
 
 <style>
   h3 {

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

@@ -1,4 +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"
@@ -85,27 +86,28 @@
       </Select>
     </div>
     {#if parameters}
+      <br />
       {#each parameters as parameter, idx}
-        <StateBindingCascader onChange={onParameterChanged(idx)} {parameter} />
+        <StateBindingCascader on:change={onParameterChanged(idx)} {parameter} />
       {/each}
     {/if}
-  </div>
-  <div class="event-action-button">
     {#if parameters.length > 0}
+      <div class="button-container">
         {#if newHandler}
-        <PlusButton on:click={onCreate} />
+          <Button primary thin on:click={onCreate}>Add Action</Button>
         {:else}
-        <IconButton icon="x" on:click={onRemoved} />
+          <Button outline thin on:click={onRemoved}>Remove Action</Button>
         {/if}
+      </div>
     {/if}
   </div>
 </div>
 
 <style>
   .type-selector-container {
-    display: flex;
+    display: grid;
-    justify-content: space-between;
+    grid-gap: 20px;
-    align-items: center;
+    width: 100%;
     background: rgba(223, 223, 223, 0.5);
     border: 1px solid #dfdfdf;
     margin-bottom: 18px;
@@ -122,17 +124,19 @@
 
   .handler-controls {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 1fr;
-    grid-gap: 10px;
+    grid-gap: 20px;
     padding: 22px;
   }
 
-  .event-action-button {
+  .button-container {
-    margin-right: 20px;
+    display: grid;
+    justify-items: end;
   }
 
   span {
-    font-size: 13px;
+    font-size: 18px;
-    margin-bottom: 5px;
+    margin-bottom: 10px;
+    font-weight: 500;
   }
 </style>

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

@@ -1,8 +1,8 @@
 <script>
+  import { Input } 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 Input from "components/common/Input.svelte"
   import { find, map, keys, reduce, keyBy } from "lodash/fp"
   import { pipe } from "components/common/core"
   import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@@ -10,64 +10,43 @@
   import { ArrowDownIcon } from "components/common/Icons/"
 
   export let parameter
-  export let onChange
 
   let isOpen = false
+
+  const capitalize = s => {
+    if (typeof s !== "string") return ""
+    return s.charAt(0).toUpperCase() + s.slice(1)
+  }
 </script>
 
 <div class="handler-option">
-  <span>{parameter.name}</span>
-  <div class="handler-input">
   {#if parameter.name === 'workflow'}
-      <select
+    <span>{parameter.name}</span>
-        class="budibase__input"
+  {/if}
-        on:change={onChange}
+  {#if parameter.name === 'workflow'}
-        bind:value={parameter.value}>
+    <Select on:change bind:value={parameter.value}>
       {#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
         <option value={workflow._id}>{workflow.name}</option>
       {/each}
-      </select>
+    </Select>
   {:else}
-      <Input {onChange} value={parameter.value} />
+    <Input
-      <button on:click={() => (isOpen = !isOpen)}>
+      name={parameter.name}
-        <div class="icon" style={`transform: rotate(${isOpen ? 0 : 90}deg);`}>
+      label={capitalize(parameter.name)}
-          <ArrowDownIcon size={36} />
+      on:change
-        </div>
+      value={parameter.value} />
-      </button>
   {/if}
-  </div>
 </div>
 
 <style>
-  button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    background: rgba(249, 249, 249, 1);
-
-    font-size: 1.6rem;
-    font-weight: 700;
-    color: rgba(22, 48, 87, 1);
-    margin-left: 5px;
-  }
-
-  .icon {
-    width: 24px;
-  }
-
   .handler-option {
     display: flex;
     flex-direction: column;
   }
 
-  .handler-input {
-    position: relative;
-    display: flex;
-  }
-
   span {
-    font-size: 13px;
+    font-size: 18px;
-    margin-bottom: 5px;
+    margin-bottom: 10px;
+    font-weight: 500;
   }
 </style>