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

Merge pull request #328 from Budibase/workflow-ui 

Workflow UI update
This commit is contained in:
Joe 2020-06-05 09:54:40 +01:00 committed by GitHub
parent 53427bcdfc 76956fc898
commit 2ff21b0da0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 205 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/builder/src/budibase.css
View File

@ -76,15 +76,14 @@
} }
.budibase__input { .budibase__input {
width: 100%;
max-width: 250px;
height: 35px; height: 35px;
width: 220px;
border-radius: 3px; border-radius: 3px;
border: 1px solid var(--grey-dark); border: 1px solid var(--grey-dark);
text-align: left; text-align: left;
color: var(--ink); color: var(--ink);
font-size: 16px; font-size: 14px;
padding-left: 5px; padding-left: 12px;
} }
.uk-text-right { .uk-text-right {

1
packages/builder/src/components/start/AppList.svelte
View File

@ -33,5 +33,4 @@
.root { .root {
margin: 20px 80px; margin: 20px 80px;
} }
</style> </style>

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

@ -45,6 +45,15 @@
function testWorkflow() { function testWorkflow() {
testResult = "PASSED" 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.`)
}
</script> </script>
<section> <section>
@ -60,7 +69,7 @@
</span> </span>
{#if !workflowBlock} {#if !workflowBlock}
<span <span
class="hoverable" class="test-tab"
class:selected={selectedTab === 'TEST'} class:selected={selectedTab === 'TEST'}
on:click={() => (selectedTab = 'TEST')}> on:click={() => (selectedTab = 'TEST')}>
Test Test
@ -86,22 +95,30 @@
{#if selectedTab === 'SETUP'} {#if selectedTab === 'SETUP'}
{#if workflowBlock} {#if workflowBlock}
<WorkflowBlockSetup {workflowBlock} /> <WorkflowBlockSetup {workflowBlock} />
<button class="workflow-button hoverable" on:click={deleteWorkflowBlock}> <div class="buttons">
<button class="workflow-button hoverable" on:click={saveWorkflow}>
Save Workflow
</button>
<button
class="delete-workflow-button hoverable"
on:click={deleteWorkflowBlock}>
Delete Block Delete Block
</button> </button>
</div>
{:else if $workflowStore.currentWorkflow} {:else if $workflowStore.currentWorkflow}
<div class="panel">
<div class="panel-body"> <div class="panel-body">
<label class="uk-form-label">Workflow: {workflow.name}</label> <div class="block-label">Workflow: {workflow.name}</div>
<div class="uk-margin config-item"> <div class="config-item">
<label class="uk-form-label">Name</label> <label>Name</label>
<div class="uk-form-controls"> <div class="form">
<input <input
type="text" type="text"
class="budibase__input" class="budibase_input"
bind:value={workflow.name} /> bind:value={workflow.name} />
</div> </div>
</div> </div>
<div class="uk-margin config-item"> <div class="config-item">
<label class="uk-form-label">User Access</label> <label class="uk-form-label">User Access</label>
<div class="access-levels"> <div class="access-levels">
{#each ACCESS_LEVELS as { name, key }} {#each ACCESS_LEVELS as { name, key }}
@ -113,9 +130,12 @@
</div> </div>
</div> </div>
</div> </div>
<button class="workflow-button hoverable" on:click={deleteWorkflow}> <div class="buttons">
<button class="delete-workflow-button" on:click={deleteWorkflow}>
Delete Workflow Delete Workflow
</button> </button>
</div>
</div>
{/if} {/if}
{/if} {/if}
</section> </section>
@ -125,53 +145,119 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
justify-content: space-between;
} }
.panel-body { .panel-body {
flex: 1; flex: 1;
} }
.panel {
display: flex;
flex-direction: column;
justify-content: space-between;
}
header { header {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: 700;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 18px;
color: var(--ink);
} }
.selected { .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 { .config-item {
padding: 20px; margin: 0px 0px 4px 0px;
padding: 12px;
background: var(--light-grey); 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 { header > span {
color: var(--dark-grey); color: var(--ink-lighter);
margin-right: 20px; margin-right: 20px;
} }
.form {
margin-top: 12px;
}
label { label {
font-weight: 500; font-weight: 500;
font-size: 14px; 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 { .workflow-button {
font-family: Roboto; cursor: pointer;
border: 1px solid var(--grey-dark);
border-radius: 3px;
width: 100%; width: 100%;
border: solid 1px #f2f2f2; padding: 8px 16px;
border-radius: 2px; display: flex;
background: var(--white); justify-content: center;
height: 32px; align-items: center;
font-size: 12px; background: white;
color: var(--ink);
font-size: 14px;
font-weight: 500; font-weight: 500;
transition: all 2ms;
margin-bottom: 10px;
} }
.workflow-button:hover { .workflow-button:hover {
background: var(--light-grey); background: var(--grey-light);
} }
.access-level { .access-level {
@ -183,14 +269,15 @@
.access-level label { .access-level label {
font-weight: normal; font-weight: normal;
color: var(--ink);
} }
.test-result { .test-result {
border: none; border: none;
width: 100%; width: 100%;
border-radius: 2px; border-radius: 3px;
height: 32px; height: 32px;
font-size: 12px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: var(--white); color: var(--white);
text-align: center; text-align: center;
@ -202,6 +289,6 @@
} }
.failed { .failed {
background: var(--coral); background: var(--red);
} }
</style> </style>

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

@ -15,12 +15,12 @@
<label class="uk-form-label">{workflowBlock.type}: {workflowBlock.name}</label> <label class="uk-form-label">{workflowBlock.type}: {workflowBlock.name}</label>
{#each workflowParams as [parameter, type]} {#each workflowParams as [parameter, type]}
<div class="uk-margin block-field"> <div class="block-field">
<label class="uk-form-label">{parameter}</label> <label class="uk-form-label">{parameter}</label>
<div class="uk-form-controls"> <div class="uk-form-controls">
{#if Array.isArray(type)} {#if Array.isArray(type)}
<select <select
class="budibase__input" class="budibase_input"
bind:value={workflowBlock.args[parameter]}> bind:value={workflowBlock.args[parameter]}>
{#each type as option} {#each type as option}
<option value={option}>{option}</option> <option value={option}>{option}</option>
@ -67,8 +67,20 @@
<style> <style>
.block-field { .block-field {
border-radius: 3px; border-radius: 3px;
background: var(--light-grey); background: var(--grey-light);
padding: 20px; padding: 12px;
margin: 0px 0px 4px 0px;
}
.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;
} }
label { label {

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

@ -35,7 +35,7 @@
<i class="ri-information-line" /> <i class="ri-information-line" />
Learn about workflows Learn about workflows
</a> </a>
<ActionButton alert on:click={onClosed}>Cancel</ActionButton> <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
<ActionButton disabled={!valid} on:click={createWorkflow}>Save</ActionButton> <ActionButton disabled={!valid} on:click={createWorkflow}>Save</ActionButton>
</footer> </footer>

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

@ -25,19 +25,11 @@
onMount(() => { onMount(() => {
workflowStore.actions.fetch($backendUiStore.selectedDatabase._id) workflowStore.actions.fetch($backendUiStore.selectedDatabase._id)
}) })
async function saveWorkflow() {
const workflow = $workflowStore.currentWorkflow.workflow
await workflowStore.actions.save({
instanceId: $backendUiStore.selectedDatabase._id,
workflow,
})
notifier.success(`Workflow ${workflow.name} saved.`)
}
</script> </script>
<section> <section>
<button class="new-workflow-button hoverable" on:click={newWorkflow}> <button class="new-workflow-button hoverable" on:click={newWorkflow}>
<i class="icon ri-add-circle-fill" />
Create New Workflow Create New Workflow
</button> </button>
<ul> <ul>
@ -51,11 +43,6 @@
</li> </li>
{/each} {/each}
</ul> </ul>
{#if $workflowStore.currentWorkflow}
<button class="new-workflow-button hoverable" on:click={saveWorkflow}>
Save Workflow
</button>
{/if}
</section> </section>
<style> <style>
@ -87,12 +74,13 @@
} }
.workflow-item { .workflow-item {
padding: 20px;
display: flex; display: flex;
align-items: center;
border-radius: 3px; border-radius: 3px;
height: 32px; padding-left: 12px;
font-weight: 500; align-items: center;
height: 40px;
margin-bottom: 4px;
color: var(--ink);
} }
.workflow-item i { .workflow-item i {
@ -102,25 +90,36 @@
.workflow-item:hover { .workflow-item:hover {
cursor: pointer; cursor: pointer;
background: var(--secondary); background: var(--grey-light);
} }
.workflow-item.selected { .workflow-item.selected {
background: var(--secondary); background: var(--blue-light);
} }
.new-workflow-button { .new-workflow-button {
font-family: Roboto; cursor: pointer;
border: 1px solid var(--grey-dark);
border-radius: 3px;
width: 100%; width: 100%;
border: solid 1px #f2f2f2; padding: 8px 16px;
border-radius: 2px; display: flex;
background: var(--white); justify-content: center;
height: 32px; align-items: center;
font-size: 12px; background: white;
color: var(--ink);
font-size: 14px;
font-weight: 500; font-weight: 500;
transition: all 2ms;
} }
.new-workflow-button:hover { .new-workflow-button:hover {
background: var(--light-grey); background: var(--grey-light);
}
.icon {
color: var(--ink);
font-size: 16px;
margin-right: 4px;
} }
</style> </style>

11
packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
View File

@ -33,8 +33,9 @@
<style> <style>
header { header {
font-size: 20px; font-size: 18px;
font-weight: bold; font-weight: 700;
background: none;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
@ -45,6 +46,10 @@
} }
span:not(.selected) { span:not(.selected) {
color: var(--dark-grey); color: var(--ink-lighter);
}
span:not(.selected):hover {
color: var(--ink);
} }
</style> </style>

4
packages/builder/src/global.css
View File

@ -16,6 +16,10 @@
--grey-medium: #e8e8ef; --grey-medium: #e8e8ef;
--grey-dark: #E6E6E6; --grey-dark: #E6E6E6;
--red: #E26D69;
--red-light:#FFE6E6;
--red-dark: #800400;
--primary100: #0055ff; --primary100: #0055ff;
--primary80: rgba(0, 85, 255, 0.8); --primary80: rgba(0, 85, 255, 0.8);
--primary60: #rgba(0, 85, 255, 0.6); --primary60: #rgba(0, 85, 255, 0.6);

39
packages/builder/src/pages/[application]/frontend/_layout.svelte
View File

@ -106,45 +106,6 @@
overflow-y: hidden; overflow-y: hidden;
} }
.components-nav-page {
font-size: 13px;
color: var(--ink);
padding-left: 20px;
margin-top: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
}
.components-nav-header {
font-size: 13px;
color: var(--ink);
margin-top: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
}
.nav-header {
display: flex;
flex-direction: column;
margin-top: 20px;
}
.nav-items-container {
padding: 1rem 0rem 0rem 0rem;
}
.nav-group-header {
display: flex;
padding: 0px 20px 0px 20px;
font-size: 0.9rem;
font-weight: bold;
justify-content: space-between;
align-items: center;
min-height: 0;
}
.nav-group-header > div:nth-child(1) { .nav-group-header > div:nth-child(1) {
padding: 0rem 0.5rem 0rem 0rem; padding: 0rem 0.5rem 0rem 0rem;
vertical-align: bottom; vertical-align: bottom;

15
packages/builder/src/pages/[application]/workflow/_layout.svelte
View File

@ -5,14 +5,18 @@
<div class="root"> <div class="root">
<div class="nav"> <div class="nav">
<div class="inner">
<WorkflowPanel /> <WorkflowPanel />
</div> </div>
</div>
<div class="content"> <div class="content">
<slot /> <slot />
</div> </div>
<div class="nav"> <div class="nav">
<div class="inner">
<SetupPanel /> <SetupPanel />
</div> </div>
</div>
</div> </div>
<style> <style>
@ -24,7 +28,7 @@
.root { .root {
height: 100%; height: 100%;
display: flex; display: flex;
background: #fafafa; background: var(--grey-light);
} }
.content { .content {
@ -33,10 +37,13 @@
} }
.nav { .nav {
padding: 20px;
overflow: auto; overflow: auto;
width: 275px; width: 300px;
border: 1px solid var(--medium-grey); border-right: 1px solid var(--grey);
background: var(--white); background: var(--white);
} }
.inner {
padding: 20px;
}
</style> </style>

5
packages/builder/src/pages/index.svelte
View File

@ -46,7 +46,7 @@
<div class="welcome">Welcome to Budibase</div> <div class="welcome">Welcome to Budibase</div>
<div class="banner"> <div class="banner">
<img src="/_builder/assets/rocket.jpg" alt="rocket"> <img src="/_builder/assets/rocket.jpg" alt="rocket" />
<div class="banner-content"> <div class="banner-content">
Every accomplishment starts with a decision to try. Every accomplishment starts with a decision to try.
</div> </div>
@ -70,7 +70,6 @@
{/await} {/await}
<style> <style>
.welcome { .welcome {
font-size: 42px; font-size: 42px;
color: var(--ink); color: var(--ink);
@ -93,7 +92,7 @@
height: 250px; height: 250px;
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
} }
.banner-content { .banner-content {
position: absolute; position: absolute;