ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add actual component for screenslot placeholder

master
Andrew Kingston 6 years ago
parent
c8b1259964
commit
999b2ffb19
4 changed files with 38 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
  2. 20
      packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
  3. 31
      packages/standard-components/src/ScreenSlotPlaceholder.svelte
  4. 1
      packages/standard-components/src/index.js

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

@ -3,57 +3,17 @@
import { store } from "builderStore" import { store } from "builderStore"
import iframeTemplate from "./iframeTemplate" import iframeTemplate from "./iframeTemplate"
import { Screen } from "builderStore/store/screenTemplates/utils/Screen" import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
import { Component } from "builderStore/store/screenTemplates/utils/Component"
let iframe let iframe
// Styles for screenslot placeholder // Create screen slot placeholder for use when a page is selected rather
const headingStyle = { // than a screen
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)
const screenPlaceholder = new Screen() const screenPlaceholder = new Screen()
.name("Screen Placeholder") .name("Screen Placeholder")
.route("*") .route("*")
.component("@budibase/standard-components/container") .component("@budibase/standard-components/screenslotplaceholder")
.mainType("div")
.instanceName("Content Placeholder") .instanceName("Content Placeholder")
.normalStyle({
flex: "1 1 auto",
})
.addChild(container)
.json() .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 // Extract data to pass to the iframe
$: page = $store.pages[$store.currentPageName] $: page = $store.pages[$store.currentPageName]
@ -75,7 +35,7 @@
} }
} }
// Refrech the preview when required // Refresh the preview when required
$: refreshContent(previewData) $: refreshContent(previewData)
// Initialise the app when mounted // 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"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
<style> <style>
body, html { body, html {
height: 100%!important; height: 100% !important;
font-family: Inter !important; font-family: Inter !important;
margin: 0px!important; margin: 0px !important;
} }
*, *:before, *:after { *, *:before, *:after {
box-sizing: border-box; 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> </style>
<script src='/assets/budibase-client.js'></script> <script src='/assets/budibase-client.js'></script>
<script> <script>

31
packages/standard-components/src/ScreenSlotPlaceholder.svelte
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 newrow } from "./NewRow.svelte"
export { default as datepicker } from "./DatePicker.svelte" export { default as datepicker } from "./DatePicker.svelte"
export { default as icon } from "./Icon.svelte" export { default as icon } from "./Icon.svelte"
export { default as screenslotplaceholder } from "./ScreenSlotPlaceholder.svelte"
export * from "./charts" export * from "./charts"

Write Preview
Loading…
Cancel
Save