diff --git a/packages/builder/src/components/design/AppPanel/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/AppPanel.svelte
similarity index 100%
rename from packages/builder/src/components/design/AppPanel/AppPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/AppPanel.svelte
diff --git a/packages/builder/src/components/design/AppPanel/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/AppPreview.svelte
similarity index 94%
rename from packages/builder/src/components/design/AppPanel/AppPreview.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/AppPreview.svelte
index 2e117ecfb3..e87f2b2a49 100644
--- a/packages/builder/src/components/design/AppPanel/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/AppPreview.svelte
@@ -3,8 +3,6 @@
import { onMount, onDestroy } from "svelte"
import { store, selectedScreen, currentAsset } from "builderStore"
import iframeTemplate from "./iframeTemplate"
- import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
- import { FrontendTypes } from "constants"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import {
ProgressCircle,
@@ -24,17 +22,8 @@
let loading = true
let error
- // Create screen slot placeholder for use when a page is selected rather
- // than a screen
- const screenPlaceholder = new Screen()
- .name("Screen Placeholder")
- .route("*")
- .component("@budibase/standard-components/screenslot")
- .instanceName("Content Placeholder")
- .json()
-
// Messages that can be sent from the iframe preview to the builder
- // Budibase events are and initalisation events
+ // Budibase events are and initialisation events
const MessageTypes = {
READY: "ready",
ERROR: "error",
diff --git a/packages/builder/src/components/design/AppPanel/DevicePreviewSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/DevicePreviewSelect.svelte
similarity index 100%
rename from packages/builder/src/components/design/AppPanel/DevicePreviewSelect.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/DevicePreviewSelect.svelte
diff --git a/packages/builder/src/components/design/AppPanel/iframeTemplate.js b/packages/builder/src/pages/builder/app/[application]/design/_components/iframeTemplate.js
similarity index 100%
rename from packages/builder/src/components/design/AppPanel/iframeTemplate.js
rename to packages/builder/src/pages/builder/app/[application]/design/_components/iframeTemplate.js
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
index a29749472c..90bdf616c7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
@@ -1,6 +1,7 @@
@@ -64,4 +66,17 @@
align-items: stretch;
flex: 1 1 auto;
}
+ /*
+ This is hacky, yes, but it's the only way to prevent routify from
+ remounting the iframe on route changes.
+ */
+ .content :global(> *:last-child) {
+ order: 1;
+ }
+ .content :global(> *:first-child) {
+ order: 0;
+ }
+ .content :global(> *:nth-child(2)) {
+ order: 2;
+ }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte
index 2509c3d215..f24897f658 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte
@@ -1,9 +1,7 @@
-
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte
index 8127a6b095..ac287edf6f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte
@@ -1,7 +1,5 @@
-
diff --git a/packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte b/packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte
index f88314521f..ad7a9da648 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte
@@ -3,7 +3,6 @@
import { onDestroy } from "svelte"
import { syncURLToState } from "helpers/urlStateSync"
import { goto, params, redirect } from "@roxi/routify"
- import AppPanel from "components/design/AppPanel/AppPanel.svelte"
import ScreenNavigationPanel from "./_components/ScreenNavigationPanel.svelte"
import ScreenSettingsPanel from "./_components/ScreenSettingsPanel.svelte"
@@ -27,5 +26,4 @@
-
diff --git a/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte
index 0d0366d924..0ffd2d5748 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte
@@ -36,7 +36,7 @@
}
const setScreenSetting = (setting, value) => {
- const { name, parser, validate } = setting
+ const { key, parser, validate } = setting
// Parse value if required
if (parser) {
@@ -48,7 +48,7 @@
const error = validate(value)
errors = {
...errors,
- [name]: error,
+ [key]: error,
}
if (error) {
return
@@ -56,13 +56,13 @@
} else {
errors = {
...errors,
- [name]: null,
+ [key]: null,
}
}
// Update screen object in store
store.update(state => {
- setWith(get(selectedScreen), name.split("."), value, Object)
+ setWith(get(selectedScreen), key.split("."), value, Object)
return state
})
diff --git a/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
index ef86bcdc20..f21267d810 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
@@ -1,7 +1,6 @@
@@ -11,5 +10,3 @@
-
-