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 {
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 {

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

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

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

@ -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.`)
}
</script>
<section>
@ -60,7 +69,7 @@
</span>
{#if !workflowBlock}
<span
class="hoverable"
class="test-tab"
class:selected={selectedTab === 'TEST'}
on:click={() => (selectedTab = 'TEST')}>
Test
@ -86,36 +95,47 @@
{#if selectedTab === 'SETUP'}
{#if workflowBlock}
<WorkflowBlockSetup {workflowBlock} />
<button class="workflow-button hoverable" on:click={deleteWorkflowBlock}>
Delete Block
</button>
<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
</button>
</div>
{:else if $workflowStore.currentWorkflow}
<div class="panel-body">
<label class="uk-form-label">Workflow: {workflow.name}</label>
<div class="uk-margin config-item">
<label class="uk-form-label">Name</label>
<div class="uk-form-controls">
<input
type="text"
class="budibase__input"
bind:value={workflow.name} />
<div class="panel">
<div class="panel-body">
<div class="block-label">Workflow: {workflow.name}</div>
<div class="config-item">
<label>Name</label>
<div class="form">
<input
type="text"
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 class="uk-margin 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 class="buttons">
<button class="delete-workflow-button" on:click={deleteWorkflow}>
Delete Workflow
</button>
</div>
</div>
<button class="workflow-button hoverable" on:click={deleteWorkflow}>
Delete Workflow
</button>
{/if}
{/if}
</section>
@ -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);
}
</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>
{#each workflowParams as [parameter, type]}
<div class="uk-margin block-field">
<div class="block-field">
<label class="uk-form-label">{parameter}</label>
<div class="uk-form-controls">
{#if Array.isArray(type)}
<select
class="budibase__input"
class="budibase_input"
bind:value={workflowBlock.args[parameter]}>
{#each type as option}
<option value={option}>{option}</option>
@ -67,8 +67,20 @@
<style>
.block-field {
border-radius: 3px;
background: var(--light-grey);
padding: 20px;
background: var(--grey-light);
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 {

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

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

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

@ -25,19 +25,11 @@
onMount(() => {
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>
<section>
<button class="new-workflow-button hoverable" on:click={newWorkflow}>
<i class="icon ri-add-circle-fill" />
Create New Workflow
</button>
<ul>
@ -51,11 +43,6 @@
</li>
{/each}
</ul>
{#if $workflowStore.currentWorkflow}
<button class="new-workflow-button hoverable" on:click={saveWorkflow}>
Save Workflow
</button>
{/if}
</section>
<style>
@ -87,12 +74,13 @@
}
.workflow-item {
padding: 20px;
display: flex;
align-items: center;
border-radius: 3px;
height: 32px;
font-weight: 500;
padding-left: 12px;
align-items: center;
height: 40px;
margin-bottom: 4px;
color: var(--ink);
}
.workflow-item i {
@ -102,25 +90,36 @@
.workflow-item:hover {
cursor: pointer;
background: var(--secondary);
background: var(--grey-light);
}
.workflow-item.selected {
background: var(--secondary);
background: var(--blue-light);
}
.new-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;
}
.new-workflow-button:hover {
background: var(--light-grey);
background: var(--grey-light);
}
.icon {
color: var(--ink);
font-size: 16px;
margin-right: 4px;
}
</style>

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

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

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

@ -16,6 +16,10 @@
--grey-medium: #e8e8ef;
--grey-dark: #E6E6E6;
--red: #E26D69;
--red-light:#FFE6E6;
--red-dark: #800400;
--primary100: #0055ff;
--primary80: rgba(0, 85, 255, 0.8);
--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;
}
.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) {
padding: 0rem 0.5rem 0rem 0rem;
vertical-align: bottom;

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

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

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

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