MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add actual component for screenslot placeholder

This commit is contained in:
Andrew Kingston 2020-11-23 14:27:45 +00:00
parent e3fe891053
commit 74fdd36bce
4 changed files with 38 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View File

@ -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

20
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View File

@ -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>

31
packages/standard-components/src/ScreenSlotPlaceholder.svelte Normal file
View File

@ -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>

1
packages/standard-components/src/index.js
View File

@ -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"