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

Merge pull request #543 from mjashanks/master 

Cleanup - Using BBUI components
This commit is contained in:
Martin McKeaveney 2020-08-19 10:17:56 +01:00 committed by GitHub
parent 80a3b83e2f eb76a0403a
commit 7fe3695d14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 67 additions and 748 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,9 +131,9 @@ Cypress.Commands.add("navigateToFrontend", () => {
Cypress.Commands.add("createScreen", (screenName, route) => { Cypress.Commands.add("createScreen", (screenName, route) => {
cy.get(".newscreen").click() cy.get(".newscreen").click()
cy.get(".uk-input:first").type(screenName) cy.get("[data-cy=new-screen-dialog] input:first").type(screenName)
if (route) { if (route) {
cy.get(".uk-input:last").type(route) cy.get("[data-cy=new-screen-dialog] input:last").type(route)
} }
cy.get(".uk-modal-footer").within(() => { cy.get(".uk-modal-footer").within(() => {
cy.contains("Create Screen").click() cy.contains("Create Screen").click()

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

@ -29,8 +29,10 @@
} }
const ok = () => { const ok = () => {
const result = onOk()
// allow caller to return false, to cancel the "ok"
if (result === false) return
hide() hide()
onOk()
} }
</script> </script>

62
packages/builder/src/components/common/Input.svelte
View File

@ -1,62 +0,0 @@
<script>
import { onMount } from "svelte"
import { buildStyle } from "../../helpers.js"
export let value = ""
export let name = ""
export let textAlign = "left"
export let width = "160px"
export let placeholder = ""
export let suffix = ""
export let onChange = val => {}
let centerPlaceholder = textAlign === "center"
let style = buildStyle({ width, textAlign })
function handleChange(val) {
value = val
let _value = value !== "auto" ? value + suffix : value
onChange(_value)
}
$: displayValue =
suffix && value && value.endsWith(suffix)
? value.replace(new RegExp(`${suffix}$`), "")
: value || ""
</script>
<input
{name}
class:centerPlaceholder
type="text"
value={displayValue}
{placeholder}
{style}
on:change={e => handleChange(e.target.value)} />
<style>
input {
/* width: 32px; */
height: 36px;
font-size: 14px;
font-weight: 400;
margin: 0px 0px 0px 2px;
color: var(--ink);
padding: 0px 8px;
font-family: inter;
width: 164px;
box-sizing: border-box;
background-color: var(--grey-2);
border-radius: 4px;
border: 1px solid var(--grey-2);
outline: none;
}
input::placeholder {
text-align: left;
}
.centerPlaceholder::placeholder {
text-align: center;
}
</style>

50
packages/builder/src/components/common/Inputs/InputGroup.svelte
View File

@ -1,50 +0,0 @@
<script>
import { onMount } from "svelte"
import Input from "../Input.svelte"
export let meta = []
export let label = ""
export let value = ["0", "0", "0", "0"]
export let suffix = ""
export let onChange = () => {}
function handleChange(val, idx) {
value.splice(idx, 1, val !== "auto" && suffix ? val + suffix : val)
value = value
let _value = value.map(v =>
suffix && !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
)
onChange(_value)
}
$: displayValues =
value && suffix
? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
: value || []
</script>
<div class="input-container">
<div class="label">{label}</div>
<div class="inputs-group">
{#each meta as m, i}
<Input
width="37px"
textAlign="center"
placeholder={m.placeholder || ''}
value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]}
onChange={value => handleChange(value || 0, i)} />
{/each}
</div>
</div>
<style>
.label {
flex: 0;
}
.inputs-group {
flex: 1;
}
</style>

65
packages/builder/src/components/common/Select.svelte
View File

@ -1,65 +0,0 @@
<script>
import getIcon from "./icon"
export let icon
export let value
</script>
<div class="select-container">
{#if icon}
<i class={icon} />
{/if}
<select class:adjusted={icon} on:change bind:value>
<slot />
</select>
<span class="arrow">
{@html getIcon('chevron-down', '24')}
</span>
</div>
<style>
.select-container {
font-size: 14px;
position: relative;
border: var(--grey-4) 1px solid;
}
.adjusted {
padding-left: 30px;
}
i {
position: absolute;
left: 10px;
top: 10px;
}
select {
height: 40px;
display: block;
font-family: sans-serif;
font-weight: 400;
font-size: 14px;
color: var(--ink);
padding: 0 40px 0px 20px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: var(--white);
}
.arrow {
position: absolute;
right: 10px;
bottom: 0;
margin: auto;
width: 30px;
height: 30px;
pointer-events: none;
color: var(--ink);
}
</style>

1
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View File

@ -3,7 +3,6 @@
import fsort from "fast-sort" import fsort from "fast-sort"
import { store, backendUiStore } from "builderStore" import { store, backendUiStore } from "builderStore"
import { Button, Icon } from "@budibase/bbui" import { Button, Icon } from "@budibase/bbui"
import Select from "components/common/Select.svelte"
import ActionButton from "components/common/ActionButton.svelte" import ActionButton from "components/common/ActionButton.svelte"
import LinkedRecord from "./LinkedRecord.svelte" import LinkedRecord from "./LinkedRecord.svelte"
import TablePagination from "./TablePagination.svelte" import TablePagination from "./TablePagination.svelte"

1
packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
View File

@ -5,7 +5,6 @@
import { compose, map, get, flatten } from "lodash/fp" import { compose, map, get, flatten } from "lodash/fp"
import { Input, TextArea, Button } from "@budibase/bbui" import { Input, TextArea, Button } from "@budibase/bbui"
import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte" import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
import Select from "components/common/Select.svelte"
import RecordFieldControl from "./RecordFieldControl.svelte" import RecordFieldControl from "./RecordFieldControl.svelte"
import * as api from "../api" import * as api from "../api"
import ErrorsBox from "components/common/ErrorsBox.svelte" import ErrorsBox from "components/common/ErrorsBox.svelte"

94
packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
View File

@ -1,94 +0,0 @@
<script>
import { store, backendUiStore } from "builderStore"
import ActionButton from "components/common/ActionButton.svelte"
import * as api from "../api"
export let onClosed
let username
let password
let accessLevelId
$: valid = username && password && accessLevelId
$: appId = $store.appId
async function createUser() {
const user = { name: username, username, password, accessLevelId }
const response = await api.createUser(user)
backendUiStore.actions.users.create(response)
onClosed()
}
</script>
<form on:submit|preventDefault class="uk-form-stacked">
<div class="main">
<div class="heading">
<i class="ri-list-settings-line button--toggled" />
<div class="title">Create User</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Username</label>
<input
data-cy="username"
class="uk-input"
type="text"
bind:value={username} />
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Password</label>
<input
data-cy="password"
class="uk-input"
type="password"
bind:value={password} />
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Access Level</label>
<select
data-cy="accessLevel"
class="uk-select"
bind:value={accessLevelId}>
<option value="" />
<option value="POWER_USER">Power User</option>
<option value="ADMIN">Admin</option>
</select>
</div>
</div>
<footer>
<div class="button">
<ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
</div>
<ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
</footer>
</form>
<style>
.main {
padding: 40px 40px 20px 40px;
}
.title {
font-size: 24px;
font-weight: 600;
color: var(--ink);
margin-left: 12px;
}
.heading {
display: flex;
align-items: baseline;
}
footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 20px;
background: var(--grey-1);
border-radius: 0 0 5px 5px;
}
.button {
margin-right: 20px;
}
</style>

1
packages/builder/src/components/database/ModelDataTable/modals/index.js
View File

@ -1,3 +1,2 @@
export { default as DeleteRecordModal } from "./DeleteRecord.svelte" export { default as DeleteRecordModal } from "./DeleteRecord.svelte"
export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte" export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte"
export { default as CreateUserModal } from "./CreateUser.svelte"

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

@ -1,6 +1,5 @@
<script> <script>
import { setContext, onMount } from "svelte" import { setContext, onMount } from "svelte"
import PropsView from "./PropsView.svelte"
import { store } from "builderStore" import { store } from "builderStore"
import IconButton from "components/common/IconButton.svelte" import IconButton from "components/common/IconButton.svelte"
@ -11,7 +10,6 @@
CircleIndicator, CircleIndicator,
EventsIcon, EventsIcon,
} from "components/common/Icons/" } from "components/common/Icons/"
import LayoutEditor from "./LayoutEditor.svelte"
import EventsEditor from "./EventsEditor" import EventsEditor from "./EventsEditor"
import panelStructure from "./temporaryPanelStructure.js" import panelStructure from "./temporaryPanelStructure.js"
import CategoryTab from "./CategoryTab.svelte" import CategoryTab from "./CategoryTab.svelte"

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

@ -1,12 +1,10 @@
<script> <script>
import { store } from "builderStore" import { store } from "builderStore"
import { Button } from "@budibase/bbui" import { Button, Select } from "@budibase/bbui"
import Modal from "../../common/Modal.svelte" import Modal from "../../common/Modal.svelte"
import HandlerSelector from "./HandlerSelector.svelte" import HandlerSelector from "./HandlerSelector.svelte"
import IconButton from "../../common/IconButton.svelte" import IconButton from "../../common/IconButton.svelte"
import ActionButton from "../../common/ActionButton.svelte" import ActionButton from "../../common/ActionButton.svelte"
import Select from "../../common/Select.svelte"
import Input from "../../common/Input.svelte"
import getIcon from "../../common/icon" import getIcon from "../../common/icon"
import { CloseIcon } from "components/common/Icons/" import { CloseIcon } from "components/common/Icons/"

3
packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import { Button } from "@budibase/bbui" import { Button, Select } from "@budibase/bbui"
import IconButton from "components/common/IconButton.svelte" import IconButton from "components/common/IconButton.svelte"
import Select from "components/common/Select.svelte"
import StateBindingCascader from "./StateBindingCascader.svelte" import StateBindingCascader from "./StateBindingCascader.svelte"
import { find, map, keys, reduce, keyBy } from "lodash/fp" import { find, map, keys, reduce, keyBy } from "lodash/fp"
import { pipe } from "components/common/core" import { pipe } from "components/common/core"

3
packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import { Input } from "@budibase/bbui" import { Input, Select } from "@budibase/bbui"
import IconButton from "components/common/IconButton.svelte" import IconButton from "components/common/IconButton.svelte"
import Select from "components/common/Select.svelte"
import { find, map, keys, reduce, keyBy } from "lodash/fp" import { find, map, keys, reduce, keyBy } from "lodash/fp"
import { pipe } from "components/common/core" import { pipe } from "components/common/core"
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers" import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"

170
packages/builder/src/components/userInterface/LayoutEditor.svelte
View File

@ -1,170 +0,0 @@
<script>
import InputGroup from "../common/Inputs/InputGroup.svelte"
import LayoutTemplateControls from "./LayoutTemplateControls.svelte"
export let onStyleChanged = () => {}
export let component
const tbrl = [
{ placeholder: "T" },
{ placeholder: "R" },
{ placeholder: "B" },
{ placeholder: "L" },
]
const se = [{ placeholder: "START" }, { placeholder: "END" }]
const single = [{ placeholder: "" }]
$: layout = {
...component._styles.position,
...component._styles.layout,
}
$: layouts = {
templaterows: ["Grid Rows", single],
templatecolumns: ["Grid Columns", single],
}
$: display = {
direction: ["Direction", single],
align: ["Align", single],
justify: ["Justify", single],
}
$: positions = {
column: ["Column", se],
row: ["Row", se],
}
$: spacing = {
margin: ["Margin", tbrl, "small"],
padding: ["Padding", tbrl, "small"],
}
$: size = {
height: ["Height", single],
width: ["Width", single],
}
$: zindex = {
zindex: ["Z-Index", single],
}
const newValue = n => Array(n).fill("")
</script>
<h3>Layout</h3>
<div class="layout-pos">
{#each Object.entries(display) as [key, [name, meta, size]] (component._id + key)}
<div class="grid">
<h5>{name}:</h5>
<LayoutTemplateControls
onStyleChanged={_value => onStyleChanged('layout', key, _value)}
values={layout[key] || newValue(meta.length)}
propertyName={name}
{meta}
{size}
type="text" />
</div>
{/each}
</div>
<!-- <h4>Positioning</h4>
<div class="layout-pos">
{#each Object.entries(positions) as [key, [name, meta, size]] (component._id + key)}
<div class="grid">
<h5>{name}:</h5>
<InputGroup
onStyleChanged={_value => onStyleChanged('position', key, _value)}
values={layout[key] || newValue(meta.length)}
{meta}
{size} />
</div>
{/each}
</div> -->
<h3>Spacing</h3>
<div class="layout-spacing">
{#each Object.entries(spacing) as [key, [name, meta, size]] (component._id + key)}
<div class="grid">
<h5>{name}:</h5>
<InputGroup
onStyleChanged={_value => onStyleChanged('position', key, _value)}
values={layout[key] || newValue(meta.length)}
{meta}
{size}
type="text" />
</div>
{/each}
</div>
<h3>Size</h3>
<div class="layout-layer">
{#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)}
<div class="grid">
<h5>{name}:</h5>
<InputGroup
onStyleChanged={_value => onStyleChanged('position', key, _value)}
values={layout[key] || newValue(meta.length)}
type="text"
{meta}
{size} />
</div>
{/each}
</div>
<h3>Order</h3>
<div class="layout-layer">
{#each Object.entries(zindex) as [key, [name, meta, size]] (component._id + key)}
<div class="grid">
<h5>{name}:</h5>
<InputGroup
onStyleChanged={_value => onStyleChanged('position', key, _value)}
values={layout[key] || newValue(meta.length)}
{meta}
{size} />
</div>
{/each}
</div>
<style>
h3 {
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
color: var(--ink);
opacity: 0.6;
margin-bottom: 10px;
}
h4 {
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
color: var(--ink);
opacity: 0.4;
margin-bottom: 10px;
}
h5 {
font-size: 13px;
font-weight: 400;
color: var(--ink);
opacity: 0.8;
padding-top: 13px;
margin-bottom: 0;
}
div > div {
display: grid;
grid-template-rows: 1fr;
grid-gap: 10px;
height: 40px;
margin-bottom: 15px;
}
.grid {
grid-template-columns: 70px 2fr;
}
</style>

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

@ -1,6 +1,5 @@
<script> <script>
import { store } from "builderStore" import { store } from "builderStore"
import PropsView from "./PropsView.svelte"
import Button from "components/common/Button.svelte" import Button from "components/common/Button.svelte"
import ActionButton from "components/common/ActionButton.svelte" import ActionButton from "components/common/ActionButton.svelte"
import ButtonGroup from "components/common/ButtonGroup.svelte" import ButtonGroup from "components/common/ButtonGroup.svelte"
@ -9,6 +8,7 @@
import UIkit from "uikit" 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 { 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"
@ -22,8 +22,7 @@
let layoutComponent let layoutComponent
let screens let screens
let name = "" let name = ""
let routeError
let saveAttempted = false
$: layoutComponents = Object.values($store.components).filter( $: layoutComponents = Object.values($store.components).filter(
componentDefinition => componentDefinition.container componentDefinition => componentDefinition.container
@ -38,18 +37,21 @@
$: route = !route && $store.screens.length === 0 ? "*" : route $: route = !route && $store.screens.length === 0 ? "*" : route
const save = () => { const save = () => {
saveAttempted = true if (!route) {
routeError = "Url is required"
} else {
if (routeNameExists(route)) {
routeError = "This url is already taken"
} else {
routeError = ""
}
}
const isValid = if (routeError) return false
name.length > 0 &&
!screenNameExists(name) &&
route.length > 0 &&
!routeNameExists(route) &&
layoutComponent
if (!isValid) return
store.createScreen(name, route, layoutComponent._component) store.createScreen(name, route, layoutComponent._component)
name = ""
route = ""
dialog.hide() dialog.hide()
} }
@ -57,12 +59,6 @@
dialog.hide() dialog.hide()
} }
const screenNameExists = name => {
return $store.screens.some(
screen => screen.name.toLowerCase() === name.toLowerCase()
)
}
const routeNameExists = route => { const routeNameExists = route => {
return $store.screens.some( return $store.screens.some(
screen => screen.route.toLowerCase() === route.toLowerCase() screen => screen.route.toLowerCase() === route.toLowerCase()
@ -83,40 +79,26 @@
onOk={save} onOk={save}
okText="Create Screen"> okText="Create Screen">
<div class="uk-form-horizontal"> <div data-cy="new-screen-dialog">
<div class="uk-margin"> <div class="uk-margin">
<label class="uk-form-label">Name</label> <Input label="Name" bind:value={name} />
<div class="uk-form-controls">
<input
class="uk-input uk-form-small"
class:uk-form-danger={saveAttempted && (name.length === 0 || screenNameExists(name))}
bind:value={name} />
</div>
</div> </div>
<div class="uk-margin"> <div class="uk-margin">
<label class="uk-form-label">Route (URL)</label> <Input
<div class="uk-form-controls"> label="Url"
<input error={routeError}
class="uk-input uk-form-small" bind:value={route}
class:uk-form-danger={saveAttempted && (route.length === 0 || routeNameExists(route))} on:change={routeChanged} />
bind:value={route}
on:change={routeChanged} />
</div>
</div> </div>
<div class="uk-margin"> <div class="uk-margin">
<label class="uk-form-label">Layout Component</label> <label>Layout Component</label>
<div class="uk-form-controls"> <Select bind:value={layoutComponent} secondary>
<select {#each layoutComponents as { _component, name }}
class="uk-select uk-form-small" <option value={_component}>{name}</option>
bind:value={layoutComponent} {/each}
class:uk-form-danger={saveAttempted && !layoutComponent}> </Select>
{#each layoutComponents as { _component, name }}
<option value={_component}>{name}</option>
{/each}
</select>
</div>
</div> </div>
</div> </div>
@ -127,28 +109,4 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.uk-form-controls {
margin-left: 0 !important;
}
.uk-form-label {
padding-bottom: 10px;
font-weight: 500;
font-size: 16px;
color: var(--grey-7);
}
.uk-input {
height: 40px !important;
border-radius: 3px;
}
.uk-select {
height: 40px !important;
font-weight: 500px;
color: var(--grey-5);
border: 1px solid var(--grey-2);
border-radius: 3px;
}
</style> </style>

44
packages/builder/src/components/userInterface/PropControl.svelte
View File

@ -1,44 +0,0 @@
<script>
import { store } from "builderStore"
import Checkbox from "../common/Checkbox.svelte"
import StateBindingControl from "./StateBindingControl.svelte"
export let index
export let prop_name
export let prop_value
export let prop_definition = {}
</script>
<div class="root">
{#if prop_definition.type !== 'event'}
<h5>{prop_name}</h5>
<StateBindingControl
value={prop_value}
type={prop_definition.type || prop_definition}
options={prop_definition.options}
styleBindingProperty={prop_definition.styleBindingProperty}
onChanged={v => store.setComponentProp(prop_name, v)} />
{/if}
</div>
<style>
.root {
height: 40px;
margin-bottom: 15px;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 70px 1fr;
grid-gap: 10px;
align-items: baseline;
}
h5 {
word-wrap: break-word;
font-size: 13px;
font-weight: 400;
color: var(--ink);
opacity: 0.8;
padding-top: 13px;
margin-bottom: 0;
}
</style>

11
packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte Normal file
View File

@ -0,0 +1,11 @@
<script>
/*
This file exists because of how we pass this control to the
properties panel - via a JS reference, not using svelte tags
... checkout the use of Input in propertyCategories to see what i mean
*/
import { Input } from "@budibase/bbui"
export let name, value, placeholder, type
</script>
<Input {name} {value} {placeholder} {type} thin on:change />

52
packages/builder/src/components/userInterface/PropsView.svelte
View File

@ -1,52 +0,0 @@
<script>
import { some, includes, filter } from "lodash/fp"
import PropControl from "./PropControl.svelte"
import IconButton from "../common/IconButton.svelte"
export let component
export let components
let errors = []
const props_to_ignore = ["_component", "_children", "_styles", "_code", "_id"]
$: componentDef = components[component._component]
</script>
<div class="root">
<form on:submit|preventDefault class="uk-form-stacked form-root">
{#if componentDef}
{#each Object.entries(componentDef.props) as [prop_name, prop_def], index}
{#if prop_def !== 'event'}
<div class="prop-container">
<PropControl
{prop_name}
prop_value={component[prop_name]}
prop_definition={prop_def}
{index}
disabled={false} />
</div>
{/if}
{/each}
{/if}
</form>
</div>
<style>
.root {
font-size: 10pt;
width: 100%;
}
.form-root {
display: flex;
flex-wrap: wrap;
}
.prop-container {
flex: 1 1 auto;
min-width: 250px;
}
</style>

3
packages/builder/src/components/userInterface/SettingsView.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import PropertyControl from "./PropertyControl.svelte" import PropertyControl from "./PropertyControl.svelte"
import InputGroup from "../common/Inputs/InputGroup.svelte" import Input from "./PropertyPanelControls/Input.svelte"
import Input from "../common/Input.svelte"
import { goto } from "@sveltech/routify" import { goto } from "@sveltech/routify"
import { excludeProps } from "./propertyCategories.js" import { excludeProps } from "./propertyCategories.js"

63
packages/builder/src/components/userInterface/StateBindingControl.svelte
View File

@ -1,63 +0,0 @@
<script>
import { backendUiStore } from "builderStore"
import IconButton from "../common/IconButton.svelte"
import Input from "../common/Input.svelte"
export let value = ""
export let onChanged = () => {}
export let type = ""
export let options = []
export let styleBindingProperty = ""
$: bindOptionToStyle = !!styleBindingProperty
</script>
<div class="unbound-container">
{#if type === 'bool'}
<div>
<IconButton
icon={value == true ? 'check-square' : 'square'}
size="19"
on:click={() => onChanged(!value)} />
</div>
{:else if type === 'models'}
<select
class="uk-select uk-form-small"
bind:value
on:change={() => {
onChanged(value)
}}>
{#each $backendUiStore.models || [] as option}
<option value={option}>{option.name}</option>
{/each}
</select>
{:else if type === 'options' || type === 'models'}
<select
class="uk-select uk-form-small"
{value}
on:change={ev => onChanged(ev.target.value)}>
{#each options || [] as option}
{#if bindOptionToStyle}
<option style={`${styleBindingProperty}: ${option};`} value={option}>
{option}
</option>
{:else}
<option value={option}>{option}</option>
{/if}
{/each}
</select>
{/if}
</div>
<style>
.unbound-container {
display: flex;
}
.bound-header > div:nth-child(1) {
flex: 1 0 auto;
width: 30px;
color: var(--secondary50);
padding-left: 5px;
}
</style>

2
packages/builder/src/components/userInterface/propertyCategories.js
View File

@ -1,4 +1,4 @@
import Input from "../common/Input.svelte" import Input from "./PropertyPanelControls/Input.svelte"
import OptionSelect from "./OptionSelect.svelte" import OptionSelect from "./OptionSelect.svelte"
import FlatButtonGroup from "./FlatButtonGroup.svelte" import FlatButtonGroup from "./FlatButtonGroup.svelte"
import Colorpicker from "@budibase/colorpicker" import Colorpicker from "@budibase/colorpicker"

2
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -1,4 +1,4 @@
import Input from "../common/Input.svelte" import Input from "./PropertyPanelControls/Input.svelte"
import OptionSelect from "./OptionSelect.svelte" import OptionSelect from "./OptionSelect.svelte"
import Checkbox from "../common/Checkbox.svelte" import Checkbox from "../common/Checkbox.svelte"
import ModelSelect from "components/userInterface/ModelSelect.svelte" import ModelSelect from "components/userInterface/ModelSelect.svelte"

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

@ -1,5 +1,6 @@
<script> <script>
import { backendUiStore } from "builderStore" import { backendUiStore } from "builderStore"
import { Input } from "@budibase/bbui"
export let value export let value
</script> </script>
@ -19,8 +20,7 @@
<label class="uk-form-label fields">Fields</label> <label class="uk-form-label fields">Fields</label>
{#each Object.keys(value.model.schema) as field} {#each Object.keys(value.model.schema) as field}
<div class="uk-form-controls uk-margin"> <div class="uk-form-controls uk-margin">
<label class="uk-form-label">{field}</label> <Input bind:value={value[field]} label={field} />
<input type="text" class="budibase__input" bind:value={value[field]} />
</div> </div>
{/each} {/each}
</div> </div>

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

@ -5,7 +5,7 @@
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte" import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte" import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
import { Button } from "@budibase/bbui" import { Button, Input } from "@budibase/bbui"
const { open, close } = getContext("simple-modal") const { open, close } = getContext("simple-modal")
@ -112,13 +112,7 @@
<div class="panel-body"> <div class="panel-body">
<div class="block-label">Workflow: {workflow.name}</div> <div class="block-label">Workflow: {workflow.name}</div>
<div class="config-item"> <div class="config-item">
<label>Name</label> <Input label="Name" bind:value={workflow.name} thin />
<div class="form">
<input
type="text"
class="budibase_input"
bind:value={workflow.name} />
</div>
</div> </div>
<div class="config-item"> <div class="config-item">
<label class="uk-form-label">User Access</label> <label class="uk-form-label">User Access</label>
@ -194,28 +188,12 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.budibase_input {
height: 36px;
width: 244px;
border-radius: 3px;
background-color: var(--grey-2);
border: 1px solid var(--grey-2);
text-align: left;
color: var(--ink);
font-size: 14px;
padding-left: 12px;
}
header > span { header > span {
color: var(--grey-5); color: var(--grey-5);
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
} }
.form {
margin-top: 12px;
}
label { label {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;

42
packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
View File

@ -3,6 +3,7 @@
import ComponentSelector from "./ParamInputs/ComponentSelector.svelte" import ComponentSelector from "./ParamInputs/ComponentSelector.svelte"
import ModelSelector from "./ParamInputs/ModelSelector.svelte" import ModelSelector from "./ParamInputs/ModelSelector.svelte"
import RecordSelector from "./ParamInputs/RecordSelector.svelte" import RecordSelector from "./ParamInputs/RecordSelector.svelte"
import { Input, TextArea, Select } from "@budibase/bbui"
export let workflowBlock export let workflowBlock
@ -18,42 +19,34 @@
<div class="block-field"> <div class="block-field">
<label class="label">{parameter}</label> <label class="label">{parameter}</label>
{#if Array.isArray(type)} {#if Array.isArray(type)}
<select class="budibase_input" bind:value={workflowBlock.args[parameter]}> <Select bind:value={workflowBlock.args[parameter]} thin>
{#each type as option} {#each type as option}
<option value={option}>{option}</option> <option value={option}>{option}</option>
{/each} {/each}
</select> </Select>
{:else if type === 'component'} {:else if type === 'component'}
<ComponentSelector bind:value={workflowBlock.args[parameter]} /> <ComponentSelector bind:value={workflowBlock.args[parameter]} />
{:else if type === 'accessLevel'} {:else if type === 'accessLevel'}
<select class="budibase_input" bind:value={workflowBlock.args[parameter]}> <Select bind:value={workflowBlock.args[parameter]} thin>
<option value="ADMIN">Admin</option> <option value="ADMIN">Admin</option>
<option value="POWER_USER">Power User</option> <option value="POWER_USER">Power User</option>
</select> </Select>
{:else if type === 'password'} {:else if type === 'password'}
<input <Input type="password" thin bind:value={workflowBlock.args[parameter]} />
type="password"
class="budibase_input"
bind:value={workflowBlock.args[parameter]} />
{:else if type === 'number'} {:else if type === 'number'}
<input <Input type="number" thin bind:value={workflowBlock.args[parameter]} />
type="number"
class="budibase_input"
bind:value={workflowBlock.args[parameter]} />
{:else if type === 'longText'} {:else if type === 'longText'}
<textarea <TextArea
type="text" type="text"
class="budibase_input" thin
bind:value={workflowBlock.args[parameter]} /> bind:value={workflowBlock.args[parameter]}
label="" />
{:else if type === 'model'} {:else if type === 'model'}
<ModelSelector bind:value={workflowBlock.args[parameter]} /> <ModelSelector bind:value={workflowBlock.args[parameter]} />
{:else if type === 'record'} {:else if type === 'record'}
<RecordSelector bind:value={workflowBlock.args[parameter]} /> <RecordSelector bind:value={workflowBlock.args[parameter]} />
{:else if type === 'string'} {:else if type === 'string'}
<input <Input type="text" thin bind:value={workflowBlock.args[parameter]} />
type="text"
class="budibase_input"
bind:value={workflowBlock.args[parameter]} />
{/if} {/if}
</div> </div>
{/each} {/each}
@ -62,17 +55,6 @@
.block-field { .block-field {
display: grid; display: grid;
} }
.budibase_input {
height: 36px;
border-radius: 5px;
background-color: var(--grey-2);
border: 1px solid var(--grey-2);
text-align: left;
color: var(--ink);
font-size: 14px;
padding-left: 12px;
margin-top: 8px;
}
label { label {
text-transform: capitalize; text-transform: capitalize;

4
packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
View File

@ -2,6 +2,7 @@
import { store, backendUiStore, workflowStore } from "builderStore" import { store, backendUiStore, workflowStore } from "builderStore"
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import ActionButton from "components/common/ActionButton.svelte" import ActionButton from "components/common/ActionButton.svelte"
import { Input } from "@budibase/bbui"
export let onClosed export let onClosed
@ -26,8 +27,7 @@
Create Workflow Create Workflow
</header> </header>
<div> <div>
<label class="uk-form-label" for="form-stacked-text">Name</label> <Input bind:value={name} label="Name" />
<input class="uk-input" type="text" bind:value={name} />
</div> </div>
<footer> <footer>
<a href="https://docs.budibase.com"> <a href="https://docs.budibase.com">

2
packages/builder/src/index.html
View File

@ -11,9 +11,7 @@
<link rel='icon' type='image/png' href='/_builder/favicon.png'> <link rel='icon' type='image/png' href='/_builder/favicon.png'>
<link rel='stylesheet' href='/_builder/global.css'> <link rel='stylesheet' href='/_builder/global.css'>
<link rel='stylesheet' href='/_builder/codemirror.css'>
<link rel='stylesheet' href='/_builder/budibase.css'> <link rel='stylesheet' href='/_builder/budibase.css'>
<link rel='stylesheet' href='/_builder/monokai.css'>
<link rel='stylesheet' href='/_builder/bundle.css'> <link rel='stylesheet' href='/_builder/bundle.css'>
<link rel='stylesheet' href='/_builder/bbui.css'> <link rel='stylesheet' href='/_builder/bbui.css'>
<link rel='stylesheet' href='/_builder/fonts.css'> <link rel='stylesheet' href='/_builder/fonts.css'>