UI Update
Button color changed Background color in the settings panel removed Workflow items font color fixed Spacing improved
This commit is contained in:
Joe
parent
2a5d8cebd0
commit
4a6c7e5a06
|
|
@ -5,6 +5,7 @@
|
|||
import { notifier } from "builderStore/store/notifications"
|
||||
import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
|
||||
import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
|
||||
import { Button } from "@budibase/bbui"
|
||||
|
||||
const { open, close } = getContext("simple-modal")
|
||||
|
||||
|
|
@ -90,26 +91,26 @@
|
|||
{testResult}
|
||||
</button>
|
||||
{/if}
|
||||
<button class="workflow-button hoverable" on:click={testWorkflow}>
|
||||
Test
|
||||
</button>
|
||||
<Button secondary wide on:click={testWorkflow}>
|
||||
Test Workflow
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
{#if selectedTab === 'SETUP'}
|
||||
{#if workflowBlock}
|
||||
<WorkflowBlockSetup {workflowBlock} />
|
||||
<div class="buttons">
|
||||
<button
|
||||
<Button
|
||||
green wide
|
||||
data-cy="save-workflow-setup"
|
||||
class="workflow-button hoverable"
|
||||
on:click={saveWorkflow}>
|
||||
Save Workflow
|
||||
</button>
|
||||
<button
|
||||
class="delete-workflow-button hoverable"
|
||||
</Button>
|
||||
<Button
|
||||
red wide
|
||||
on:click={deleteWorkflowBlock}>
|
||||
Delete Block
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
{:else if $workflowStore.currentWorkflow}
|
||||
<div class="panel">
|
||||
|
|
@ -141,15 +142,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button
|
||||
<Button green wide
|
||||
data-cy="save-workflow-setup"
|
||||
class="workflow-button hoverable"
|
||||
on:click={saveWorkflow}>
|
||||
Save Workflow
|
||||
</button>
|
||||
<button class="delete-workflow-button" on:click={deleteWorkflow}>
|
||||
</Button>
|
||||
<Button red wide on:click={deleteWorkflow}>
|
||||
Delete Workflow
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -175,11 +175,12 @@
|
|||
}
|
||||
|
||||
header {
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-family: inter;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
|
|
@ -190,13 +191,12 @@
|
|||
.block-label {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--ink);
|
||||
margin: 0px 0px 16px 0px;
|
||||
color: var(--grey-7);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.config-item {
|
||||
margin: 0px 0px 4px 0px;
|
||||
padding: 12px 0px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.budibase_input {
|
||||
|
|
@ -214,6 +214,7 @@
|
|||
header > span {
|
||||
color: var(--grey-5);
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form {
|
||||
|
|
@ -228,52 +229,10 @@
|
|||
|
||||
.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 {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--grey-4);
|
||||
border-radius: 3px;
|
||||
bottom: 20px;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
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(--grey-1);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.access-level {
|
||||
|
|
@ -301,7 +260,7 @@
|
|||
}
|
||||
|
||||
.passed {
|
||||
background: #84c991;
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.failed {
|
||||
|
|
|
|||
|
|
@ -13,11 +13,10 @@
|
|||
: []
|
||||
</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]}
|
||||
<div class="block-field">
|
||||
<label class="uk-form-label">{parameter}</label>
|
||||
<div class="uk-form-controls">
|
||||
<label class="label">{parameter}</label>
|
||||
{#if Array.isArray(type)}
|
||||
<select
|
||||
class="budibase_input"
|
||||
|
|
@ -30,7 +29,7 @@
|
|||
<ComponentSelector bind:value={workflowBlock.args[parameter]} />
|
||||
{:else if type === 'accessLevel'}
|
||||
<select
|
||||
class="budibase__input"
|
||||
class="budibase_input"
|
||||
bind:value={workflowBlock.args[parameter]}>
|
||||
<option value="ADMIN">Admin</option>
|
||||
<option value="POWER_USER">Power User</option>
|
||||
|
|
@ -38,17 +37,17 @@
|
|||
{:else if type === 'password'}
|
||||
<input
|
||||
type="password"
|
||||
class="budibase__input"
|
||||
class="budibase_input"
|
||||
bind:value={workflowBlock.args[parameter]} />
|
||||
{:else if type === 'number'}
|
||||
<input
|
||||
type="number"
|
||||
class="budibase__input"
|
||||
class="budibase_input"
|
||||
bind:value={workflowBlock.args[parameter]} />
|
||||
{:else if type === 'longText'}
|
||||
<textarea
|
||||
type="text"
|
||||
class="budibase__input"
|
||||
class="budibase_input"
|
||||
bind:value={workflowBlock.args[parameter]} />
|
||||
{:else if type === 'model'}
|
||||
<ModelSelector bind:value={workflowBlock.args[parameter]} />
|
||||
|
|
@ -57,41 +56,46 @@
|
|||
{:else if type === 'string'}
|
||||
<input
|
||||
type="text"
|
||||
class="budibase__input"
|
||||
class="budibase_input"
|
||||
bind:value={workflowBlock.args[parameter]} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
.block-field {
|
||||
border-radius: 3px;
|
||||
background: var(--grey-1);
|
||||
padding: 12px;
|
||||
margin: 0px 0px 4px 0px;
|
||||
}
|
||||
|
||||
.block-field {
|
||||
display: grid;
|
||||
}
|
||||
.budibase_input {
|
||||
height: 36px;
|
||||
width: 220px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--grey-4);
|
||||
border-radius: 5px;
|
||||
background-color: var(--grey-2);
|
||||
border: 1px solid var(--grey-2);
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
padding-left: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
label {
|
||||
text-transform: capitalize;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.selected-label {
|
||||
text-transform: capitalize;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 150px;
|
||||
font-family: inherit;
|
||||
padding: 5px;
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
}
|
||||
|
||||
.play-button.highlighted {
|
||||
background: var(--primary);
|
||||
background: var(--purple);
|
||||
}
|
||||
|
||||
.stop-button.highlighted {
|
||||
|
|
|
|||
|
|
@ -67,6 +67,10 @@
|
|||
color: var(--ink);
|
||||
}
|
||||
|
||||
p {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
div:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import { onMount, getContext } from "svelte"
|
||||
import { backendUiStore, workflowStore } from "builderStore"
|
||||
import CreateWorkflowModal from "./CreateWorkflowModal.svelte"
|
||||
import { Button } from "@budibase/bbui"
|
||||
|
||||
const { open, close } = getContext("simple-modal")
|
||||
|
||||
|
|
@ -27,10 +28,9 @@
|
|||
</script>
|
||||
|
||||
<section>
|
||||
<button class="new-workflow-button hoverable" on:click={newWorkflow}>
|
||||
<i class="icon ri-add-circle-fill" />
|
||||
<Button purple wide on:click{newWorkflow}>
|
||||
Create New Workflow
|
||||
</button>
|
||||
</Button>
|
||||
<ul>
|
||||
{#each $workflowStore.workflows as workflow}
|
||||
<li
|
||||
|
|
@ -74,10 +74,10 @@
|
|||
|
||||
.workflow-item {
|
||||
display: flex;
|
||||
border-radius: 3px;
|
||||
border-radius: 5px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
height: 36px;
|
||||
margin-bottom: 4px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue