MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
packages/builder/src/components/userInterface/NewScreen.svelte
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,34 +67,49 @@
} }
</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 data-cy="new-screen-dialog"> <div class="modal-body">
<div class="bb-margin-xl"> <div data-cy="new-screen-dialog">
<Input label="Name" bind:value={name} /> <div class="bb-margin-xl">
</div> <Input label="Name" bind:value={name} />
</div>
<div class="bb-margin-xl"> <div class="bb-margin-xl">
<Input <Input
label="Url" label="Url"
error={routeError} error={routeError}
bind:value={route} bind:value={route}
on:change={routeChanged} /> on:change={routeChanged} />
</div> </div>
<div class="bb-margin-xl"> <div class="bb-margin-xl">
<label>Layout Component</label> <label>Layout Component</label>
<Select bind:value={layoutComponent} secondary> <Select bind:value={layoutComponent} secondary>
{#each layoutComponents as { _component, name }} {#each layoutComponents as { _component, name }}
<option value={_component}>{name}</option> <option value={_component}>{name}</option>
{/each} {/each}
</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>