CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-18 12:46:16 +12:00
Code Issues Projects Releases Wiki Activity

UI Update

Browse source 
Button color changed
Background color in the settings panel removed
Workflow items font color fixed
Spacing improved
This commit is contained in:
Joe 2020-06-26 14:32:45 +01:00
parent 2a5d8cebd0
commit 4a6c7e5a06
5 changed files with 58 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
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,26 @@
{testResult} {testResult}
</button> </button>
{/if} {/if}
<button class="workflow-button hoverable" on:click={testWorkflow}> <Button secondary wide on:click={testWorkflow}>
Test Test Workflow
</button> </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
class="delete-workflow-button hoverable" red wide
on:click={deleteWorkflowBlock}> on:click={deleteWorkflowBlock}>
Delete Block Delete Block
</button> </Button>
</div> </div>
{:else if $workflowStore.currentWorkflow} {:else if $workflowStore.currentWorkflow}
<div class="panel"> <div class="panel">
@ -141,15 +142,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 Delete Workflow
</button> </Button>
</div> </div>
</div> </div>
{/if} {/if}
@ -175,11 +175,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 +191,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 +214,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 +229,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 +260,7 @@
} }
.passed { .passed {
background: #84c991; background: var(--green);
} }
.failed { .failed {

42
packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
View file

@ -13,11 +13,10 @@
: [] : []
</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 <select
class="budibase_input" class="budibase_input"
@ -30,7 +29,7 @@
<ComponentSelector bind:value={workflowBlock.args[parameter]} /> <ComponentSelector bind:value={workflowBlock.args[parameter]} />
{:else if type === 'accessLevel'} {:else if type === 'accessLevel'}
<select <select
class="budibase__input" class="budibase_input"
bind:value={workflowBlock.args[parameter]}> bind:value={workflowBlock.args[parameter]}>
<option value="ADMIN">Admin</option> <option value="ADMIN">Admin</option>
<option value="POWER_USER">Power User</option> <option value="POWER_USER">Power User</option>
@ -38,17 +37,17 @@
{:else if type === 'password'} {:else if type === 'password'}
<input <input
type="password" type="password"
class="budibase__input" class="budibase_input"
bind:value={workflowBlock.args[parameter]} /> bind:value={workflowBlock.args[parameter]} />
{:else if type === 'number'} {:else if type === 'number'}
<input <input
type="number" type="number"
class="budibase__input" class="budibase_input"
bind:value={workflowBlock.args[parameter]} /> bind:value={workflowBlock.args[parameter]} />
{:else if type === 'longText'} {:else if type === 'longText'}
<textarea <textarea
type="text" type="text"
class="budibase__input" class="budibase_input"
bind:value={workflowBlock.args[parameter]} /> bind:value={workflowBlock.args[parameter]} />
{:else if type === 'model'} {:else if type === 'model'}
<ModelSelector bind:value={workflowBlock.args[parameter]} /> <ModelSelector bind:value={workflowBlock.args[parameter]} />
@ -57,41 +56,46 @@
{:else if type === 'string'} {:else if type === 'string'}
<input <input
type="text" type="text"
class="budibase__input" class="budibase_input"
bind:value={workflowBlock.args[parameter]} /> bind:value={workflowBlock.args[parameter]} />
{/if} {/if}
</div> </div>
</div>
{/each} {/each}
<style> <style>
.block-field {
border-radius: 3px;
background: var(--grey-1);
padding: 12px;
margin: 0px 0px 4px 0px;
}
.block-field {
display: grid;
}
.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,9 @@
</script> </script>
<section> <section>
<button class="new-workflow-button hoverable" on:click={newWorkflow}> <Button purple wide on:click{newWorkflow}>
<i class="icon ri-add-circle-fill" />
Create New Workflow Create New Workflow
</button> </Button>
<ul> <ul>
{#each $workflowStore.workflows as workflow} {#each $workflowStore.workflows as workflow}
<li <li
@ -74,10 +74,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);
} }