From 38ed3f89724438ecabf1e2ed5e2985e962d0f6fe Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 25 Jul 2022 11:57:27 +0100 Subject: [PATCH] Update add component menu to new designs --- .../[screenId]/_components/AppPreview.svelte | 8 ++-- .../new/_components/NewComponentPanel.svelte | 37 +++++-------------- packages/client/manifest.json | 2 +- 3 files changed, 16 insertions(+), 31 deletions(-) diff --git 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 index c199e6c7d3..304d41ad19 100644 --- 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` ) } } diff --git 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 index 113100becc..5dd059fbcb 100644 --- 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} -
+ {#each category.children as component}
15} class:selected={selectedIndex === orderMap[component.component]} on:click={() => addComponent(component.component)} @@ -201,7 +200,7 @@ {component.name}
{/each} -
+ {/each} {:else} @@ -217,7 +216,7 @@ {#each blocks as block}
addComponent(block.component)} > @@ -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; } diff --git a/packages/client/manifest.json b/packages/client/manifest.json index fdb5700a5c..3bd1ecfc9f 100644 --- 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" ],