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

minWidth set on NewScreen bbui modal, Spacer component used instead of margins and bbui version bumped

This commit is contained in:
Victoria Sloan 2020-09-04 22:40:25 +01:00
parent a96df4d020
commit 63301eb638
3 changed files with 34 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/package.json
View File

@ -63,7 +63,7 @@
} }
}, },
"dependencies": { "dependencies": {
"@budibase/bbui": "^1.29.2", "@budibase/bbui": "^1.29.3",
"@budibase/client": "^0.1.19", "@budibase/client": "^0.1.19",
"@budibase/colorpicker": "^1.0.1", "@budibase/colorpicker": "^1.0.1",
"@sentry/browser": "5.19.1", "@sentry/browser": "5.19.1",

17
packages/builder/src/components/common/ConfirmDialog.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import UIkit from "uikit" import UIkit from "uikit"
import { Modal, Button, Heading } from "@budibase/bbui" import { Modal, Button, Heading, Spacer } from "@budibase/bbui"
export let title = "" export let title = ""
export let body = "" export let body = ""
@ -33,18 +33,14 @@
</script> </script>
<Modal id={title} bind:this={theModal}> <Modal id={title} bind:this={theModal}>
<h2>{title}</h2> <h2>{title}</h2>
<Spacer extraLarge />
<div class="modal-body"> <slot class="rows">{body}</slot>
<slot class="rows">{body}</slot> <Spacer extraLarge />
</div>
<div class="modal-footer"> <div class="modal-footer">
<Button red wide on:click={ok}>{okText}</Button> <Button red wide on:click={ok}>{okText}</Button>
<Button secondary wide on:click={cancel}>{cancelText}</Button> <Button secondary wide on:click={cancel}>{cancelText}</Button>
</div> </div>
</Modal> </Modal>
<style> <style>
@ -55,11 +51,6 @@
font-weight: 600; font-weight: 600;
} }
.modal-body {
margin-top: var(--spacing-m);
margin-bottom: var(--spacing-m);
}
.modal-footer { .modal-footer {
display: grid; display: grid;
grid-gap: var(--spacing-s); grid-gap: var(--spacing-s);

56
packages/builder/src/components/userInterface/NewScreen.svelte
View File

@ -3,7 +3,7 @@
import { pipe } from "components/common/core" import { pipe } from "components/common/core"
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, Modal, Button } from "@budibase/bbui" import { Input, Select, Modal, Button, Spacer } 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"
@ -67,37 +67,39 @@
} }
</script> </script>
<Modal bind:this={dialog}> <Modal bind:this={dialog} minWidth="500px">
<h2>New Screen</h2> <h2>New Screen</h2>
<Spacer extraLarge />
<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} /> </div>
</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>
<Button secondary medium on:click={cancel}>Cancel</Button> <Spacer extraLarge />
<Button blue medium on:click={save}>Create Screen</Button>
<div class="modal-footer">
<Button secondary medium on:click={cancel}>Cancel</Button>
<Button blue medium on:click={save}>Create Screen</Button>
</div>
</Modal> </Modal>
<style> <style>
@ -108,8 +110,8 @@
font-weight: 600; font-weight: 600;
} }
.modal-body { .modal-footer {
margin-top: var(--spacing-m); display: flex;
margin-bottom: var(--spacing-m); justify-content: space-between;
} }
</style> </style>