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 d53b0655af 43856e968e
commit eaf4813b8b
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;