CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-04 03:54:37 +13:00
Code Issues Projects Releases Wiki Activity

Move new component panel to right side, animate via sliding in and remove add component button above preview

Browse source
This commit is contained in:
Andrew Kingston 2022-07-25 10:20:59 +01:00
parent d266b6ca84
commit 8296c8f996
10 changed files with 106 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/builder/src/components/design/Panel.svelte
View file

@ -3,11 +3,13 @@
export let title
export let icon
export let expandable = false
export let showAddButton = false
export let showBackButton = false
export let showExpandIcon = false
export let showCloseButton = false
export let onClickAddButton
export let onClickBackButton
export let onClickCloseButton
export let borderLeft = false
export let borderRight = false
@ -25,7 +27,7 @@
<div class="title">
<Heading size="XXS">{title || ""}</Heading>
</div>
{#if showExpandIcon}
{#if expandable}
<Icon
name={wide ? "Minimize" : "Maximize"}
hoverable
@ -37,6 +39,9 @@
<Icon name="Add" />
</div>
{/if}
{#if showCloseButton}
<Icon name="Close" hoverable on:click={onClickCloseButton} />
{/if}
</div>
<div class="body">
<slot />

9
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
View file

@ -25,14 +25,6 @@
{#if $store.clientFeatures.devicePreview}
<DevicePreviewSelect />
{/if}
<Button
newStyles
secondary
icon="Add"
on:click={() => $goto(`../${$selectedScreen._id}/components/new`)}
>
Component
</Button>
</div>
</div>
<div class="content">
@ -59,6 +51,7 @@
justify-content: space-between;
align-items: flex-start;
gap: var(--spacing-l);
margin: 0 2px;
}
.header-left,
.header-right {

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
View file

@ -9,7 +9,7 @@
import { setContext } from "svelte"
import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
import { DropPosition } from "./dndStore"
import { Button, Layout } from "@budibase/bbui"
import { Button } from "@budibase/bbui"
let scrollRef
@ -64,7 +64,7 @@
<Panel title="Components" showExpandIcon borderRight>
<div class="add-component">
<Button on:click={() => $goto("../new")} cta>Add component</Button>
<Button on:click={() => $goto("./new")} cta>Add component</Button>
</div>
<div class="nav-items-container" bind:this={scrollRef}>
<ul>

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
View file

@ -4,6 +4,8 @@
import * as routify from "@roxi/routify"
import { onDestroy } from "svelte"
import { findComponent } from "builderStore/componentUtils"
import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
// Keep URL and state in sync for selected component ID
const stopSyncing = syncURLToState({
@ -18,4 +20,6 @@
onDestroy(stopSyncing)
</script>
<ComponentListPanel />
<ComponentSettingsPanel />
<slot />

11
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
View file

@ -1,7 +1,4 @@
<script>
import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
</script>
<ComponentListPanel />
<ComponentSettingsPanel />
<!--
Placeholder file so that routify works.
No unique content is needed in this index page.
-->

145
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
View file

@ -15,6 +15,7 @@
import structure from "./componentStructure.json"
import { store, selectedComponent } from "builderStore"
import { onMount } from "svelte"
import { fly } from "svelte/transition"
let section = "components"
let searchString
@ -150,75 +151,95 @@
})
</script>
<Panel
title="Add component"
showBackButton
onClickBackButton={() => $goto("../slot")}
borderRight
>
<Layout paddingX="L" paddingY="XL" gap="S">
<Search
placeholder="Search"
value={searchString}
on:change={e => (searchString = e.detail)}
bind:inputRef={searchRef}
/>
{#if !searchString}
<ActionGroup compact justified>
<ActionButton
fullWidth
selected={section === "components"}
on:click={() => (section = "components")}>Components</ActionButton
>
<ActionButton
fullWidth
selected={section === "blocks"}
on:click={() => (section = "blocks")}>Blocks</ActionButton
>
</ActionGroup>
{/if}
</Layout>
<div>
<Divider noMargin noGrid />
</div>
{#if searchString || section === "components"}
{#each filteredStructure as category}
<DetailSummary name={category.name} collapsible={false}>
<div class="component-grid">
{#each category.children as component}
<div class="new-component" transition:fly|local={{ x: 260 }}>
<Panel
title="Add component"
showCloseButton
onClickCloseButton={() => $goto("../")}
borderLeft
>
<Layout paddingX="L" paddingY="XL" gap="S">
<Search
placeholder="Search"
value={searchString}
on:change={e => (searchString = e.detail)}
bind:inputRef={searchRef}
/>
{#if !searchString}
<ActionGroup compact justified>
<ActionButton
fullWidth
selected={section === "components"}
on:click={() => (section = "components")}>Components</ActionButton
>
<ActionButton
fullWidth
selected={section === "blocks"}
on:click={() => (section = "blocks")}>Blocks</ActionButton
>
</ActionGroup>
{/if}
</Layout>
<div>
<Divider noMargin noGrid />
</div>
{#if searchString || section === "components"}
{#if filteredStructure.length}
{#each filteredStructure as category}
<DetailSummary name={category.name} collapsible={false}>
<div class="component-grid">
{#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)}
on:mouseover={() => (selectedIndex = null)}
>
<Icon name={component.icon} />
<Body size="XS">{component.name}</Body>
</div>
{/each}
</div>
</DetailSummary>
{/each}
{:else}
<Layout paddingY="M" paddingX="L">
<Body size="S">
There aren't any components matching the current filter
</Body>
</Layout>
{/if}
{:else}
<Layout paddingX="L" paddingY="XL" gap="S">
<Body size="S">Blocks are collections of pre-built components</Body>
<Layout noPadding gap="XS">
{#each blocks as block}
<div
class="component"
class:wide={component.name?.length > 15}
class:selected={selectedIndex === orderMap[component.component]}
on:click={() => addComponent(component.component)}
on:mouseover={() => (selectedIndex = null)}
class="component block"
on:click={() => addComponent(block.component)}
>
<Icon name={component.icon} />
<Body size="XS">{component.name}</Body>
<Icon name={block.icon} />
<Body size="XS">{block.name}</Body>
</div>
{/each}
</div>
</DetailSummary>
{/each}
{:else}
<Layout paddingX="L" paddingY="XL" gap="S">
<Body size="S">Blocks are collections of pre-built components</Body>
<Layout noPadding gap="XS">
{#each blocks as block}
<div
class="component block"
on:click={() => addComponent(block.component)}
>
<Icon name={block.icon} />
<Body size="XS">{block.name}</Body>
</div>
{/each}
</Layout>
</Layout>
</Layout>
{/if}
</Panel>
{/if}
</Panel>
</div>
<style>
.new-component {
position: fixed;
right: 0;
z-index: 1;
height: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
}
.component-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json → packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
View file

5
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/index.svelte Normal file
View file

@ -0,0 +1,5 @@
<script>
import NewComponentPanel from "./_components/NewComponentPanel.svelte"
</script>
<NewComponentPanel />

21
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte
View file

@ -1,21 +0,0 @@
<script>
import Panel from "components/design/Panel.svelte"
import { Body, Layout } from "@budibase/bbui"
import { selectedComponent, selectedScreen, store } from "builderStore"
$: componentDefinition = store.actions.components.getDefinition(
$selectedComponent?._component
)
$: isScreen = $selectedComponent?._id === $selectedScreen?.props._id
$: title = isScreen ? "Screen" : $selectedComponent?._instanceName
$: position = componentDefinition?.hasChildren ? "inside" : "below"
</script>
<Panel {title} icon={componentDefinition?.icon} borderLeft>
<Layout paddingX="L" paddingY="XL">
<Body size="S">
Components that you add will be placed {position}
{title}
</Body>
</Layout>
</Panel>

26
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/index.svelte
View file

@ -1,26 +0,0 @@
<script>
import NewComponentPanel from "./_components/NewComponentPanel.svelte"
import NewComponentTargetPanel from "./_components/NewComponentTargetPanel.svelte"
import { onMount } from "svelte"
import { store, selectedComponent, selectedScreen } from "builderStore"
import { redirect } from "@roxi/routify"
// Select the screen slot as the target to add to, if no component
// is selected
onMount(() => {
if (!$selectedComponent) {
if ($selectedScreen) {
store.update(state => {
state.selectedComponentId = $selectedScreen.props._id
return state
})
} else {
// Otherwise go back out of the add screen
$redirect("../")
}
}
})
</script>
<NewComponentPanel />
<NewComponentTargetPanel />