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

Add ability to copy components from legacy layouts for backwards compatibility

This commit is contained in:
Andrew Kingston 2022-05-12 10:43:01 +01:00
parent b041700ea8
commit e7605b65a9
4 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
View File

@ -1,5 +1,49 @@
<script> <script>
import Panel from "components/design/Panel.svelte" import Panel from "components/design/Panel.svelte"
import { store, selectedLayout } from "builderStore"
import { Layout, Body, Button, notifications } from "@budibase/bbui"
import { Component } from "builderStore/store/screenTemplates/utils/Component"
const copyLayout = () => {
// Build an outer container component to put layout contents inside
let container = new Component("@budibase/standard-components/container")
.instanceName($selectedLayout.name)
.customProps({
gap: "M",
direction: "column",
hAlign: "stretch",
vAlign: "top",
size: "shrink",
})
.json()
// Attach layout components
container._children = $selectedLayout.props._children
// Replace the screenslot component with a container. This is better than
// simply removing it as it still shows its position.
container = JSON.parse(
JSON.stringify(container).replace(
"@budibase/standard-components/screenslot",
"@budibase/standard-components/container"
)
)
// Copy new component structure
store.actions.components.copy(container)
notifications.success("Components copied successfully")
}
</script> </script>
<Panel title="Layout" borderLeft /> <Panel title={$selectedLayout?.name} icon="Experience" borderLeft>
<Layout paddingX="L" paddingY="XL" gap="S">
<Body size="S">
You can save the content of this layout by pressing the button below.
</Body>
<Body size="S">
This will copy all components inside your layout, which you can then paste
into a screen.
</Body>
<Button cta on:click={copyLayout}>Copy components</Button>
</Layout>
</Panel>

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

@ -6,8 +6,8 @@
onMount(() => { onMount(() => {
if ($store.layouts?.length) { if ($store.layouts?.length) {
$redirect(`./${$store.layouts[0]._id}`) $redirect(`./${$store.layouts[0]._id}`)
} else {
$redirect("../")
} }
}) })
</script> </script>
You don't have any layouts

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
View File

@ -30,11 +30,11 @@
<Panel title="Navigation" borderRight> <Panel title="Navigation" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingX="L" paddingY="XL" gap="S">
<Body size="S"> <Body size="S">
Your navigation is configured for all the screens within your app Your navigation is configured for all the screens within your app.
</Body> </Body>
<Body size="S"> <Body size="S">
You can hide and show your navigation for each screen in the screen You can hide and show your navigation for each screen in the screen
settings settings.
</Body> </Body>
<NavigationLinksEditor /> <NavigationLinksEditor />
<Layout noPadding gap="XS"> <Layout noPadding gap="XS">

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
View File

@ -49,7 +49,7 @@
<Panel title="Theme" borderRight> <Panel title="Theme" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingX="L" paddingY="XL" gap="S">
<Body size="S"> <Body size="S">
Your theme is set across all the screens within your app Your theme is set across all the screens within your app.
</Body> </Body>
<Layout noPadding gap="XS"> <Layout noPadding gap="XS">
<Label>Theme</Label> <Label>Theme</Label>