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

Merge pull request #565 from Budibase/removing-uikit-05 

Removing uikit modal
This commit is contained in:
Tori Sloan 2020-09-06 22:29:59 +01:00 committed by GitHub
parent 8efe88256d a5ce771de8
commit cfacb8fca0
16 changed files with 73 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/cypress/support/commands.js
View File

@ -52,7 +52,7 @@ Cypress.Commands.add("createApp", name => {
.type("test")
cy.contains("Submit").click()
cy.contains("Create New Table", {
timeout: 10000,
timeout: 20000,
}).should("be.visible")
})
})
@ -143,7 +143,7 @@ Cypress.Commands.add("createScreen", (screenName, route) => {
if (route) {
cy.get("[data-cy=new-screen-dialog] input:last").type(route)
}
cy.get(".uk-modal-footer").within(() => {
cy.get("[data-cy=create-screen-footer]").within(() => {
cy.contains("Create Screen").click()
})
cy.get(".nav-items-container").within(() => {

2
packages/builder/package.json
View File

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

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

@ -1,8 +1,6 @@
<script>
import Button from "./Button.svelte"
import ActionButton from "./ActionButton.svelte"
import ButtonGroup from "./ButtonGroup.svelte"
import UIkit from "uikit"
import { Modal, Button, Heading, Spacer } from "@budibase/bbui"
export let title = ""
export let body = ""
@ -12,16 +10,14 @@
export let onCancel = () => {}
export const show = () => {
uiKitModal.hide()
uiKitModal.show()
theModal.show()
}
export const hide = () => {
uiKitModal.hide()
theModal.hide()
}
let theModal
$: uiKitModal = theModal && UIkit.modal(theModal)
const cancel = () => {
hide()
@ -36,31 +32,27 @@
}
</script>
<div id={title} uk-modal bind:this={theModal}>
<div class="uk-modal-dialog">
<button class="uk-modal-close-default" type="button" uk-close />
<div class="uk-modal-header">
<h4 class="budibase__title--4">{title}</h4>
</div>
<div class="uk-modal-body">
<Modal id={title} bind:this={theModal}>
<h2>{title}</h2>
<Spacer extraLarge />
<slot class="rows">{body}</slot>
<Spacer extraLarge />
<div class="modal-footer">
<Button red wide on:click={ok}>{okText}</Button>
<Button secondary wide on:click={cancel}>{cancelText}</Button>
</div>
<div class="uk-modal-footer">
<ButtonGroup>
<ActionButton cancel on:click={cancel}>{cancelText}</ActionButton>
<ActionButton primary on:click={ok}>{okText}</ActionButton>
</ButtonGroup>
</div>
</div>
</div>
</Modal>
<style>
.uk-modal-footer {
background: var(--grey-1);
h2 {
font-size: var(--font-size-xl);
margin: 0;
font-family: var(--font-sans);
font-weight: 600;
}
.uk-modal-dialog {
width: 400px;
border-radius: 5px;
.modal-footer {
display: grid;
grid-gap: var(--spacing-s);
}
</style>

12
packages/builder/src/components/common/DatePicker.svelte
View File

@ -2,11 +2,10 @@
import flatpickr from "flatpickr"
import "flatpickr/dist/flatpickr.css"
import { onMount } from "svelte"
import { Label, Input } from "@budibase/bbui"
export let value
export let label
export let width = "medium"
export let size = "small"
let input
let fpInstance
@ -25,8 +24,9 @@
</script>
<div class="bb-margin-m">
<label class="uk-form-label">{label}</label>
<input
class="uk-input uk-form-width-{width} uk-form-{size}"
bind:this={input} />
<Label small forAttr={'datepicker-label'}>{label}</Label>
<Input thin bind:this={input} />
</div>
<!-- TODO: Verify DatePicker Input works as expected when datetime property used again
in CreateEditColumn -->

59
packages/builder/src/components/common/Modal.svelte
View File

@ -1,59 +0,0 @@
<script>
import UIkit from "uikit"
import ActionButton from "../common/ActionButton.svelte"
export let isOpen = false
export let onClosed
export let id = ""
export let title
let ukModal
let listenerAdded = false
$: {
if (ukModal && !listenerAdded) {
listenerAdded = true
ukModal.addEventListener("hidden", onClosed)
}
if (ukModal) {
if (isOpen) {
UIkit.modal(ukModal).show()
} else {
UIkit.modal(ukModal).hide()
}
}
}
</script>
<div bind:this={ukModal} uk-modal {id}>
{#if isOpen}
<div class="uk-modal-dialog" uk-overflow-auto>
{#if title}
<div class="uk-modal-header">
<h4 class="budibase__title--4">{title}</h4>
</div>
{/if}
<div class="uk-modal-body">
{#if onClosed}
<button class="uk-modal-close-default" type="button" uk-close />
{/if}
<slot />
</div>
<div class="uk-modal-footer">
<slot name="footer" />
</div>
</div>
{/if}
</div>
<style>
.uk-modal-dialog {
border-radius: 0.3rem;
width: 520px;
height: 80vh;
display: flex;
flex-direction: column;
padding: 40px;
}
</style>

2
packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
View File

@ -45,7 +45,7 @@
<div class="actions">
<ErrorsBox {errors} />
<form on:submit|preventDefault class="uk-form-stacked">
<form on:submit|preventDefault>
{#each modelSchema as [key, meta]}
<div class="bb-margin-xl">
{#if meta.type === 'link'}

1
packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
View File

@ -1,7 +1,6 @@
<script>
import { store } from "builderStore"
import { Button, Select } from "@budibase/bbui"
import Modal from "../../common/Modal.svelte"
import HandlerSelector from "./HandlerSelector.svelte"
import IconButton from "../../common/IconButton.svelte"
import ActionButton from "../../common/ActionButton.svelte"

2
packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
View File

@ -67,7 +67,7 @@
</button>
<div class="root">
<form on:submit|preventDefault class="uk-form-stacked form-root">
<form on:submit|preventDefault class="form-root">
{#each events as event, index}
{#if event.handlers.length > 0}
<div

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

@ -1,14 +1,9 @@
<script>
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 UIkit from "uikit"
import { isRootComponent } from "./pagesParsing/searchComponents"
import { splitName } from "./pagesParsing/splitRootComponentName.js"
import { Input, Select } from "@budibase/bbui"
import { Input, Select, Modal, Button, Spacer } from "@budibase/bbui"
import { find, filter, some, map, includes } from "lodash/fp"
import { assign } from "lodash"
@ -72,12 +67,9 @@
}
</script>
<ConfirmDialog
bind:this={dialog}
title="New Screen"
onCancel={cancel}
onOk={save}
okText="Create Screen">
<Modal bind:this={dialog} minWidth="500px">
<h2>New Screen</h2>
<Spacer extraLarge />
<div data-cy="new-screen-dialog">
<div class="bb-margin-xl">
@ -102,4 +94,24 @@
</div>
</div>
</ConfirmDialog>
<Spacer extraLarge />
<div data-cy="create-screen-footer" class="modal-footer">
<Button secondary medium on:click={cancel}>Cancel</Button>
<Button blue medium on:click={save}>Create Screen</Button>
</div>
</Modal>
<style>
h2 {
font-size: var(--font-size-xl);
margin: 0;
font-family: var(--font-sans);
font-weight: 600;
}
.modal-footer {
display: flex;
justify-content: space-between;
}
</style>

7
packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte
View File

@ -1,6 +1,7 @@
<script>
import { store } from "builderStore"
import deepmerge from "deepmerge"
import { Label } from "@budibase/bbui"
export let value
@ -24,16 +25,14 @@
</script>
<div class="bb-margin-xl block-field">
<label class="uk-form-label">Page</label>
<Label small forAttr={'page'}>Page</Label>
<select class="budibase__input" bind:value={pageName}>
{#each Object.keys(pages) as page}
<option value={page}>{page}</option>
{/each}
</select>
{#if components.length > 0}
<label class="uk-form-label">Component</label>
<Label small forAttr={'component'}>Component</Label>
<select class="budibase__input" bind:value>
{#each components as component}
<option value={component._id}>{component._id}</option>

10
packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
View File

@ -1,6 +1,6 @@
<script>
import { backendUiStore } from "builderStore"
import { Input } from "@budibase/bbui"
import { Input, Label } from "@budibase/bbui"
export let value
@ -25,7 +25,7 @@
{#if value.model}
<div class="bb-margin-xl block-field">
<label class="uk-form-label fields">Fields</label>
<Label small forAttr={'fields'}>Fields</Label>
{#each Object.keys(value.model.schema) as field}
<div class="bb-margin-xl">
<Input
@ -37,9 +37,3 @@
{/each}
</div>
{/if}
<style>
.fields {
font-weight: 500;
}
</style>

5
packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
View File

@ -5,7 +5,7 @@
import { notifier } from "builderStore/store/notifications"
import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
import { Button, Input } from "@budibase/bbui"
import { Button, Input, Label } from "@budibase/bbui"
const { open, close } = getContext("simple-modal")
@ -112,14 +112,13 @@
<div class="panel-body">
<div class="block-label">Workflow: {workflow.name}</div>
<div class="config-item">
<label class="uk-form-label">User Access</label>
<Label small forAttr={'useraccess'}>User Access</Label>
<div class="access-levels">
{#each ACCESS_LEVELS as level}
<span class="access-level">
<label>{level.name}</label>
<input
class="uk-checkbox"
type="checkbox"
disabled={!level.editable}
bind:checked={level.canExecute} />

2
packages/standard-components/.gitignore vendored
View File

@ -2,4 +2,4 @@
node_modules
yarn.lock
package-lock.json
dist
dist/

4
packages/standard-components/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

8
packages/standard-components/src/DataForm.svelte
View File

@ -1,6 +1,7 @@
<script>
import { onMount } from "svelte"
import { fade } from "svelte/transition"
import { Label } from "@budibase/bbui"
export let _bb
export let model
@ -167,7 +168,7 @@
<div class="form-content">
{#each fields as field}
<div class="form-item">
<label class="form-label" for="form-stacked-text">{field}</label>
<Label small forAttr={'form-stacked-text'}>{field}</Label>
{#if schema[field].type === 'string' && schema[field].constraints.inclusion}
<select on:blur={handleInput(field)} bind:this={inputElements[field]}>
{#each schema[field].constraints.inclusion as opt}
@ -223,11 +224,6 @@
margin-bottom: 16px;
}
.form-label {
font-weight: bold;
margin-bottom: 12px;
}
hr {
border: 1px solid var(--grey-1);
margin: 20px 0px;

3
packages/standard-components/src/DataFormWide.svelte
View File

@ -1,6 +1,7 @@
<script>
import { onMount } from "svelte"
import { fade } from "svelte/transition"
import { Label } from "@budibase/bbui"
export let _bb
export let model
@ -167,7 +168,7 @@
<div class="form-content">
{#each fields as field}
<div class="form-item">
<label class="form-label" for="form-stacked-text">{field}</label>
<Label small forAttr={'form-stacked-text'}>{field}</Label>
{#if schema[field].type === 'string' && schema[field].constraints.inclusion}
<select on:blur={handleInput(field)} bind:this={inputElements[field]}>
{#each schema[field].constraints.inclusion as opt}