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

Feature/fix events modal
2020-06-04 09:33:41 +02:00 · 2020-06-04 09:33:41 +02:00 · 049aed676d
parent 480046f8e2 c2f1c792fe
commit 049aed676d
5 changed files with 162 additions and 165 deletions
--- a/packages/builder/src/components/common/Select.svelte
+++ b/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 {
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/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}>
-  <h2>
+<div class="container">
+  <div class="body">
+    <div class="heading">
+      <h3>
        {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
-  </h2>
-  <a href="https://docs.budibase.com/" target="_blank">
-    Click here to learn more about component events
-  </a>
-
+      </h3>
+    </div>
    <div class="event-options">
-    <div>
-      <header>
-        <h5>Event Type</h5>
-        {@html getIcon('info', 20)}
-      </header>
+      <div class="section">
+        <h4>Event Type</h4>
        <Select bind:value={eventType}>
          {#each eventOptions as option}
            <option value={option.name}>{option.name}</option>
@ -84,10 +81,8 @@
      </div>
    </div>

-  <header>
-    <h5>Event Action(s)</h5>
-    {@html getIcon('info', 20)}
-  </header>
+    <div class="section">
+      <h4>Event Action(s)</h4>
      <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 {
-    color: var(--primary100);
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 0;
+  .container {
+    position: relative;
+  }
+  .heading {
+    margin-bottom: 20px;
  }

-  h5 {
-    color: rgba(22, 48, 87, 0.6);
-    font-size: 15px;
-    margin: 0;
+  .close-button {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
+  .close-button :global(svg) {
+    width: 24px;
+    height: 24px;
  }

-  .event-options {
-    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;
+  h4 {
    margin-bottom: 10px;
  }

-  a {
-    color: rgba(22, 48, 87, 0.6);
-    font-size: 13px;
-    margin-top: 0;
+  h3 {
+    margin: 0;
+    font-size: 24px;
+    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>
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/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
-  }
-
-  const closeModal = () => {
+    open(
+      EventEditorModal,
+      {
+        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 {
--- a/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/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;
-    justify-content: space-between;
-    align-items: center;
+    display: grid;
+    grid-gap: 20px;
+    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-gap: 10px;
+    grid-template-columns: 1fr;
+    grid-gap: 20px;
    padding: 22px;
  }

-  .event-action-button {
-    margin-right: 20px;
+  .button-container {
+    display: grid;
+    justify-items: end;
  }

  span {
-    font-size: 13px;
-    margin-bottom: 5px;
+    font-size: 18px;
+    margin-bottom: 10px;
+    font-weight: 500;
  }
 </style>
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/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
-        class="budibase__input"
-        on:change={onChange}
-        bind:value={parameter.value}>
+    <span>{parameter.name}</span>
+  {/if}
+  {#if parameter.name === 'workflow'}
+    <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} />
-      <button on:click={() => (isOpen = !isOpen)}>
-        <div class="icon" style={`transform: rotate(${isOpen ? 0 : 90}deg);`}>
-          <ArrowDownIcon size={36} />
-        </div>
-      </button>
+    <Input
+      name={parameter.name}
+      label={capitalize(parameter.name)}
+      on:change
+      value={parameter.value} />
  {/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;
-    margin-bottom: 5px;
+    font-size: 18px;
+    margin-bottom: 10px;
+    font-weight: 500;
  }
 </style>