CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-29 11:31:06 +12:00
Code Issues Projects Releases Wiki Activity
budibase/packages/builder/src/components/userInterface/CurrentItemPreview.svelte

149 lines
3.8 KiB
Svelte
Raw Normal View History

component preview sort of working
2019-08-20 08:18:23 +12:00
<script>
updates imports and finishes moving all commonly used files to the node_modules folder
2020-04-01 00:16:03 +13:00
import { store, backendUiStore } from "builderStore"
merging with master
2020-02-12 05:36:16 +13:00
import { map, join } from "lodash/fp"
updates imports and finishes moving all commonly used files to the node_modules folder
2020-04-01 00:16:03 +13:00
import { pipe } from "components/common/core"
array component
2019-09-03 21:42:19 +12:00
merging with master
2020-02-12 05:36:16 +13:00
let iframe
48 builder frontend 2 (#76) * Implement collapsing component hierarchy. * Save screen when adding new components. * Allow creation of nested child components. * Rename updateComponentProps to setComponentProps * Compile layout and position properties to css strings. * Correct ordering errors. * Compile the css for an entire screen. * Add unique id for each component. * Ignore _id props. * Update client to add correct class names to component elements. * Add grid-template fields to layout styling panel. * Inject css into iframe. Minor tweaks. * Fix unset margins. * Update failing tests.
2020-02-01 05:01:58 +13:00
merging with master
2020-02-12 05:36:16 +13:00
function transform_component(comp) {
const props = comp.props || comp
if (props && props._children && props._children.length) {
props._children = props._children.map(transform_component)
}
48 builder frontend 2 (#70) * Implement collapsing component hierarchy. * Save screen when adding new components. * Allow creation of nested child components. * Fix level-based indentation of hierarchy. * Rename updateComponentProps to setComponentProps * Save layout information to the disk. * Cleanup: switch to autosubscriptions to prevent memory leaks, remove unused imports. * Remove unused css. * Fix incorrect subscription.
2020-01-29 10:17:04 +13:00
merging with master
2020-02-12 05:36:16 +13:00
return props
}
Builder saves backend and front end seperately (#88) * refactoring server for screens & page layout restructure * Disable API calls, UI placeholders. * buildPropsHierarchy is gone & screen has url * Recent changes. * router * router * updated git-ignore to reinclude server/utilities/builder * modified cli - budi new create new file structure * Fix uuid import. * prettier fixes * prettier fixes * prettier fixes * page/screen restructure.. broken tests * all tests passing at last * screen routing tests * Working screen editor and preview. * Render page previews to the screen. * Key input lists to ensure new array references when updating styles. * Ensure the iframe html and body fills the container. * Save screens via the API. * Get all save APIs almost working. * Write pages.json to disk. * Use correct API endpoint for saving styles. * Differentiate between saving properties of screens and pages. * Add required fields to default pages layouts. * Add _css default property to newly created screens. * Add default code property. * page layout / screens - app output * backend and fronend save seperately Co-authored-by: pngwn <pnda007@gmail.com>
2020-02-11 10:35:51 +13:00
merging with master
2020-02-12 05:36:16 +13:00
$: iframe &&
console.log(
iframe.contentDocument.head.insertAdjacentHTML(
"beforeend",
`<\style></style>`
)
)
$: hasComponent = !!$store.currentPreviewItem
$: styles = hasComponent ? $store.currentPreviewItem._css : ""
component preview sort of working
2019-08-20 08:18:23 +12:00
merging with master
2020-02-12 05:36:16 +13:00
$: stylesheetLinks = pipe(
$store.pages.stylesheets,
[map(s => `<link rel="stylesheet" href="${s}"/>`), join("\n")]
)
state binding v1
2020-02-11 05:58:20 +13:00
show screenslot if there's no screens
2020-04-07 04:06:04 +12:00
$: screensExist = $store.currentPreviewItem._screens && $store.currentPreviewItem._screens.length > 0
merging with master
2020-02-12 05:36:16 +13:00
$: frontendDefinition = {
bugfixes... incorrect routing from builder to instances
2020-03-12 05:42:19 +13:00
componentLibraries: $store.loadLibraryUrls($store.currentPageName),
merging with master
2020-02-12 05:36:16 +13:00
page: $store.currentPreviewItem,
show screenslot if there's no screens
2020-04-07 04:06:04 +12:00
screens: screensExist ? $store.currentPreviewItem._screens : [{
Add screenslot to current preview.
2020-02-19 04:53:22 +13:00
name: "Screen Placeholder",
route: "*",
props: {
_component: "@budibase/standard-components/container",
type: "div",
_children: [
{
_component: "@budibase/standard-components/container",
_styles: { "position": {},"layout": {} },
_id: "__screenslot__text",
_code: "",
className: "",
onLoad: [],
type: "div",
_children: [{
_component:"@budibase/standard-components/text",
_styles: { "position": {}, "layout": {} },
Ensure slot renders in current preview.
2020-02-19 06:00:56 +13:00
_id: "__screenslot__text_2",
Add screenslot to current preview.
2020-02-19 04:53:22 +13:00
_code: "",
text: "content",
font: "",
color: "",
textAlign: "inline",
verticalAlign: "inline",
formattingTag: "none"
}]
}
]
}
}],
showing correct front end elements for selected database
2020-03-28 01:38:27 +13:00
appRootPath: `/_builder/instance/${$store.appname}/${$backendUiStore.selectedDatabase.id}/`,
merging with master
2020-02-12 05:36:16 +13:00
}
$: backendDefinition = {
hierarchy: $store.hierarchy,
}
Page Layout & Screen restructure (#87) * refactoring server for screens & page layout restructure * Disable API calls, UI placeholders. * buildPropsHierarchy is gone & screen has url * Recent changes. * router * router * updated git-ignore to reinclude server/utilities/builder * modified cli - budi new create new file structure * Fix uuid import. * prettier fixes * prettier fixes * prettier fixes * page/screen restructure.. broken tests * all tests passing at last * screen routing tests * Working screen editor and preview. * Render page previews to the screen. * Key input lists to ensure new array references when updating styles. * Ensure the iframe html and body fills the container. * Save screens via the API. * Get all save APIs almost working. * Write pages.json to disk. * Use correct API endpoint for saving styles. * Differentiate between saving properties of screens and pages. * Add required fields to default pages layouts. * Add _css default property to newly created screens. * Add default code property. * page layout / screens - app output Co-authored-by: pngwn <pnda007@gmail.com>
2020-02-11 04:51:09 +13:00
lerna version
2020-02-22 07:06:23 +13:00
$: selectedComponentId = $store.currentComponentInfo ? $store.currentComponentInfo._id : ""
merging with master
2020-02-12 05:36:16 +13:00
</script>
<div class="component-container">
{#if hasComponent && $store.currentPreviewItem}
<iframe
style="height: 100%; width: 100%"
title="componentPreview"
bind:this={iframe}
srcdoc={`<html>
<head>
state binding v1
2020-02-11 05:58:20 +13:00
${stylesheetLinks}
Ensure slot renders in current preview.
2020-02-19 06:00:56 +13:00
merging with master
2020-02-12 05:36:16 +13:00
<style>
${styles || ''}
state management bindings
2020-02-21 09:19:24 +13:00
.pos-${selectedComponentId} {
All latest changes coming from the builder testing
2020-04-15 01:15:32 +12:00
border: 2px solid #0055ff;
state management bindings
2020-02-21 09:19:24 +13:00
}
merging with master
2020-02-12 05:36:16 +13:00
body, html {
height: 100%!important;
}
Ensure slot renders in current preview.
2020-02-19 06:00:56 +13:00
.lay-__screenslot__text {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
border: dashed 2px #ccc;
font-family: sans-serif;
font-size: 1.2rem;
color: #999;
text-transform: uppercase;
font-weight: bold;
}
merging with master
2020-02-12 05:36:16 +13:00
<\/style>
<\script>
window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${JSON.stringify(frontendDefinition)};
window["##BUDIBASE_BACKEND_DEFINITION##"] = ${JSON.stringify(backendDefinition)};
typo: UIFunctions attached to page not screen
2020-02-25 03:56:49 +13:00
window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${$store.currentPageFunctions};
merging with master
2020-02-12 05:36:16 +13:00
Page Layout & Screen restructure (#87) * refactoring server for screens & page layout restructure * Disable API calls, UI placeholders. * buildPropsHierarchy is gone & screen has url * Recent changes. * router * router * updated git-ignore to reinclude server/utilities/builder * modified cli - budi new create new file structure * Fix uuid import. * prettier fixes * prettier fixes * prettier fixes * page/screen restructure.. broken tests * all tests passing at last * screen routing tests * Working screen editor and preview. * Render page previews to the screen. * Key input lists to ensure new array references when updating styles. * Ensure the iframe html and body fills the container. * Save screens via the API. * Get all save APIs almost working. * Write pages.json to disk. * Use correct API endpoint for saving styles. * Differentiate between saving properties of screens and pages. * Add required fields to default pages layouts. * Add _css default property to newly created screens. * Add default code property. * page layout / screens - app output Co-authored-by: pngwn <pnda007@gmail.com>
2020-02-11 04:51:09 +13:00
import('/_builder/budibase-client.esm.mjs')
.then(module => {
module.loadBudibase({ window, localStorage });
})
merging with master
2020-02-12 05:36:16 +13:00
<\/script>
</head>
<body>
</body>
</html>`} />
{/if}
component preview sort of working
2019-08-20 08:18:23 +12:00
</div>
<style>
merging with master
2020-02-12 05:36:16 +13:00
.component-container {
grid-row-start: middle;
grid-column-start: middle;
position: relative;
overflow: hidden;
padding-top: 56.25%;
margin: auto;
}
48 builder frontend 2 (#70) * Implement collapsing component hierarchy. * Save screen when adding new components. * Allow creation of nested child components. * Fix level-based indentation of hierarchy. * Rename updateComponentProps to setComponentProps * Save layout information to the disk. * Cleanup: switch to autosubscriptions to prevent memory leaks, remove unused imports. * Remove unused css. * Fix incorrect subscription.
2020-01-29 10:17:04 +13:00
merging with master
2020-02-12 05:36:16 +13:00
.component-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Add screenslot to current preview.
2020-02-19 04:53:22 +13:00
</style>
Reference in a new issue Copy permalink