MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update add component menu to new designs

This commit is contained in:
Andrew Kingston 2022-07-25 11:57:27 +01:00
parent 4657ea6f11
commit 7d12458ef7
3 changed files with 16 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
View File

@ -99,7 +99,9 @@
$: refreshContent(json) $: refreshContent(json)
// Determine if the add component menu is active // 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 // Update the iframe with the builder info to render the correct preview
const refreshContent = message => { const refreshContent = message => {
@ -226,10 +228,10 @@
const toggleAddComponent = () => { const toggleAddComponent = () => {
if (isAddingComponent) { if (isAddingComponent) {
$goto(`../${$selectedScreen._id}/components/${$selectedComponent._id}`) $goto(`../${$selectedScreen._id}/components/${$selectedComponent?._id}`)
} else { } else {
$goto( $goto(
`../${$selectedScreen._id}/components/${$selectedComponent._id}/new` `../${$selectedScreen._id}/components/${$selectedComponent?._id}/new`
) )
} }
} }

37
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
View File

@ -187,11 +187,10 @@
{#if filteredStructure.length} {#if filteredStructure.length}
{#each filteredStructure as category} {#each filteredStructure as category}
<DetailSummary name={category.name} collapsible={false}> <DetailSummary name={category.name} collapsible={false}>
<div class="component-grid"> <Layout noPadding gap="XS">
{#each category.children as component} {#each category.children as component}
<div <div
class="component" class="component"
class:wide={component.name?.length > 15}
class:selected={selectedIndex === class:selected={selectedIndex ===
orderMap[component.component]} orderMap[component.component]}
on:click={() => addComponent(component.component)} on:click={() => addComponent(component.component)}
@ -201,7 +200,7 @@
<Body size="XS">{component.name}</Body> <Body size="XS">{component.name}</Body>
</div> </div>
{/each} {/each}
</div> </Layout>
</DetailSummary> </DetailSummary>
{/each} {/each}
{:else} {:else}
@ -217,7 +216,7 @@
<Layout noPadding gap="XS"> <Layout noPadding gap="XS">
{#each blocks as block} {#each blocks as block}
<div <div
class="component block" class="component"
on:click={() => addComponent(block.component)} on:click={() => addComponent(block.component)}
> >
<Icon name={block.icon} /> <Icon name={block.icon} />
@ -240,28 +239,18 @@
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
} }
.component-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-s);
}
.component { .component {
background-color: var(--spectrum-global-color-gray-200); background-color: var(--spectrum-global-color-gray-200);
border-radius: 4px; border-radius: 4px;
height: 76px;
display: flex; display: flex;
flex-direction: column;
justify-content: center;
align-items: 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); border: 1px solid var(--spectrum-global-color-gray-200);
transition: border-color 130ms ease-out; transition: border-color 130ms ease-out;
} flex-direction: row;
.component.wide { justify-content: flex-start;
grid-column: span 2; padding: var(--spacing-s) var(--spacing-l);
gap: var(--spacing-m);
overflow: hidden;
} }
.component.selected, .component.selected,
.component:hover { .component:hover {
@ -272,13 +261,7 @@
} }
.component :global(.spectrum-Body) { .component :global(.spectrum-Body) {
line-height: 1.2 !important; line-height: 1.2 !important;
} overflow: hidden;
text-overflow: ellipsis;
.block {
flex-direction: row;
justify-content: flex-start;
height: 48px;
padding: 0 var(--spacing-l);
gap: var(--spacing-m);
} }
</style> </style>

2
packages/client/manifest.json
View File

@ -3736,7 +3736,7 @@
"cardsblock": { "cardsblock": {
"block": true, "block": true,
"name": "Cards block", "name": "Cards block",
"icon": "Table", "icon": "PersonalizationField",
"styles": [ "styles": [
"size" "size"
], ],