CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-01 04:21:06 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #328 from Budibase/workflow-ui

Browse source 
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>

171
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,36 +95,47 @@
{#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">
Delete Block <button class="workflow-button hoverable" on:click={saveWorkflow}>
</button> Save Workflow
</button>
<button
class="delete-workflow-button hoverable"
on:click={deleteWorkflowBlock}>
Delete Block
</button>
</div>
{:else if $workflowStore.currentWorkflow} {:else if $workflowStore.currentWorkflow}
<div class="panel-body"> <div class="panel">
<label class="uk-form-label">Workflow: {workflow.name}</label> <div class="panel-body">
<div class="uk-margin config-item"> <div class="block-label">Workflow: {workflow.name}</div>
<label class="uk-form-label">Name</label> <div class="config-item">
<div class="uk-form-controls"> <label>Name</label>
<input <div class="form">
type="text" <input
class="budibase__input" type="text"
bind:value={workflow.name} /> class="budibase_input"
bind:value={workflow.name} />
</div>
</div>
<div class="config-item">
<label class="uk-form-label">User Access</label>
<div class="access-levels">
{#each ACCESS_LEVELS as { name, key }}
<span class="access-level">
<label>{name}</label>
<input class="uk-checkbox" type="checkbox" />
</span>
{/each}
</div>
</div> </div>
</div> </div>
<div class="uk-margin config-item"> <div class="buttons">
<label class="uk-form-label">User Access</label> <button class="delete-workflow-button" on:click={deleteWorkflow}>
<div class="access-levels"> Delete Workflow
{#each ACCESS_LEVELS as { name, key }} </button>
<span class="access-level">
<label>{name}</label>
<input class="uk-checkbox" type="checkbox" />
</span>
{/each}
</div>
</div> </div>
</div> </div>
<button class="workflow-button hoverable" on:click={deleteWorkflow}>
Delete Workflow
</button>
{/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;

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

@ -5,13 +5,17 @@
<div class="root"> <div class="root">
<div class="nav"> <div class="nav">
<WorkflowPanel /> <div class="inner">
<WorkflowPanel />
</div>
</div> </div>
<div class="content"> <div class="content">
<slot /> <slot />
</div> </div>
<div class="nav"> <div class="nav">
<SetupPanel /> <div class="inner">
<SetupPanel />
</div>
</div> </div>
</div> </div>
@ -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>

11
packages/builder/src/pages/index.svelte
View file

@ -46,10 +46,10 @@
<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>
</div> </div>
<div class="app-section-header"> <div class="app-section-header">
<div class="app-section-title">Your Web Apps</div> <div class="app-section-title">Your Web Apps</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;