Update add component menu to new designs

4 years ago · 38ed3f8972
3 changed files with 16 additions and 31 deletions
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@ -99,7 +99,9 @@
  $: refreshContent(json)

  // Determine if the add component menu is active
-  $: isAddingComponent = $isActive(`./components/${$selectedComponent._id}/new`)
+  $: isAddingComponent = $isActive(
+    `./components/${$selectedComponent?._id}/new`
+  )

  // Update the iframe with the builder info to render the correct preview
  const refreshContent = message => {
@ -226,10 +228,10 @@

  const toggleAddComponent = () => {
    if (isAddingComponent) {
-      $goto(`../${$selectedScreen._id}/components/${$selectedComponent._id}`)
+      $goto(`../${$selectedScreen._id}/components/${$selectedComponent?._id}`)
    } else {
      $goto(
-        `../${$selectedScreen._id}/components/${$selectedComponent._id}/new`
+        `../${$selectedScreen._id}/components/${$selectedComponent?._id}/new`
      )
    }
  }
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
@ -187,11 +187,10 @@
      {#if filteredStructure.length}
        {#each filteredStructure as category}
          <DetailSummary name={category.name} collapsible={false}>
-            <div class="component-grid">
+            <Layout noPadding gap="XS">
              {#each category.children as component}
                <div
                  class="component"
-                  class:wide={component.name?.length > 15}
                  class:selected={selectedIndex ===
                    orderMap[component.component]}
                  on:click={() => addComponent(component.component)}
@ -201,7 +200,7 @@
                  <Body size="XS">{component.name}</Body>
                </div>
              {/each}
-            </div>
+            </Layout>
          </DetailSummary>
        {/each}
      {:else}
@ -217,7 +216,7 @@
        <Layout noPadding gap="XS">
          {#each blocks as block}
            <div
-              class="component block"
+              class="component"
              on:click={() => addComponent(block.component)}
            >
              <Icon name={block.icon} />
@ -240,28 +239,18 @@
    flex-direction: row;
    align-items: stretch;
  }
-  .component-grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: var(--spacing-s);
-  }
  .component {
    background-color: var(--spectrum-global-color-gray-200);
    border-radius: 4px;
-    height: 76px;
    display: flex;
-    flex-direction: column;
-    justify-content: center;
    align-items: center;
-    text-align: center;
-    padding: 0 var(--spacing-s);
-    gap: var(--spacing-s);
-    padding-top: 4px;
    border: 1px solid var(--spectrum-global-color-gray-200);
    transition: border-color 130ms ease-out;
-  }
-  .component.wide {
-    grid-column: span 2;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding: var(--spacing-s) var(--spacing-l);
+    gap: var(--spacing-m);
+    overflow: hidden;
  }
  .component.selected,
  .component:hover {
@ -272,13 +261,7 @@
  }
  .component :global(.spectrum-Body) {
    line-height: 1.2 !important;
-  }
-
-  .block {
-    flex-direction: row;
-    justify-content: flex-start;
-    height: 48px;
-    padding: 0 var(--spacing-l);
-    gap: var(--spacing-m);
+    overflow: hidden;
+    text-overflow: ellipsis;
  }
 </style>
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@ -3736,7 +3736,7 @@
  "cardsblock": {
    "block": true,
    "name": "Cards block",
-    "icon": "Table",
+    "icon": "PersonalizationField",
    "styles": [
      "size"
    ],