Update new component blocks section to match designs

4 years ago · c46501709b
2 changed files with 48 additions and 16 deletions
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/ComponentListPanel.svelte
@ -9,6 +9,7 @@
    DetailSummary,
    Icon,
    Body,
+    Divider,
  } from "@budibase/bbui"
  import structure from "./componentStructure.json"
  import { store } from "builderStore"
@ -22,6 +23,7 @@
    section,
    searchString
  )
+  $: blocks = enrichedStructure.find(x => x.name === "Blocks").children

  const enrichStructure = (structure, definitions) => {
    let enrichedStructure = []
@ -95,24 +97,45 @@
        on:click={() => (section = "blocks")}>Blocks</ActionButton
      >
    </ActionGroup>
-    <Search
-      placeholder="Search"
-      value={searchString}
-      on:change={e => (searchString = e.detail)}
-    />
  </Layout>
-  {#each filteredStructure as category}
-    <DetailSummary name={category.name} collapsible={false}>
-      <div class="component-grid">
-        {#each category.children as component}
-          <div class="component" on:click={() => addComponent(component)}>
-            <Icon name={component.icon} />
-            <Body size="XS">{component.name}</Body>
+  <div>
+    <Divider noMargin noGrid />
+  </div>
+  {#if section === "components"}
+    <Layout paddingX="L" paddingY="XL">
+      <Search
+        placeholder="Search"
+        value={searchString}
+        on:change={e => (searchString = e.detail)}
+      />
+    </Layout>
+  {/if}
+  {#if section === "components"}
+    {#each filteredStructure as category}
+      <DetailSummary name={category.name} collapsible={false}>
+        <div class="component-grid">
+          {#each category.children as component}
+            <div class="component" on:click={() => addComponent(component)}>
+              <Icon name={component.icon} />
+              <Body size="XS">{component.name}</Body>
+            </div>
+          {/each}
+        </div>
+      </DetailSummary>
+    {/each}
+  {:else}
+    <Layout paddingX="L" paddingY="XL" gap="S">
+      <Body size="S">Blocks are a collection of pre-built components</Body>
+      <Layout noPadding gap="XS">
+        {#each blocks as block}
+          <div class="component block">
+            <Icon name={block.icon} />
+            <Body size="XS">{block.name}</Body>
          </div>
        {/each}
-      </div>
-    </DetailSummary>
-  {/each}
+      </Layout>
+    </Layout>
+  {/if}
 </NavigationPanel>

 <style>
@ -142,4 +165,11 @@
    cursor: pointer;
    background: var(--spectrum-alias-background-color-tertiary);
  }
+  .block {
+    flex-direction: row;
+    justify-content: flex-start;
+    height: 48px;
+    padding: 0 var(--spacing-l);
+    gap: var(--spacing-m);
+  }
 </style>
--- a/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
@ -6,7 +6,9 @@

 <NavigationPanel title="Theme">
  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Body>Your theme is set across all the screens within your app</Body>
+    <Body size="S">
+      Your theme is set across all the screens within your app
+    </Body>
    <ThemeEditor />
  </Layout>
 </NavigationPanel>