Replace all usages of simple-modal with new modal
This commit is contained in:
Andrew Kingston
parent
93cc0ad26d
commit
27c3e6c9e9
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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="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>
|
||||
|
||||
<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 />
|
||||
<!-- 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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="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>
|
||||
<div class="root">
|
||||
<div class="ui-nav">
|
||||
<div class="home-logo">
|
||||
<img src="/_builder/assets/budibase-logo.svg" alt="Budibase icon" />
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<slot />
|
||||
<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>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<div class="main">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
Loading…
Reference in New Issue