diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index 910a795cd2..3d880cbfa2 100644 --- a/packages/builder/src/budibase.css +++ b/packages/builder/src/budibase.css @@ -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 { diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte index e09e2f2fb7..07501777a5 100644 --- a/packages/builder/src/components/start/AppList.svelte +++ b/packages/builder/src/components/start/AppList.svelte @@ -33,5 +33,4 @@ .root { margin: 20px 80px; } - </style> diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte index 7d681a9ac0..456505a4a8 100644 --- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte +++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte @@ -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> diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte index 08bf2d72db..42ebb307fa 100644 --- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte +++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte @@ -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 { diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte index 687c2ec370..66683182b8 100644 --- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte +++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte @@ -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> diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte index e6182a807d..7ba022fb78 100644 --- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte +++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte @@ -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> diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte index b057177cae..f1a1357978 100644 --- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte +++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte @@ -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> diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 8f3f2ecd56..7259111c63 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -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); diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 9acdfe70fc..78ade02904 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -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; diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte index acaf2350ee..96a0dcbb2f 100644 --- a/packages/builder/src/pages/[application]/workflow/_layout.svelte +++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte @@ -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> diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte index 13990a6fa5..e54102db1e 100644 --- a/packages/builder/src/pages/index.svelte +++ b/packages/builder/src/pages/index.svelte @@ -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;