Merge pull request #328 from Budibase/workflow-ui

Workflow UI update

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 {

packages/builder/src/components/start/AppList.svelte

@@ -33,5 +33,4 @@
   .root {
     margin: 20px 80px;
   }
-
 </style>

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>

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 {

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>
 

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>

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>

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);

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;

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>

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;