diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index c9fe02e786..243817dfda 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -3,57 +3,17 @@
import { store } from "builderStore"
import iframeTemplate from "./iframeTemplate"
import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
- import { Component } from "builderStore/store/screenTemplates/utils/Component"
let iframe
- // Styles for screenslot placeholder
- const headingStyle = {
- width: "500px",
- padding: "8px",
- }
- const textStyle = {
- ...headingStyle,
- "max-width": "",
- "text-align": "left",
- }
-
- const heading = new Component("@budibase/standard-components/heading")
- .normalStyle(headingStyle)
- .type("h1")
- .text("Screen Slot")
- .instanceName("Heading")
- const textScreenDisplay = new Component("@budibase/standard-components/text")
- .normalStyle(textStyle)
- .instanceName("Text")
- .type("none")
- .text(
- "The screens that you create will be displayed inside this box. This box is just a placeholder, to show you the position of screens."
- )
- const container = new Component("@budibase/standard-components/container")
- .normalStyle({
- display: "flex",
- "flex-direction": "column",
- "align-items": "center",
- flex: "1 1 auto",
- })
- .type("div")
- .instanceName("Container")
- .addChild(heading)
- .addChild(textScreenDisplay)
+ // 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/container")
- .mainType("div")
+ .component("@budibase/standard-components/screenslotplaceholder")
.instanceName("Content Placeholder")
- .normalStyle({
- flex: "1 1 auto",
- })
- .addChild(container)
.json()
- // TODO: this ID is attached to how the screen slot is rendered, confusing, would be better a type etc
- screenPlaceholder.props._id = "screenslot-placeholder"
// Extract data to pass to the iframe
$: page = $store.pages[$store.currentPageName]
@@ -75,7 +35,7 @@
}
}
- // Refrech the preview when required
+ // Refresh the preview when required
$: refreshContent(previewData)
// Initialise the app when mounted
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index 2b12267a85..2d25aea92b 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -4,29 +4,13 @@ export default `
+
+
+
Screen Slot
+
+ The screens that you create will be displayed inside this box.
+
+ This box is just a placeholder, to show you the position of screens.
+
+
+
+
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index bc1fab539a..51f53956fa 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -23,4 +23,5 @@ export { default as rowdetail } from "./RowDetail.svelte"
export { default as newrow } from "./NewRow.svelte"
export { default as datepicker } from "./DatePicker.svelte"
export { default as icon } from "./Icon.svelte"
+export { default as screenslotplaceholder } from "./ScreenSlotPlaceholder.svelte"
export * from "./charts"