Replace all usages of simple-modal with new modal

6 years ago · d1512f202b
7 changed files with 97 additions and 173 deletions
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -79,7 +79,6 @@
    "shortid": "^2.2.15",
    "svelte-loading-spinners": "^0.1.1",
    "svelte-portal": "^0.1.0",
-    "svelte-simple-modal": "^0.4.2",
    "yup": "^0.29.2"
  },
  "devDependencies": {
--- a/packages/builder/src/components/common/Modal/Modal.svelte
+++ b/packages/builder/src/components/common/Modal/Modal.svelte
@ -11,11 +11,12 @@
   */
  import { createEventDispatcher, setContext } from "svelte"
  import { fade, fly } from "svelte/transition"
-  import { portal } from "./portal"
+  import Portal from "svelte-portal"
  import { ContextKey } from "./context"
  const dispatch = createEventDispatcher()

-  export let wide
+  export let wide = false
+  export let padded = true

  let visible

@ -39,7 +40,7 @@
 </script>

 {#if visible}
-  <div class="portal-wrapper" use:portal={'#modal-container'}>
+  <Portal target="#modal-container">
    <div
      class="overlay"
      on:click|self={hide}
@ -49,14 +50,14 @@
        on:click|self={hide}
        transition:fly={{ y: 50 }}>
        <div class="content-wrapper" on:click|self={hide}>
-          <div class="content" class:wide>
+          <div class="content" class:wide class:padded>
            <slot />
            <i class="ri-close-line" on:click={hide} />
          </div>
        </div>
      </div>
    </div>
-  </div>
+  </Portal>
 {/if}

 <style>
@ -109,11 +110,13 @@
    margin: 2rem 0;
    border-radius: var(--border-radius-m);
    gap: var(--spacing-xl);
-    padding: var(--spacing-xl);
  }
  .content.wide {
    flex: 0 0 600px;
  }
+  .content.padded {
+    padding: var(--spacing-xl);
+  }

  i {
    position: absolute;
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -11,12 +11,10 @@
  import { Input, TextArea, Button } from "@budibase/bbui"
  import { goto } from "@sveltech/routify"
  import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
-  import { getContext } from "svelte"
  import { fade } from "svelte/transition"
  import { post } from "builderStore/api"
  import analytics from "analytics"

-  const { open, close } = getContext("simple-modal")
  //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
  const createAppStore = writable({ currentStep: 0, values: {} })

@ -169,7 +167,7 @@
      }
      const userResp = await api.post(`/api/users`, user)
      const json = await userResp.json()
-      $goto(`./${appJson._id}`)
+      $goto(`/${appJson._id}`)
    } catch (error) {
      console.error(error)
    }
@ -194,10 +192,6 @@

  let onChange = () => {}

-  function _onCancel() {
-    close()
-  }
-
  async function _onOkay() {
    await createNewApp()
  }
@ -249,9 +243,6 @@
      {/if}
    </div>
  </div>
-  <div class="close-button" on:click={_onCancel}>
-    <CloseIcon />
-  </div>
  <img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
  {#if submitting}
    <div in:fade class="spinner-container">
@ -276,16 +267,6 @@
    align-content: center;
    background: #f5f5f5;
  }
-  .close-button {
-    cursor: pointer;
-    position: absolute;
-    top: 20px;
-    right: 20px;
-  }
-  .close-button :global(svg) {
-    width: 24px;
-    height: 24px;
-  }
  .heading {
    display: flex;
    flex-direction: row;
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@ -1,29 +1,14 @@
 <script>
-  import { getContext } from "svelte"
-  import {
-    keys,
-    map,
-    some,
-    includes,
-    cloneDeep,
-    isEqual,
-    sortBy,
-    filter,
-    difference,
-  } from "lodash/fp"
-  import { pipe } from "components/common/core"
-  import Checkbox from "components/common/Checkbox.svelte"
+  import { keys, map, includes, filter } from "lodash/fp"
  import EventEditorModal from "./EventEditorModal.svelte"
-
-  import { PencilIcon } from "components/common/Icons"
-  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
+  import { Modal } from "components/common/Modal"

  export const EVENT_TYPE = "event"
-
  export let component

  let events = []
  let selectedEvent = null
+  let modal

  $: {
    events = Object.keys(component)
@ -35,28 +20,9 @@
      }))
  }

-  // Handle create app modal
-  const { open, close } = getContext("simple-modal")
-
  const openModal = event => {
    selectedEvent = event
-    open(
-      EventEditorModal,
-      {
-        eventOptions: events,
-        event: selectedEvent,
-        onClose: () => {
-          close()
-          selectedEvent = null
-        },
-      },
-      {
-        closeButton: false,
-        closeOnEsc: false,
-        styleContent: { padding: 0 },
-        closeOnOuterClick: true,
-      }
-    )
+    modal.show()
  }
 </script>

@ -81,6 +47,13 @@
  </form>
 </div>

+<Modal bind:this={modal}>
+  <EventEditorModal
+    eventOptions={events}
+    event={selectedEvent}
+    on:hide={() => (selectedEvent = null)} />
+</Modal>
+
 <style>
  .root {
    font-size: 10pt;
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@ -1,13 +1,9 @@
 <script>
-  import Modal from "svelte-simple-modal"
  import { store, automationStore, backendUiStore } from "builderStore"
  import SettingsLink from "components/settings/Link.svelte"
  import { get } from "builderStore/api"
-
-  import { fade } from "svelte/transition"
-  import { isActive, goto, layout, url } from "@sveltech/routify"
-
-  import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
+  import { isActive, goto, layout } from "@sveltech/routify"
+  import { PreviewIcon } from "components/common/Icons/"

  // Get Package and set store
  export let application
@ -47,50 +43,46 @@
  }
 </script>

-<Modal>
-  <div class="root">
-
-    <div class="top-nav">
-      <div class="topleftnav">
-        <button class="home-logo">
-          <img
-            src="/_builder/assets/bb-logo.svg"
-            alt="budibase icon"
-            on:click={() => $goto(`/`)} />
-        </button>
-
-        <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-        {#each $layout.children as { path, title }}
-          <span
-            class:active={$isActive(path)}
-            class="topnavitem"
-            on:click={topItemNavigate(path)}>
-            {title}
-          </span>
-        {/each}
-      </div>
-      <div class="toprightnav">
-        <SettingsLink />
+<div class="root">
+  <div class="top-nav">
+    <div class="topleftnav">
+      <button class="home-logo">
+        <img
+          src="/_builder/assets/bb-logo.svg"
+          alt="budibase icon"
+          on:click={() => $goto(`/`)} />
+      </button>
+
+      <!-- This gets all indexable subroutes and sticks them in the top nav. -->
+      {#each $layout.children as { path, title }}
        <span
-          class:active={false}
-          class="topnavitemright"
-          on:click={() => window.open(`/${application}`)}>
-          <PreviewIcon />
+          class:active={$isActive(path)}
+          class="topnavitem"
+          on:click={topItemNavigate(path)}>
+          {title}
        </span>
-      </div>
+      {/each}
+    </div>
+    <div class="toprightnav">
+      <SettingsLink />
+      <span
+        class:active={false}
+        class="topnavitemright"
+        on:click={() => window.open(`/${application}`)}>
+        <PreviewIcon />
+      </span>
    </div>
-
-    {#await promise}
-      <!-- This should probably be some kind of loading state? -->
-      <div />
-    {:then}
-      <slot />
-    {:catch error}
-      <p>Something went wrong: {error.message}</p>
-    {/await}
-
  </div>
-</Modal>
+
+  {#await promise}
+    <!-- This should probably be some kind of loading state? -->
+    <div />
+  {:then _}
+    <slot />
+  {:catch error}
+    <p>Something went wrong: {error.message}</p>
+  {/await}
+</div>

 <style>
  .root {
@ -138,7 +130,7 @@
    margin: 0px 00px 0px 20px;
    padding-top: 4px;
    font-weight: 500;
-    font-size: var(--font-size-md);
+    font-size: var(--font-size-m);
    height: 100%;
    align-items: center;
    box-sizing: border-box;
@ -183,10 +175,6 @@
    align-items: center;
  }

-  .home-logo:hover {
-    color: var(--hovercolor);
-  }
-
  .home-logo:active {
    outline: none;
  }
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@ -1,5 +1,4 @@
 <script>
-  import Modal from "svelte-simple-modal"
  import { Home as Link } from "@budibase/bbui"
  import {
    AppsIcon,
@ -7,43 +6,41 @@
    DocumentationIcon,
    CommunityIcon,
    BugIcon,
-  } from "components/common/Icons/"
+  } from "components/common/Icons"
 </script>

-<Modal>
-  <div class="root">
-    <div class="ui-nav">
-      <div class="home-logo">
-        <img src="/_builder/assets/budibase-logo.svg" alt="Budibase icon" />
-      </div>
+<div class="root">
+  <div class="ui-nav">
+    <div class="home-logo">
+      <img src="/_builder/assets/budibase-logo.svg" alt="Budibase icon" />
+    </div>

-      <div class="nav-section">
-        <Link icon={AppsIcon} title="Apps" href="/" active />
-        <Link
-          icon={HostingIcon}
-          title="Hosting"
-          href="https://portal.budi.live/" />
-        <Link
-          icon={DocumentationIcon}
-          title="Documentation"
-          href="https://docs.budibase.com/" />
-        <Link
-          icon={CommunityIcon}
-          title="Community"
-          href="https://forum.budibase.com/" />
+    <div class="nav-section">
+      <Link icon={AppsIcon} title="Apps" href="/" active />
+      <Link
+        icon={HostingIcon}
+        title="Hosting"
+        href="https://portal.budi.live/" />
+      <Link
+        icon={DocumentationIcon}
+        title="Documentation"
+        href="https://docs.budibase.com/" />
+      <Link
+        icon={CommunityIcon}
+        title="Community"
+        href="https://forum.budibase.com/" />

-        <Link
-          icon={BugIcon}
-          title="Raise an issue"
-          href="https://github.com/Budibase/budibase" />
-      </div>
+      <Link
+        icon={BugIcon}
+        title="Raise an issue"
+        href="https://github.com/Budibase/budibase" />
    </div>
+  </div>

-    <div class="main">
-      <slot />
-    </div>
+  <div class="main">
+    <slot />
  </div>
-</Modal>
+</div>

 <style>
  .root {
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -1,5 +1,4 @@
 <script>
-  import { getContext } from "svelte"
  import { store } from "builderStore"
  import api from "builderStore/api"
  import AppList from "components/start/AppList.svelte"
@ -10,8 +9,11 @@
  import CreateAppModal from "components/start/CreateAppModal.svelte"
  import { Button, Heading } from "@budibase/bbui"
  import analytics from "analytics"
+  import { Modal } from "components/common/Modal"

  let promise = getApps()
+  let hasKey
+  let modal

  async function getApps() {
    const res = await get("/api/applications")
@ -24,8 +26,6 @@
    }
  }

-  let hasKey
-
  async function fetchKeys() {
    const response = await api.get(`/api/keys/`)
    return await response.json()
@ -40,37 +40,16 @@
    }

    if (!keys.budibase) {
-      showCreateAppModal()
+      modal.show()
    }
  }

-  // Handle create app modal
-  const { open } = getContext("simple-modal")
-
-  const showCreateAppModal = () => {
-    open(
-      CreateAppModal,
-      {
-        hasKey,
-      },
-      {
-        closeButton: false,
-        closeOnEsc: false,
-        closeOnOuterClick: false,
-        styleContent: { padding: 0 },
-        closeOnOuterClick: true,
-      }
-    )
-  }
-
  checkIfKeysAndApps()
 </script>

 <div class="header">
  <Heading medium black>Welcome to the Budibase Beta</Heading>
-  <Button primary black on:click={showCreateAppModal}>
-    Create New Web App
-  </Button>
+  <Button primary black on:click={modal.show}>Create New Web App</Button>
 </div>

 <div class="banner">
@ -80,6 +59,10 @@
  </div>
 </div>

+<Modal bind:this={modal} wide padded={false}>
+  <CreateAppModal {hasKey} />
+</Modal>
+
 {#await promise}
  <div class="spinner-container">
    <Spinner />