CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-08 07:46:10 +12:00
Code Issues Projects Releases Wiki Activity

Add ability to copy components from legacy layouts for backwards compatibility

Browse source
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>
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>
<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(() => {
if ($store.layouts?.length) {
$redirect(`./${$store.layouts[0]._id}`)
} else {
$redirect("../")
}
})
</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>
<Layout paddingX="L" paddingY="XL" gap="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 size="S">
You can hide and show your navigation for each screen in the screen
settings
settings.
</Body>
<NavigationLinksEditor />
<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>
<Layout paddingX="L" paddingY="XL" gap="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>
<Layout noPadding gap="XS">
<Label>Theme</Label>