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

Merge pull request #394 from Budibase/workflow-ui-update 

Workflow UI Update
This commit is contained in:
Joe 2020-06-29 09:51:46 +01:00 committed by GitHub
parent f6713053e8 13ee292417
commit bda3dc3f7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 86 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte" import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte" import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
import { Button } from "@budibase/bbui"
const { open, close } = getContext("simple-modal") const { open, close } = getContext("simple-modal")
@ -90,26 +91,21 @@
{testResult} {testResult}
</button> </button>
{/if} {/if}
<button class="workflow-button hoverable" on:click={testWorkflow}> <Button secondary wide on:click={testWorkflow}>Test Workflow</Button>
Test
</button>
</div> </div>
{/if} {/if}
{#if selectedTab === 'SETUP'} {#if selectedTab === 'SETUP'}
{#if workflowBlock} {#if workflowBlock}
<WorkflowBlockSetup {workflowBlock} /> <WorkflowBlockSetup {workflowBlock} />
<div class="buttons"> <div class="buttons">
<button <Button
green
wide
data-cy="save-workflow-setup" data-cy="save-workflow-setup"
class="workflow-button hoverable"
on:click={saveWorkflow}> on:click={saveWorkflow}>
Save Workflow Save Workflow
</button> </Button>
<button <Button red wide on:click={deleteWorkflowBlock}>Delete Block</Button>
class="delete-workflow-button hoverable"
on:click={deleteWorkflowBlock}>
Delete Block
</button>
</div> </div>
{:else if $workflowStore.currentWorkflow} {:else if $workflowStore.currentWorkflow}
<div class="panel"> <div class="panel">
@ -141,15 +137,14 @@
</div> </div>
</div> </div>
<div class="buttons"> <div class="buttons">
<button <Button
green
wide
data-cy="save-workflow-setup" data-cy="save-workflow-setup"
class="workflow-button hoverable"
on:click={saveWorkflow}> on:click={saveWorkflow}>
Save Workflow Save Workflow
</button> </Button>
<button class="delete-workflow-button" on:click={deleteWorkflow}> <Button red wide on:click={deleteWorkflow}>Delete Workflow</Button>
Delete Workflow
</button>
</div> </div>
</div> </div>
{/if} {/if}
@ -175,11 +170,12 @@
} }
header { header {
font-size: 20px; font-size: 18px;
font-weight: 600; font-weight: 600;
font-family: inter;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 18px; margin-bottom: 20px;
color: var(--ink); color: var(--ink);
} }
@ -190,13 +186,12 @@
.block-label { .block-label {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
color: var(--ink); color: var(--grey-7);
margin: 0px 0px 16px 0px; margin-bottom: 20px;
} }
.config-item { .config-item {
margin: 0px 0px 4px 0px; margin-bottom: 20px;
padding: 12px 0px;
} }
.budibase_input { .budibase_input {
@ -214,6 +209,7 @@
header > span { header > span {
color: var(--grey-5); color: var(--grey-5);
margin-right: 20px; margin-right: 20px;
cursor: pointer;
} }
.form { .form {
@ -228,52 +224,10 @@
.buttons { .buttons {
position: absolute; position: absolute;
bottom: 10px; bottom: 20px;
} display: grid;
.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 {
cursor: pointer;
border: 1px solid var(--grey-4);
border-radius: 3px;
width: 100%; width: 100%;
padding: 8px 16px; gap: 12px;
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(--grey-1);
} }
.access-level { .access-level {
@ -301,7 +255,7 @@
} }
.passed { .passed {
background: #84c991; background: var(--green);
} }
.failed { .failed {

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

@ -13,85 +13,84 @@
: [] : []
</script> </script>
<label class="uk-form-label">{workflowBlock.type}: {workflowBlock.name}</label> <label class="selected-label">{workflowBlock.type}: {workflowBlock.name}</label>
{#each workflowParams as [parameter, type]} {#each workflowParams as [parameter, type]}
<div class="block-field"> <div class="block-field">
<label class="uk-form-label">{parameter}</label> <label class="label">{parameter}</label>
<div class="uk-form-controls"> {#if Array.isArray(type)}
{#if Array.isArray(type)} <select class="budibase_input" bind:value={workflowBlock.args[parameter]}>
<select {#each type as option}
class="budibase_input" <option value={option}>{option}</option>
bind:value={workflowBlock.args[parameter]}> {/each}
{#each type as option} </select>
<option value={option}>{option}</option> {:else if type === 'component'}
{/each} <ComponentSelector bind:value={workflowBlock.args[parameter]} />
</select> {:else if type === 'accessLevel'}
{:else if type === 'component'} <select class="budibase_input" bind:value={workflowBlock.args[parameter]}>
<ComponentSelector bind:value={workflowBlock.args[parameter]} /> <option value="ADMIN">Admin</option>
{:else if type === 'accessLevel'} <option value="POWER_USER">Power User</option>
<select </select>
class="budibase__input" {:else if type === 'password'}
bind:value={workflowBlock.args[parameter]}> <input
<option value="ADMIN">Admin</option> type="password"
<option value="POWER_USER">Power User</option> class="budibase_input"
</select> bind:value={workflowBlock.args[parameter]} />
{:else if type === 'password'} {:else if type === 'number'}
<input <input
type="password" type="number"
class="budibase__input" class="budibase_input"
bind:value={workflowBlock.args[parameter]} /> bind:value={workflowBlock.args[parameter]} />
{:else if type === 'number'} {:else if type === 'longText'}
<input <textarea
type="number" type="text"
class="budibase__input" class="budibase_input"
bind:value={workflowBlock.args[parameter]} /> bind:value={workflowBlock.args[parameter]} />
{:else if type === 'longText'} {:else if type === 'model'}
<textarea <ModelSelector bind:value={workflowBlock.args[parameter]} />
type="text" {:else if type === 'record'}
class="budibase__input" <RecordSelector bind:value={workflowBlock.args[parameter]} />
bind:value={workflowBlock.args[parameter]} /> {:else if type === 'string'}
{:else if type === 'model'} <input
<ModelSelector bind:value={workflowBlock.args[parameter]} /> type="text"
{:else if type === 'record'} class="budibase_input"
<RecordSelector bind:value={workflowBlock.args[parameter]} /> bind:value={workflowBlock.args[parameter]} />
{:else if type === 'string'} {/if}
<input
type="text"
class="budibase__input"
bind:value={workflowBlock.args[parameter]} />
{/if}
</div>
</div> </div>
{/each} {/each}
<style> <style>
.block-field { .block-field {
border-radius: 3px; display: grid;
background: var(--grey-1);
padding: 12px;
margin: 0px 0px 4px 0px;
} }
.budibase_input { .budibase_input {
height: 36px; height: 36px;
width: 220px; border-radius: 5px;
border-radius: 3px; background-color: var(--grey-2);
border: 1px solid var(--grey-4); border: 1px solid var(--grey-2);
text-align: left; text-align: left;
color: var(--ink); color: var(--ink);
font-size: 14px; font-size: 14px;
padding-left: 12px; padding-left: 12px;
margin-top: 8px;
} }
label { label {
text-transform: capitalize; text-transform: capitalize;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
margin-top: 20px;
}
.selected-label {
text-transform: capitalize;
font-size: 14px;
font-weight: 500;
} }
textarea { textarea {
min-height: 150px; min-height: 150px;
font-family: inherit; font-family: inherit;
padding: 5px; padding: 12px;
margin-top: 8px;
} }
</style> </style>

2
packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
View File

@ -81,7 +81,7 @@
} }
.play-button.highlighted { .play-button.highlighted {
background: var(--primary); background: var(--purple);
} }
.stop-button.highlighted { .stop-button.highlighted {

4
packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
View File

@ -67,6 +67,10 @@
color: var(--ink); color: var(--ink);
} }
p {
color: inherit;
}
div:hover { div:hover {
transform: scale(1.05); transform: scale(1.05);
} }

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

@ -4,6 +4,7 @@
import { onMount, getContext } from "svelte" import { onMount, getContext } from "svelte"
import { backendUiStore, workflowStore } from "builderStore" import { backendUiStore, workflowStore } from "builderStore"
import CreateWorkflowModal from "./CreateWorkflowModal.svelte" import CreateWorkflowModal from "./CreateWorkflowModal.svelte"
import { Button } from "@budibase/bbui"
const { open, close } = getContext("simple-modal") const { open, close } = getContext("simple-modal")
@ -27,10 +28,7 @@
</script> </script>
<section> <section>
<button class="new-workflow-button hoverable" on:click={newWorkflow}> <Button purple wide on:click{newWorkflow}>Create New Workflow</Button>
<i class="icon ri-add-circle-fill" />
Create New Workflow
</button>
<ul> <ul>
{#each $workflowStore.workflows as workflow} {#each $workflowStore.workflows as workflow}
<li <li
@ -74,10 +72,10 @@
.workflow-item { .workflow-item {
display: flex; display: flex;
border-radius: 3px; border-radius: 5px;
padding-left: 12px; padding-left: 12px;
align-items: center; align-items: center;
height: 40px; height: 36px;
margin-bottom: 4px; margin-bottom: 4px;
color: var(--ink); color: var(--ink);
} }