Add ability to copy components from legacy layouts for backwards compatibility

4 years ago · e7605b65a9
4 changed files with 50 additions and 6 deletions
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
@ -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>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
@ -6,8 +6,8 @@
  onMount(() => {
    if ($store.layouts?.length) {
      $redirect(`./${$store.layouts[0]._id}`)
+    } else {
+      $redirect("../")
    }
  })
 </script>
-
-You don't have any layouts
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
@ -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">
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
@ -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>