Workflow UI update
This commit is contained in:
Joe
parent
53427bcdfc
commit
d7a66048c4
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
</span>
|
||||
{#if !workflowBlock}
|
||||
<span
|
||||
class="hoverable"
|
||||
class="test-tab"
|
||||
class:selected={selectedTab === 'TEST'}
|
||||
on:click={() => (selectedTab = 'TEST')}>
|
||||
Test
|
||||
|
|
@ -86,22 +86,25 @@
|
|||
{#if selectedTab === 'SETUP'}
|
||||
{#if workflowBlock}
|
||||
<WorkflowBlockSetup {workflowBlock} />
|
||||
<button class="workflow-button hoverable" on:click={deleteWorkflowBlock}>
|
||||
<div class="buttons">
|
||||
<button class="delete-workflow-button hoverable" on:click={deleteWorkflowBlock}>
|
||||
Delete Block
|
||||
</button>
|
||||
</div>
|
||||
{:else if $workflowStore.currentWorkflow}
|
||||
<div class="panel">
|
||||
<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">
|
||||
<div class="block-label">Workflow: {workflow.name}</div>
|
||||
<div class="config-item">
|
||||
<label>Name</label>
|
||||
<div class="form">
|
||||
<input
|
||||
type="text"
|
||||
class="budibase__input"
|
||||
class="budibase_input"
|
||||
bind:value={workflow.name} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin config-item">
|
||||
<div class="config-item">
|
||||
<label class="uk-form-label">User Access</label>
|
||||
<div class="access-levels">
|
||||
{#each ACCESS_LEVELS as { name, key }}
|
||||
|
|
@ -113,9 +116,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="workflow-button hoverable" on:click={deleteWorkflow}>
|
||||
<div class="buttons">
|
||||
<button class="delete-workflow-button" on:click={deleteWorkflow}>
|
||||
Delete Workflow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -5,14 +5,18 @@
|
|||
|
||||
<div class="root">
|
||||
<div class="nav">
|
||||
<div class="inner">
|
||||
<WorkflowPanel />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div class="inner">
|
||||
<SetupPanel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue