From 76471bfcc4c6af32709b6d98754126a1e7c80a46 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 13 May 2022 10:12:16 +0100
Subject: [PATCH] Add icons to component list and update style of nav items

---
 .../DatasourceNavigator.svelte                |  5 +--
 .../src/components/common/NavItem.svelte      | 36 +++++++++++++++----
 .../navigation/ComponentListPanel.svelte      |  2 +-
 .../navigation/ComponentTree.svelte           | 20 ++++++++++-
 4 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index 453cdced51..9faf00a199 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -157,7 +157,8 @@
 
 <style>
   .datasource-icon {
-    margin-right: 3px;
-    padding-top: 3px;
+    display: grid;
+    place-items: center;
+    flex: 0 0 24px;
   }
 </style>
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index f9c5d82753..8f9813c9af 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -46,7 +46,7 @@
   class:border
   class:selected
   class:withActions
-  style={`padding-left: calc(var(--spacing-l) + ${indentLevel * 14}px)`}
+  style={`padding-left: calc(${indentLevel * 14}px)`}
   {draggable}
   on:dragend
   on:dragstart
@@ -59,7 +59,13 @@
 >
   <div class="nav-item-content" bind:this={contentRef}>
     {#if withArrow}
-      <div class:opened class="icon arrow" on:click={onIconClick}>
+      <div
+        class:opened
+        class:relative={indentLevel === 0}
+        class:absolute={indentLevel > 0}
+        class="icon arrow"
+        on:click={onIconClick}
+      >
         <Icon size="S" name="ChevronRight" />
       </div>
     {/if}
@@ -126,25 +132,40 @@
     width: max-content;
     overflow: hidden;
     position: relative;
+    padding-left: var(--spacing-l);
   }
 
   .icon {
     font-size: 16px;
-    flex: 0 0 20px;
+    flex: 0 0 24px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
+    color: var(--spectrum-global-color-gray-600);
   }
   .icon.arrow {
-    margin: 0 -2px 0 -6px;
-    font-size: 12px;
+    flex: 0 0 20px;
+  }
+  .icon.arrow.absolute {
+    position: absolute;
+    left: 0;
+    padding: 8px;
+    margin-left: -8px;
+  }
+  .icon.arrow :global(svg) {
+    width: 12px;
+    height: 12px;
+  }
+  .icon.arrow.relative {
+    position: relative;
+    margin: 0 -6px 0 -4px;
   }
   .icon.arrow.opened {
     transform: rotate(90deg);
   }
   .icon + .icon {
-    margin-left: -4px;
+    /*margin-left: -4px;*/
   }
   .iconText {
     margin-top: 1px;
@@ -154,11 +175,12 @@
 
   .text {
     font-weight: 600;
-    font-size: var(--spectrum-global-dimension-font-size-75);
+    font-size: 12px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1 1 auto;
+    color: var(--spectrum-global-color-gray-800);
   }
   .scrollable .text {
     flex: 0 0 auto;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index a5e5e8fb12..e5a5018f3a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -70,11 +70,11 @@
   <div class="nav-items-container" bind:this={scrollRef}>
     <NavItem
       text="Screen"
-      withArrow
       indentLevel={0}
       selected={$store.selectedComponentId === $selectedScreen?.props._id}
       opened
       scrollable
+      icon="WebPage"
       on:click={() => {
         $store.selectedComponentId = $selectedScreen?.props._id
       }}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
index e0a40cda30..0290f72757 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
@@ -51,6 +51,16 @@
     return capitalise(type)
   }
 
+  const getComponentIcon = component => {
+    const def = store.actions.components.getDefinition(component?._component)
+    return def?.icon
+  }
+
+  const componentHasChildren = component => {
+    const def = store.actions.components.getDefinition(component?._component)
+    return def?.hasChildren && component._children?.length
+  }
+
   function toggleNodeOpen(componentId) {
     if (closedNodes[componentId]) {
       delete closedNodes[componentId]
@@ -105,7 +115,8 @@
         on:iconClick={() => toggleNodeOpen(component._id)}
         on:drop={onDrop}
         text={getComponentText(component)}
-        withArrow
+        icon={getComponentIcon(component)}
+        withArrow={componentHasChildren(component)}
         indentLevel={level + 1}
         selected={$store.selectedComponentId === component._id}
         opened={isOpen(component, $selectedComponentPath, closedNodes)}
@@ -143,6 +154,13 @@
     padding-left: 0;
     margin: 0;
   }
+  ul :global(.icon.arrow) {
+    transition: opacity 130ms ease-out;
+    opacity: 0;
+  }
+  ul:hover :global(.icon.arrow) {
+    opacity: 1;
+  }
   ul,
   li {
     min-width: max-content;