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

Update more styles of new component panel

This commit is contained in:
Andrew Kingston 2022-07-25 12:06:45 +01:00
parent 38ed3f8972
commit 9263cb000d
1 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -179,15 +179,11 @@
> >
</ActionGroup> </ActionGroup>
{/if} {/if}
</Layout> {#if searchString || section === "components"}
<div> {#if filteredStructure.length}
<Divider noMargin noGrid /> {#each filteredStructure as category}
</div>
{#if searchString || section === "components"}
{#if filteredStructure.length}
{#each filteredStructure as category}
<DetailSummary name={category.name} collapsible={false}>
<Layout noPadding gap="XS"> <Layout noPadding gap="XS">
<div class="category-label">{category.name}</div>
{#each category.children as component} {#each category.children as component}
<div <div
class="component" class="component"
@ -201,17 +197,13 @@
</div> </div>
{/each} {/each}
</Layout> </Layout>
</DetailSummary> {/each}
{/each} {:else}
{:else}
<Layout paddingY="M" paddingX="L">
<Body size="S"> <Body size="S">
There aren't any components matching the current filter There aren't any components matching the current filter
</Body> </Body>
</Layout> {/if}
{/if} {:else}
{:else}
<Layout paddingX="L" paddingY="XL" gap="S">
<Body size="S">Blocks are collections of pre-built components</Body> <Body size="S">Blocks are collections of pre-built components</Body>
<Layout noPadding gap="XS"> <Layout noPadding gap="XS">
{#each blocks as block} {#each blocks as block}
@ -224,8 +216,8 @@
</div> </div>
{/each} {/each}
</Layout> </Layout>
</Layout> {/if}
{/if} </Layout>
</Panel> </Panel>
</div> </div>
@ -239,6 +231,13 @@
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
} }
.category-label {
color: var(--spectrum-global-color-gray-600);
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
margin-top: var(--spacing-xs);
}
.component { .component {
background-color: var(--spectrum-global-color-gray-200); background-color: var(--spectrum-global-color-gray-200);
border-radius: 4px; border-radius: 4px;