From 74fdd36bcebe381f9cbf937d2102b32a021f933c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 23 Nov 2020 14:27:45 +0000 Subject: [PATCH] Add actual component for screenslot placeholder --- .../AppPreview/CurrentItemPreview.svelte | 48 ++----------------- .../AppPreview/iframeTemplate.js | 20 +------- .../src/ScreenSlotPlaceholder.svelte | 31 ++++++++++++ packages/standard-components/src/index.js | 1 + 4 files changed, 38 insertions(+), 62 deletions(-) create mode 100644 packages/standard-components/src/ScreenSlotPlaceholder.svelte 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"