From f9c616e3e8850ef46236e11d88ad9a0645d1799c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 17 Sep 2020 15:07:32 +0100
Subject: [PATCH] Add labels to workflow blocks

---
 .../WorkflowBuilder/flowchart/FlowItem.svelte | 50 +++++++++++++------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
index b88ab36c54..ceed34924f 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
@@ -6,9 +6,9 @@
   export let block
   let selected
 
-  $: selected =
-    $workflowStore.selectedBlock != null &&
-    $workflowStore.selectedBlock.id === block.id
+  $: selected = $workflowStore.selectedBlock?.id === block.id
+  $: steps = $workflowStore.selectedWorkflow?.workflow?.definition?.steps ?? []
+  $: blockIdx = steps.findIndex(step => step.id === block.id)
 
   function selectBlock() {
     onSelect(block)
@@ -31,18 +31,24 @@
     .replaceAll("}}", "}}</b>")
 </script>
 
-<div class={`${block.type} hoverable`} class:selected on:click={selectBlock}>
+<div
+  class={`block ${block.type} hoverable`}
+  class:selected
+  on:click={selectBlock}>
   <header>
     {#if block.type === 'TRIGGER'}
       <i class="ri-lightbulb-fill" />
-      When this happens...
+      <span>When this happens...</span>
     {:else if block.type === 'ACTION'}
       <i class="ri-flashlight-fill" />
-      Do this...
+      <span>Do this...</span>
     {:else if block.type === 'LOGIC'}
       <i class="ri-pause-fill" />
-      Only continue if...
+      <span>Only continue if...</span>
     {/if}
+    <div class="label">
+      {#if block.type === 'TRIGGER'}Trigger{:else}Step {blockIdx + 1}{/if}
+    </div>
   </header>
   <hr />
   <p>
@@ -51,7 +57,7 @@
 </div>
 
 <style>
-  div {
+  .block {
     width: 320px;
     padding: 20px;
     border-radius: var(--border-radius-m);
@@ -61,14 +67,30 @@
     font-size: 16px;
     color: var(--white);
   }
+  .block.selected,
+  .block:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.15);
+  }
 
   header {
     font-size: 16px;
     font-weight: 500;
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
     align-items: center;
   }
-
+  header span {
+    flex: 1 1 auto;
+  }
+  header .label {
+    font-size: 14px;
+    padding: var(--spacing-s);
+    color: var(--grey-8);
+    border-radius: var(--border-radius-m);
+    background-color: var(--grey-2);
+  }
   header i {
     font-size: 20px;
     margin-right: 5px;
@@ -83,6 +105,10 @@
     background-color: var(--ink);
     color: var(--white);
   }
+  .TRIGGER header .label {
+    background-color: var(--grey-9);
+    color: var(--grey-5);
+  }
 
   .LOGIC {
     background-color: var(--blue-light);
@@ -93,10 +119,4 @@
     color: inherit;
     margin-bottom: 0;
   }
-
-  div.selected,
-  div:hover {
-    transform: scale(1.1);
-    box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.15);
-  }
 </style>