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 39830d42b5 650503fd82
commit 8b9e66539b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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",

48
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">
<slot class="rows">{body}</slot>
</div>
<div class="uk-modal-footer">
<ButtonGroup>
<ActionButton cancel on:click={cancel}>{cancelText}</ActionButton>
<ActionButton primary on:click={ok}>{okText}</ActionButton>
</ButtonGroup>
</div>
<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>
</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/

6
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}