NewScreen using bbui modal

This commit is contained in:
Victoria Sloan 2020-09-03 08:59:05 +01:00
parent 9afb42ba37
commit 74918b1d71
1 changed files with 41 additions and 31 deletions

View File

@ -1,14 +1,9 @@
<script> <script>
import { store } from "builderStore" import { store } from "builderStore"
import Button from "components/common/Button.svelte"
import ActionButton from "components/common/ActionButton.svelte"
import ButtonGroup from "components/common/ButtonGroup.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { pipe } from "components/common/core" import { pipe } from "components/common/core"
import UIkit from "uikit"
import { isRootComponent } from "./pagesParsing/searchComponents" import { isRootComponent } from "./pagesParsing/searchComponents"
import { splitName } from "./pagesParsing/splitRootComponentName.js" import { splitName } from "./pagesParsing/splitRootComponentName.js"
import { Input, Select } from "@budibase/bbui" import { Input, Select, Modal, Button } from "@budibase/bbui"
import { find, filter, some, map, includes } from "lodash/fp" import { find, filter, some, map, includes } from "lodash/fp"
import { assign } from "lodash" import { assign } from "lodash"
@ -72,13 +67,10 @@
} }
</script> </script>
<ConfirmDialog <Modal bind:this={dialog}>
bind:this={dialog} <h2>New Screen</h2>
title="New Screen"
onCancel={cancel}
onOk={save}
okText="Create Screen">
<div class="modal-body">
<div data-cy="new-screen-dialog"> <div data-cy="new-screen-dialog">
<div class="bb-margin-xl"> <div class="bb-margin-xl">
<Input label="Name" bind:value={name} /> <Input label="Name" bind:value={name} />
@ -101,5 +93,23 @@
</Select> </Select>
</div> </div>
</div> </div>
</div>
</ConfirmDialog> <Button secondary medium on:click={cancel}>Cancel</Button>
<Button blue medium on:click={save}>Create Screen</Button>
</Modal>
<style>
h2 {
font-size: var(--font-size-xl);
margin: 0;
font-family: var(--font-sans);
font-weight: 600;
}
.modal-body {
margin-top: var(--spacing-m);
margin-bottom: var(--spacing-m);
}
</style>