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

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

This commit is contained in:
Andrew Kingston 2022-07-25 10:20:59 +01:00
parent ef83fe50d8
commit 40a0310696
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 />