Add actual component for screenslot placeholder

6 years ago · 999b2ffb19
4 changed files with 38 additions and 62 deletions
--- 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
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@ -4,29 +4,13 @@ export default `<html>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
    <style>
      body, html {
-        height: 100%!important;
+        height: 100% !important;
        font-family: Inter !important;
-        margin: 0px!important;
+        margin: 0px !important;
      }
      *, *:before, *:after {
        box-sizing: border-box;
      }
-      [data-bb-id="screenslot-placeholder"] {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 20px;
-        text-align: center;
-        border-style: dashed !important;
-        border-width: 1px;
-        color: #000000;
-        background-color: rgba(0, 0, 0, 0.05);
-        flex: 1 1 auto;
-      }
-      [data-bb-id="screenslot-placeholder"] span {
-        display: block;
-        margin-bottom: 10px;
-      }
    </style>
    <script src='/assets/budibase-client.js'></script>
    <script>
--- a/packages/standard-components/src/ScreenSlotPlaceholder.svelte
+++ b/packages/standard-components/src/ScreenSlotPlaceholder.svelte
@ -0,0 +1,31 @@
+<script>
+  import { getContext } from "svelte"
+
+  const styles = getContext("style")
+  const { styleable } = getContext("sdk")
+</script>
+
+<div use:styleable={styles}>
+  <h1>Screen Slot</h1>
+  <span>
+    The screens that you create will be displayed inside this box.
+    <br />
+    This box is just a placeholder, to show you the position of screens.
+  </span>
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    text-align: center;
+    border-style: dashed !important;
+    border-width: 1px;
+    color: #000000;
+    background-color: rgba(0, 0, 0, 0.05);
+    flex: 1 1 auto;
+  }
+</style>
--- 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"