CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-02 02:25:17 +12:00
Code Issues Projects Releases Wiki Activity

Update add component menu to new designs

Browse source
This commit is contained in:
Andrew Kingston 2022-07-25 11:57:27 +01:00
parent 2c7e675902
commit 38ed3f8972
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)
// 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`
)
}
}

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}
{#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>

2
packages/client/manifest.json
View file

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