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
parent
ef83fe50d8
commit
40a0310696
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,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 />
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -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,11 +151,12 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
<div class="new-component" transition:fly|local={{ x: 260 }}>
|
||||
<Panel
|
||||
title="Add component"
|
||||
showBackButton
|
||||
onClickBackButton={() => $goto("../slot")}
|
||||
borderRight
|
||||
showCloseButton
|
||||
onClickCloseButton={() => $goto("../")}
|
||||
borderLeft
|
||||
>
|
||||
<Layout paddingX="L" paddingY="XL" gap="S">
|
||||
<Search
|
||||
|
|
@ -182,6 +184,7 @@
|
|||
<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">
|
||||
|
|
@ -189,7 +192,8 @@
|
|||
<div
|
||||
class="component"
|
||||
class:wide={component.name?.length > 15}
|
||||
class:selected={selectedIndex === orderMap[component.component]}
|
||||
class:selected={selectedIndex ===
|
||||
orderMap[component.component]}
|
||||
on:click={() => addComponent(component.component)}
|
||||
on:mouseover={() => (selectedIndex = null)}
|
||||
>
|
||||
|
|
@ -200,6 +204,13 @@
|
|||
</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>
|
||||
|
|
@ -217,8 +228,18 @@
|
|||
</Layout>
|
||||
{/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,0 +1,5 @@
|
|||
<script>
|
||||
import NewComponentPanel from "./_components/NewComponentPanel.svelte"
|
||||
</script>
|
||||
|
||||
<NewComponentPanel />
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 />
|
||||
Loading…
Reference in New Issue