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

Update new component blocks section to match designs

This commit is contained in:
Andrew Kingston 2022-04-26 11:04:31 +01:00
parent d438e6a3c6
commit 853ca15bb4
2 changed files with 48 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/ComponentListPanel.svelte
View File

@ -9,6 +9,7 @@
DetailSummary, DetailSummary,
Icon, Icon,
Body, Body,
Divider,
} from "@budibase/bbui" } from "@budibase/bbui"
import structure from "./componentStructure.json" import structure from "./componentStructure.json"
import { store } from "builderStore" import { store } from "builderStore"
@ -22,6 +23,7 @@
section, section,
searchString searchString
) )
$: blocks = enrichedStructure.find(x => x.name === "Blocks").children
const enrichStructure = (structure, definitions) => { const enrichStructure = (structure, definitions) => {
let enrichedStructure = [] let enrichedStructure = []
@ -95,24 +97,45 @@
on:click={() => (section = "blocks")}>Blocks</ActionButton on:click={() => (section = "blocks")}>Blocks</ActionButton
> >
</ActionGroup> </ActionGroup>
<Search
placeholder="Search"
value={searchString}
on:change={e => (searchString = e.detail)}
/>
</Layout> </Layout>
{#each filteredStructure as category} <div>
<DetailSummary name={category.name} collapsible={false}> <Divider noMargin noGrid />
<div class="component-grid"> </div>
{#each category.children as component} {#if section === "components"}
<div class="component" on:click={() => addComponent(component)}> <Layout paddingX="L" paddingY="XL">
<Icon name={component.icon} /> <Search
<Body size="XS">{component.name}</Body> placeholder="Search"
value={searchString}
on:change={e => (searchString = e.detail)}
/>
</Layout>
{/if}
{#if section === "components"}
{#each filteredStructure as category}
<DetailSummary name={category.name} collapsible={false}>
<div class="component-grid">
{#each category.children as component}
<div class="component" on:click={() => addComponent(component)}>
<Icon name={component.icon} />
<Body size="XS">{component.name}</Body>
</div>
{/each}
</div>
</DetailSummary>
{/each}
{:else}
<Layout paddingX="L" paddingY="XL" gap="S">
<Body size="S">Blocks are a collection of pre-built components</Body>
<Layout noPadding gap="XS">
{#each blocks as block}
<div class="component block">
<Icon name={block.icon} />
<Body size="XS">{block.name}</Body>
</div> </div>
{/each} {/each}
</div> </Layout>
</DetailSummary> </Layout>
{/each} {/if}
</NavigationPanel> </NavigationPanel>
<style> <style>
@ -142,4 +165,11 @@
cursor: pointer; cursor: pointer;
background: var(--spectrum-alias-background-color-tertiary); background: var(--spectrum-alias-background-color-tertiary);
} }
.block {
flex-direction: row;
justify-content: flex-start;
height: 48px;
padding: 0 var(--spacing-l);
gap: var(--spacing-m);
}
</style> </style>

4
packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
View File

@ -6,7 +6,9 @@
<NavigationPanel title="Theme"> <NavigationPanel title="Theme">
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingX="L" paddingY="XL" gap="S">
<Body>Your theme is set across all the screens within your app</Body> <Body size="S">
Your theme is set across all the screens within your app
</Body>
<ThemeEditor /> <ThemeEditor />
</Layout> </Layout>
</NavigationPanel> </NavigationPanel>