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

Workflow UI update

This commit is contained in:
Joe 2020-06-04 19:27:25 +01:00
parent 53427bcdfc
commit d7a66048c4
9 changed files with 187 additions and 113 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 {

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

@ -60,7 +60,7 @@
</span>
{#if !workflowBlock}
<span
class="hoverable"
class="test-tab"
class:selected={selectedTab === 'TEST'}
on:click={() => (selectedTab = 'TEST')}>
Test
@ -86,36 +86,42 @@
{#if selectedTab === 'SETUP'}
{#if workflowBlock}
<WorkflowBlockSetup {workflowBlock} />
<button class="workflow-button hoverable" on:click={deleteWorkflowBlock}>
Delete Block
</button>
<div class="buttons">
<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 +131,118 @@
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;
}
.workflow-button:hover {
background: var(--light-grey);
background: var(--grey-light);
}
.access-level {
@ -183,14 +254,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;
@ -198,10 +270,10 @@
}
.passed {
background: #84c991;
background: #84C991;
}
.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,10 +67,22 @@
<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 {
text-transform: capitalize;
font-size: 14px;

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>

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

@ -38,6 +38,7 @@
<section>
<button class="new-workflow-button hoverable" on:click={newWorkflow}>
<i class="icon ri-add-circle-fill" />
Create New Workflow
</button>
<ul>
@ -87,12 +88,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 +104,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);

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

@ -106,44 +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;

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>