CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-31 01:31:18 +12:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of github.com:Budibase/budibase into bugfixes

Browse source
This commit is contained in:
Michael Shanks 2020-06-25 17:48:24 +01:00
commit 51229f14c4
23 changed files with 145 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/builder/package.json
View file

@ -50,7 +50,7 @@
] ]
}, },
"dependencies": { "dependencies": {
"@budibase/bbui": "^1.10.2", "@budibase/bbui": "^1.13.0",
"@budibase/client": "^0.0.32", "@budibase/client": "^0.0.32",
"@nx-js/compiler-util": "^2.0.0", "@nx-js/compiler-util": "^2.0.0",
"codemirror": "^5.51.0", "codemirror": "^5.51.0",

11
packages/builder/src/budibase.css
View file

@ -78,12 +78,17 @@
.budibase__input { .budibase__input {
height: 36px; height: 36px;
width: 220px; background-color: var(--grey-2);
border-radius: 3px; border: none;
border: 1px solid var(--grey-4); border-radius: 5px;
width: 100%;
text-align: left; text-align: left;
color: var(--ink); color: var(--ink);
font-size: 14px; font-size: 14px;
padding-left: 8px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} }
.uk-text-right { .uk-text-right {

8
packages/builder/src/components/common/Block.svelte
View file

@ -15,16 +15,16 @@
<style> <style>
div { div {
height: 80px; height: 80px;
border-radius: 3px; border-radius: 5px;
color: var(--ink); color: var(--ink);
font-weight: 500; font-weight: 400;
padding: 15px; padding: 15px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
transition: 0.3s transform; transition: 0.3s transform;
background: var(--light-grey); background: var(--grey-1);
} }
i { i {
@ -38,7 +38,7 @@
div:hover { div:hover {
cursor: pointer; cursor: pointer;
transform: scale(1.1); background: var(--grey-2);
} }
.primary { .primary {

8
packages/builder/src/components/common/NumberBox.svelte
View file

@ -26,12 +26,12 @@
.numberbox { .numberbox {
display: grid; display: grid;
align-items: center; align-items: center;
grid-template-columns: 40% 1fr; margin-bottom: 16px;
margin-top: 8px;
margin-bottom: 8px;
} }
label { label {
font-size: 12px; font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
} }
</style> </style>

24
packages/builder/src/components/common/ValuesList.svelte
View file

@ -15,16 +15,34 @@
$: valuesText = join("\n")(values) $: valuesText = join("\n")(values)
</script> </script>
<div class="uk-margin"> <div class="margin">
<label class="uk-form-label">{label}</label> <label class="label">{label}</label>
<div class="uk-form-controls"> <div class="uk-form-controls">
<textarea value={valuesText} on:change={inputChanged} /> <textarea value={valuesText} on:change={inputChanged} />
</div> </div>
</div> </div>
<style> <style>
.margin {
margin-bottom: 16px;
display: grid;
}
.label {
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
textarea { textarea {
font-size: 14px;
height: 200px;
width: 100%; width: 100%;
height: 100px; border-radius: 5px;
border: none;
cursor: text;
background: var(--grey-2);
padding: 12px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} }
</style> </style>

10
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View file

@ -86,10 +86,7 @@
<div class="table-controls"> <div class="table-controls">
<h2 class="title">{$backendUiStore.selectedModel.name}</h2> <h2 class="title">{$backendUiStore.selectedModel.name}</h2>
<Button primary on:click={createNewRecord}> <Button primary on:click={createNewRecord}>
<span class="button-inner"> <span class="button-inner">Create New Record</span>
<i class="ri-add-circle-fill" />
Create New Record
</span>
</Button> </Button>
</div> </div>
<table class="uk-table"> <table class="uk-table">
@ -207,9 +204,4 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.button-inner i {
margin-right: 5px;
font-size: 20px;
}
</style> </style>

26
packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
View file

@ -93,8 +93,12 @@
</form> </form>
</div> </div>
<footer> <footer>
<Button secondary on:click={onClosed}>Cancel</Button> <div class="button-margin-3">
<Button attention on:click={saveRecord}>Save</Button> <Button secondary on:click={onClosed}>Cancel</Button>
</div>
<div class="button-margin-4">
<Button blue on:click={saveRecord}>Save</Button>
</div>
</footer> </footer>
<style> <style>
@ -131,8 +135,22 @@
} }
footer { footer {
padding: 20px; padding: 20px 30px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
background: var(--grey-1); background: var(--grey-1);
border-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.button-margin-3 {
grid-column-start: 3;
display: grid;
}
.button-margin-4 {
grid-column-start: 4;
display: grid;
} }
</style> </style>

3
packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
View file

@ -48,7 +48,6 @@
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
display: grid; display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
@ -68,7 +67,7 @@
} }
.selected { .selected {
background: var(--blue-light); background: var(--grey-3);
color: var(--ink); color: var(--ink);
} }

11
packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
View file

@ -18,15 +18,14 @@
div { div {
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
width: 90%; height: 36px;
height: 40px; border-radius: 5px;
border-radius: 3px;
display: flex; display: flex;
align-items: center; align-items: center;
transition: 0.3s background-color; transition: 0.3s background-color;
color: var(--ink); color: var(--ink);
font-weight: 500; font-weight: 400;
font-size: 16px; font-size: 14px;
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -41,7 +40,7 @@
} }
i { i {
color: var(--dark-grey); color: var(--grey-7);
font-size: 20px; font-size: 20px;
margin-right: 8px; margin-right: 8px;
} }

2
packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
View file

@ -52,7 +52,7 @@
headings={HEADINGS} headings={HEADINGS}
bind:value={$backendUiStore.tabs.NAVIGATION_PANEL}> bind:value={$backendUiStore.tabs.NAVIGATION_PANEL}>
{#if selectedTab === 'NAVIGATE'} {#if selectedTab === 'NAVIGATE'}
<Button secondary wide on:click={setupForNewModel}> <Button purple wide on:click={setupForNewModel}>
Create New Model Create New Model
</Button> </Button>
<div class="hierarchy-items-container"> <div class="hierarchy-items-container">

26
packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte
View file

@ -95,30 +95,38 @@
<style> <style>
.info { .info {
background: var(--light-grey); margin-bottom: 16px;
padding: 12px; border-radius: 5px;
margin-bottom: 5px;
border-radius: 3px;
} }
label { label {
font-size: 12px; font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
} }
.field { .field {
display: grid; display: grid;
align-items: center; align-items: center;
grid-template-columns: 40% 1fr; margin-bottom: 16px;
margin-top: 8px;
} }
.field-box header { .field-box header {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
margin-bottom: 16px; margin-bottom: 8px;
} }
.field-box span { .field-box span {
font-weight: bold; background: var(--grey-2);
color: var(--grey-6);
font-weight: 400;
height: 36px;
display: grid;
align-items: center;
padding-left: 12px;
text-transform: capitalize;
border-radius: 5px;
cursor: not-allowed;
} }
</style> </style>

11
packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
View file

@ -81,14 +81,14 @@
</div> </div>
{/if} {/if}
<footer> <footer>
<Button disabled={!edited} attention={edited} wide on:click={saveModel}> <Button disabled={!edited} green={edited} wide on:click={saveModel}>
Save Save
</Button> </Button>
</footer> </footer>
{:else if selectedTab === 'DELETE'} {:else if selectedTab === 'DELETE'}
<div class="titled-input"> <div class="titled-input">
<header>Danger Zone</header> <header>Danger Zone</header>
<Button error wide on:click={deleteModel}>Delete</Button> <Button red wide on:click={deleteModel}>Delete</Button>
</div> </div>
{/if} {/if}
</Switcher> </Switcher>
@ -115,14 +115,13 @@
} }
.titled-input { .titled-input {
padding: 12px; margin-bottom: 16px;
background: var(--light-grey); display: grid;
margin-bottom: 5px;
} }
.titled-input header { .titled-input header {
display: block; display: block;
font-size: 14px; font-size: 14px;
margin-bottom: 16px; margin-bottom: 8px;
} }
</style> </style>

29
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View file

@ -30,7 +30,10 @@
let selectedCategory = categories[0] let selectedCategory = categories[0]
$: components = $store.components $: components = $store.components
$: componentInstance = $store.currentView !== "component" ? {...$store.currentPreviewItem, ...$store.currentComponentInfo} : $store.currentComponentInfo $: componentInstance =
$store.currentView !== "component"
? { ...$store.currentPreviewItem, ...$store.currentComponentInfo }
: $store.currentComponentInfo
$: componentDefinition = $store.components[componentInstance._component] $: componentDefinition = $store.components[componentInstance._component]
$: componentPropDefinition = $: componentPropDefinition =
flattenedPanel.find( flattenedPanel.find(
@ -46,18 +49,21 @@
const onStyleChanged = store.setComponentStyle const onStyleChanged = store.setComponentStyle
function onPropChanged(key, value) { function onPropChanged(key, value) {
if($store.currentView !== "component") { if ($store.currentView !== "component") {
store.setPageOrScreenProp(key, value) store.setPageOrScreenProp(key, value)
return return
} }
store.setComponentProp(key, value) store.setComponentProp(key, value)
} }
$: isComponentOrScreen = $store.currentView === "component" || $store.currentFrontEndType === "screen" $: isComponentOrScreen =
$store.currentView === "component" ||
$store.currentFrontEndType === "screen"
$: isNotScreenslot = componentInstance._component !== "##builtin/screenslot" $: isNotScreenslot = componentInstance._component !== "##builtin/screenslot"
$: displayName = isComponentOrScreen && componentInstance._instanceName && isNotScreenslot $: displayName =
isComponentOrScreen && componentInstance._instanceName && isNotScreenslot
function walkProps(component, action) { function walkProps(component, action) {
action(component) action(component)
@ -92,11 +98,11 @@
{categories} {categories}
{selectedCategory} /> {selectedCategory} />
{#if displayName} {#if displayName}
<div class="instance-name"> <div class="instance-name">
<strong>{componentInstance._instanceName}</strong> <strong>{componentInstance._instanceName}</strong>
</div> </div>
{/if} {/if}
<div class="component-props-container"> <div class="component-props-container">
{#if selectedCategory.value === 'design'} {#if selectedCategory.value === 'design'}
@ -108,8 +114,7 @@
{panelDefinition} {panelDefinition}
displayNameField={displayName} displayNameField={displayName}
onChange={onPropChanged} onChange={onPropChanged}
screenOrPageInstance={$store.currentView !== "component" && $store.currentPreviewItem} /> screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
{:else if selectedCategory.value === 'events'} {:else if selectedCategory.value === 'events'}
<EventsEditor component={componentInstance} /> <EventsEditor component={componentInstance} />
{/if} {/if}

2
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View file

@ -43,7 +43,7 @@
style="padding-left: {level * 20 + 40}px"> style="padding-left: {level * 20 + 40}px">
<div class="nav-item"> <div class="nav-item">
<i class="icon ri-arrow-right-circle-fill" /> <i class="icon ri-arrow-right-circle-fill" />
{isScreenslot(component._component) ? "Screenslot" : component._instanceName} {isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
</div> </div>
<div class="actions"> <div class="actions">
<ComponentDropdownMenu {component} /> <ComponentDropdownMenu {component} />

4
packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
View file

@ -8,7 +8,7 @@
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers" import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
import { store, workflowStore } from "builderStore" import { store, workflowStore } from "builderStore"
import { ArrowDownIcon } from "components/common/Icons/" import { ArrowDownIcon } from "components/common/Icons/"
import { createEventDispatcher } from 'svelte' import { createEventDispatcher } from "svelte"
export let parameter export let parameter
@ -26,7 +26,7 @@
{/if} {/if}
{#if parameter.name === 'workflow'} {#if parameter.name === 'workflow'}
<Select on:change bind:value={parameter.value}> <Select on:change bind:value={parameter.value}>
<option value=""></option> <option value="" />
{#each $workflowStore.workflows.filter(wf => wf.live) as workflow} {#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
<option value={workflow._id}>{workflow.name}</option> <option value={workflow._id}>{workflow.name}</option>
{/each} {/each}

24
packages/builder/src/components/userInterface/SettingsView.svelte
View file

@ -13,9 +13,10 @@
export let displayNameField = false export let displayNameField = false
export let screenOrPageInstance export let screenOrPageInstance
let pageScreenProps = ["title","favicon", "description", "route"] let pageScreenProps = ["title", "favicon", "description", "route"]
const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props const propExistsOnComponentDef = prop =>
pageScreenProps.includes(prop) || prop in componentDefinition.props
function handleChange(key, data) { function handleChange(key, data) {
data.target ? onChange(key, data.target.value) : onChange(key, data) data.target ? onChange(key, data.target.value) : onChange(key, data)
@ -38,18 +39,23 @@
{#if screenOrPageInstance} {#if screenOrPageInstance}
{#each screenOrPageDefinition as def} {#each screenOrPageDefinition as def}
<PropertyControl <PropertyControl
control={def.control} control={def.control}
label={def.label} label={def.label}
key={def.key} key={def.key}
value={screenOrPageInstance[def.key]} value={screenOrPageInstance[def.key]}
{onChange} {onChange}
props={{ ...excludeProps(def, ['control', 'label']) }} /> props={{ ...excludeProps(def, ['control', 'label']) }} />
{/each} {/each}
<hr /> <hr />
{/if} {/if}
{#if displayNameField} {#if displayNameField}
<PropertyControl control={Input} label="Name" key="_instanceName" value={componentInstance._instanceName} {onChange} /> <PropertyControl
control={Input}
label="Name"
key="_instanceName"
value={componentInstance._instanceName}
{onChange} />
{/if} {/if}
{#if panelDefinition && panelDefinition.length > 0} {#if panelDefinition && panelDefinition.length > 0}

2
packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
View file

@ -199,6 +199,6 @@
} }
.components-list-container { .components-list-container {
padding: 20px 0px 0 0; padding: 10px 0px 0 0;
} }
</style> </style>

6
packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
View file

@ -130,7 +130,11 @@
{#each ACCESS_LEVELS as level} {#each ACCESS_LEVELS as level}
<span class="access-level"> <span class="access-level">
<label>{level.name}</label> <label>{level.name}</label>
<input class="uk-checkbox" type="checkbox" disabled={!level.editable} bind:checked={level.canExecute}/> <input
class="uk-checkbox"
type="checkbox"
disabled={!level.editable}
bind:checked={level.canExecute} />
</span> </span>
{/each} {/each}
</div> </div>

12
packages/builder/src/constants/backend/index.js
View file

@ -40,10 +40,10 @@ export const FIELDS = {
DATETIME: { DATETIME: {
name: "Date/Time", name: "Date/Time",
icon: "ri-calendar-event-fill", icon: "ri-calendar-event-fill",
type: "datetime", type: "string",
constraints: { constraints: {
type: "date", type: "string",
datetime: {}, length: {},
presence: false, presence: false,
}, },
}, },
@ -119,10 +119,10 @@ export const BLOCKS = {
END_DATE: { END_DATE: {
name: "End Date", name: "End Date",
icon: "ri-calendar-event-fill", icon: "ri-calendar-event-fill",
type: "datetime", type: "string",
constraints: { constraints: {
type: "date", type: "string",
datetime: {}, length: {},
presence: false, presence: false,
}, },
}, },

2
packages/builder/src/pages/[application]/backend/_layout.svelte
View file

@ -24,6 +24,7 @@
height: 100%; height: 100%;
display: flex; display: flex;
background: var(--grey-1); background: var(--grey-1);
line-height: 1;
} }
.content { .content {
@ -32,7 +33,6 @@
} }
.nav { .nav {
overflow: auto;
flex: 0 1 auto; flex: 0 1 auto;
width: 300px; width: 300px;
height: 100%; height: 100%;

1
packages/builder/src/pages/[application]/workflow/_layout.svelte
View file

@ -29,6 +29,7 @@
height: 100%; height: 100%;
display: flex; display: flex;
background: var(--grey-1); background: var(--grey-1);
line-height: 1;
} }
.content { .content {

5
packages/standard-components/src/Login.svelte
View file

@ -23,7 +23,10 @@
const login = async () => { const login = async () => {
loading = true loading = true
const response = await _bb.api.post("/api/authenticate", { username, password }) const response = await _bb.api.post("/api/authenticate", {
username,
password,
})
if (response.status === 200) { if (response.status === 200) {
const json = await response.json() const json = await response.json()
localStorage.setItem("budibase:token", json.token) localStorage.setItem("budibase:token", json.token)