diff --git a/packages/builder/assets/budibase-logo.svg b/packages/builder/assets/budibase-logo.svg new file mode 100644 index 000000000..66b5b3bb3 --- /dev/null +++ b/packages/builder/assets/budibase-logo.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + diff --git a/packages/builder/assets/rocket.jpg b/packages/builder/assets/rocket.jpg new file mode 100644 index 000000000..cc2edf02a Binary files /dev/null and b/packages/builder/assets/rocket.jpg differ diff --git a/packages/builder/assets/spacex.jpg b/packages/builder/assets/spacex.jpg new file mode 100644 index 000000000..30004eadd Binary files /dev/null and b/packages/builder/assets/spacex.jpg differ diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index 910a795cd..3d880cbfa 100644 --- a/packages/builder/src/budibase.css +++ b/packages/builder/src/budibase.css @@ -76,15 +76,14 @@ } .budibase__input { - width: 100%; - max-width: 250px; height: 35px; + width: 220px; border-radius: 3px; border: 1px solid var(--grey-dark); text-align: left; color: var(--ink); - font-size: 16px; - padding-left: 5px; + font-size: 14px; + padding-left: 12px; } .uk-text-right { diff --git a/packages/builder/src/components/common/Select.svelte b/packages/builder/src/components/common/Select.svelte index e89b8006a..4bdd2a941 100644 --- a/packages/builder/src/components/common/Select.svelte +++ b/packages/builder/src/components/common/Select.svelte @@ -22,7 +22,6 @@ font-size: 14px; position: relative; border: var(--grey-dark) 1px solid; - max-width: 256px; } .adjusted { diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte index 2608bfa37..8a0f89bb5 100644 --- a/packages/builder/src/components/start/AppCard.svelte +++ b/packages/builder/src/components/start/AppCard.svelte @@ -10,7 +10,6 @@

{name}

{description}

-
Last Edited - 25th May 2020
Open Web App
@@ -18,7 +17,7 @@ diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte index 684d40039..35faac366 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte @@ -1,5 +1,6 @@ - -

- {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'} -

- - Click here to learn more about component events - - -
-
-
-
Event Type
- {@html getIcon('info', 20)} -
- +
+
+
+

+ {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'} +

+
+
+
+

Event Type

+ +
-
-
-
Event Action(s)
- {@html getIcon('info', 20)} -
- { - createNewEventHandler(draftEventHandler) - draftEventHandler = { parameters: [] } - }} - handler={draftEventHandler} /> - {#if eventData} - {#each eventData.handlers as handler, index} +
+

Event Action(s)

deleteEventHandler(index)} - {handler} /> - {/each} - {/if} - -
- - - Save - + newHandler + onChanged={updateDraftEventHandler} + onCreate={() => { + createNewEventHandler(draftEventHandler) + draftEventHandler = { parameters: [] } + }} + handler={draftEventHandler} /> +
+ {#if eventData} + {#each eventData.handlers as handler, index} + deleteEventHandler(index)} + {handler} /> + {/each} + {/if} + +
+
+ {#if eventData.name} + + {/if} +
+ +
- +
+ +
+
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte index d897ad9c2..5a3fde257 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte @@ -1,4 +1,5 @@ -
-

Events

- openModal()} /> -
+
@@ -71,26 +84,40 @@ {/each}
- diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte index 28c4edece..69ab73e16 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte @@ -1,8 +1,8 @@
- {parameter.name} -
- {#if parameter.name === 'workflow'} - - {:else} - - - {/if} -
+ {#if parameter.name === 'workflow'} + {parameter.name} + {/if} + {#if parameter.name === 'workflow'} + + {:else} + + {/if}
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 7b88547fb..f2f3516a2 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -299,7 +299,19 @@ export const typography = [ }, ], }, - { label: "style", key: "font-style", control: Input }, + { + label: "Decoration", + key: "text-decoration-line", + control: OptionSelect, + defaultValue: "Underline", + options: [ + { label: "Underline", value: "underline" }, + { label: "None", value: "none" }, + { label: "Overline", value: "overline" }, + { label: "Line-through", value: "line-through" }, + { label: "Under Over", value: "underline overline" }, + ], + }, ] export const background = [ @@ -405,7 +417,7 @@ export const transitions = [ }, { label: "Duration", - key: "transition-timing-function", + key: "transition-duration", control: Input, width: "48px", textAlign: "center", @@ -413,7 +425,7 @@ export const transitions = [ }, { label: "Ease", - key: "transition-ease", + key: "transition-timing-function:", control: OptionSelect, options: ["linear", "ease", "ease-in", "ease-out", "ease-in-out"], }, diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index b1b4eaaa9..603e348e1 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -343,7 +343,7 @@ export default { children: [], }, { - name: "List", + name: "Data List", _component: "@budibase/standard-components/datalist", description: "Shiny list", icon: "ri-file-list-fill", @@ -353,6 +353,17 @@ export default { }, children: [], }, + { + name: "List", + _component: "@budibase/standard-components/list", + description: "Shiny list", + icon: "ri-file-list-fill", + properties: { + design: { ...all }, + settings: [{ label: "Model", key: "model", control: ModelSelect }], + }, + children: [], + }, { name: "Map", _component: "@budibase/standard-components/datamap", diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte index 7d681a9ac..456505a4a 100644 --- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte +++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte @@ -45,6 +45,15 @@ function testWorkflow() { testResult = "PASSED" } + + async function saveWorkflow() { + const workflow = $workflowStore.currentWorkflow.workflow + await workflowStore.actions.save({ + instanceId: $backendUiStore.selectedDatabase._id, + workflow, + }) + notifier.success(`Workflow ${workflow.name} saved.`) + }
@@ -60,7 +69,7 @@ {#if !workflowBlock} (selectedTab = 'TEST')}> Test @@ -86,36 +95,47 @@ {#if selectedTab === 'SETUP'} {#if workflowBlock} - +
+ + +
{:else if $workflowStore.currentWorkflow} -
- -
- -
- +
+
+
Workflow: {workflow.name}
+
+ +
+ +
-
-
- -
- {#each ACCESS_LEVELS as { name, key }} - - - - - {/each} +
+ +
+ {#each ACCESS_LEVELS as { name, key }} + + + + + {/each} +
+
+ +
- {/if} {/if}
@@ -125,53 +145,119 @@ display: flex; flex-direction: column; height: 100%; + justify-content: space-between; } .panel-body { flex: 1; } + .panel { + display: flex; + flex-direction: column; + justify-content: space-between; + } + header { font-size: 20px; - font-weight: bold; + font-weight: 700; display: flex; align-items: center; - margin-bottom: 20px; + margin-bottom: 18px; + color: var(--ink); } .selected { - color: var(--font); + color: var(--ink); + } + + .block-label { + font-weight: 500; + font-size: 14px; + color: var(--ink); + margin: 0px 0px 16px 0px; } .config-item { - padding: 20px; + margin: 0px 0px 4px 0px; + padding: 12px; background: var(--light-grey); } + .budibase_input { + height: 35px; + width: 220px; + border-radius: 3px; + border: 1px solid var(--grey-dark); + text-align: left; + color: var(--ink); + font-size: 14px; + padding-left: 12px; + } + header > span { - color: var(--dark-grey); + color: var(--ink-lighter); margin-right: 20px; } + .form { + margin-top: 12px; + } + label { font-weight: 500; font-size: 14px; - color: var(--font); + color: var(--ink); + } + + .buttons { + position: absolute; + bottom: 10px; + } + + .delete-workflow-button { + cursor: pointer; + border: 1px solid var(--red); + border-radius: 3px; + width: 260px; + padding: 8px 16px; + display: flex; + justify-content: center; + align-items: center; + background: var(--white); + color: var(--red); + font-size: 14px; + font-weight: 500; + transition: all 2ms; + align-self: flex-end; + margin-bottom: 10px; + } + + .delete-workflow-button:hover { + background: var(--red); + border: 1px solid var(--red); + color: var(--white); } .workflow-button { - font-family: Roboto; + cursor: pointer; + border: 1px solid var(--grey-dark); + border-radius: 3px; width: 100%; - border: solid 1px #f2f2f2; - border-radius: 2px; - background: var(--white); - height: 32px; - font-size: 12px; + padding: 8px 16px; + display: flex; + justify-content: center; + align-items: center; + background: white; + color: var(--ink); + font-size: 14px; font-weight: 500; + transition: all 2ms; + margin-bottom: 10px; } .workflow-button:hover { - background: var(--light-grey); + background: var(--grey-light); } .access-level { @@ -183,14 +269,15 @@ .access-level label { font-weight: normal; + color: var(--ink); } .test-result { border: none; width: 100%; - border-radius: 2px; + border-radius: 3px; height: 32px; - font-size: 12px; + font-size: 14px; font-weight: 500; color: var(--white); text-align: center; @@ -202,6 +289,6 @@ } .failed { - background: var(--coral); + background: var(--red); } diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte index 08bf2d72d..42ebb307f 100644 --- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte +++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte @@ -15,12 +15,12 @@ {#each workflowParams as [parameter, type]} -
+
{#if Array.isArray(type)}
+
{/each} +
+ +
- diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte index 3619e1a39..c0db923d5 100644 --- a/packages/standard-components/src/DataTable.svelte +++ b/packages/standard-components/src/DataTable.svelte @@ -65,24 +65,31 @@ } thead { - background: #f9f9f9; + background: #393C44; border: 1px solid #ccc; + height: 40px; + text-align: left; + margin-right: 60px; } thead th { - color: var(--button-text); + color: #ffffff; text-transform: capitalize; font-weight: 500; font-size: 14px; text-rendering: optimizeLegibility; letter-spacing: 1px; + justify-content: left; + padding: 16px 20px 16px 8px; + margin-right: 20px; } tbody tr { border-bottom: 1px solid #ccc; transition: 0.3s background-color; - color: var(--secondary100); + color: #393C44; font-size: 14px; + height: 40px; } tbody tr:hover { diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte index d557df6ab..ef0b71d62 100644 --- a/packages/standard-components/src/Link.svelte +++ b/packages/standard-components/src/Link.svelte @@ -13,7 +13,7 @@ $: target = openInNewTab ? "_blank" : "_self" -{text} +{text} diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte index 58a2860be..b52cc154e 100644 --- a/packages/standard-components/src/Login.svelte +++ b/packages/standard-components/src/Login.svelte @@ -25,9 +25,16 @@ const login = async () => { loading = true - const response = await _bb.api.post("/api/authenticate", { - username, - password, + const response = await fetch(_bb.relativeUrl("/api/authenticate"), { + body: JSON.stringify({ + username, + password, + }), + headers: { + "Content-Type": "application/json", + "x-user-agent": "Budibase Builder", + }, + method: "POST", }) if (response.status === 200) { @@ -72,7 +79,7 @@ diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js index a201c1afa..2284ab1fc 100644 --- a/packages/standard-components/src/index.js +++ b/packages/standard-components/src/index.js @@ -18,5 +18,6 @@ export { default as datatable } from "./DataTable.svelte" export { default as dataform } from "./DataForm.svelte" export { default as datachart } from "./DataChart.svelte" export { default as datalist } from "./DataList.svelte" +export { default as list } from "./List.svelte" export { default as datasearch } from "./DataSearch.svelte" export { default as datamap } from "./DataMap.svelte" diff --git a/pull_request_template.md b/pull_request_template.md new file mode 100644 index 000000000..dec1766e4 --- /dev/null +++ b/pull_request_template.md @@ -0,0 +1,8 @@ +## Description +_Describe the problem or feature in addition to a link to the relevant github issues._ + +## Screenshots +_If a UI facing feature, some screenshots of the new functionality._ + + +