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

Improve UI and state management around adding new components

This commit is contained in:
Andrew Kingston 2022-04-26 16:37:12 +01:00
parent 1f6c6dd1a0
commit 3ac278b77e
3 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/index.svelte
View File

@ -1,11 +1,14 @@
<script> <script>
import { selectedScreen } from "builderStore" import { selectedScreen, selectedComponent } from "builderStore"
import { onMount } from "svelte" import { onMount } from "svelte"
import { redirect } from "@roxi/routify" import { redirect } from "@roxi/routify"
onMount(() => { onMount(() => {
if ($selectedScreen) { if ($selectedComponent) {
// Select the screen slot if a screen exists // Navigate to the selected component if one exists
$redirect(`./${$selectedComponent._id}`)
} else if ($selectedScreen) {
// Otherwise the screen slot if a screen exists
$redirect(`./${$selectedScreen.props._id}`) $redirect(`./${$selectedScreen.props._id}`)
} else { } else {
// Otherwise go up so we can select a new valid screen // Otherwise go up so we can select a new valid screen

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

@ -1,10 +1,17 @@
<script> <script>
import SettingsPanel from "components/design/settings/SettingsPanel.svelte" import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
import { Body, Layout } from "@budibase/bbui" 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
</script> </script>
<SettingsPanel title="Screen" icon="WebPage"> <SettingsPanel {title} icon={componentDefinition?.icon}>
<Layout paddingX="L" paddingY="XL"> <Layout paddingX="L" paddingY="XL">
<Body>The component you add will be placed inside Screen</Body> <Body>The component you add will be placed inside {title}</Body>
</Layout> </Layout>
</SettingsPanel> </SettingsPanel>

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

@ -1,6 +1,25 @@
<script> <script>
import NewComponentPanel from "./_components/NewComponentPanel.svelte" import NewComponentPanel from "./_components/NewComponentPanel.svelte"
import NewComponentTargetPanel from "./_components/NewComponentTargetPanel.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> </script>
<NewComponentPanel /> <NewComponentPanel />