diff --git a/packages/builder/package.json b/packages/builder/package.json index 65072a9f0f..8fe9ffd494 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "@beyonk/svelte-notifications": "^2.0.3", - "@budibase/bbui": "^0.3.5", + "@budibase/bbui": "^1.1.1", "@budibase/client": "^0.0.32", "@nx-js/compiler-util": "^2.0.0", "codemirror": "^5.51.0", @@ -86,4 +86,4 @@ "svelte": "3.23.x" }, "gitHead": "115189f72a850bfb52b65ec61d932531bf327072" -} +} \ No newline at end of file diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index ac66643612..9f91550bca 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -69,7 +69,6 @@ export const getStore = () => { store.getPathToComponent = getPathToComponent(store) store.addTemplatedComponent = addTemplatedComponent(store) store.setMetadataProp = setMetadataProp(store) - store.editPageOrScreen = editPageOrScreen(store) return store } @@ -172,15 +171,6 @@ const createScreen = store => (screenName, route, layoutComponentName) => { }) } -const editPageOrScreen = store => (key, value) => { - store.update(state => { - state.currentPreviewItem[key] = value - _saveCurrentPreviewItem(state) - - return state - }) -} - const setCurrentScreen = store => screenName => { store.update(s => { const screen = getExactComponent(s.screens, screenName) @@ -295,7 +285,6 @@ const setCurrentPage = store => pageName => { state.currentFrontEndType = "page" state.currentPageName = pageName - state.currentView = "detail" state.screens = Array.isArray(current_screens) ? current_screens : Object.values(current_screens) @@ -456,7 +445,6 @@ const setScreenType = store => type => { state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null state.currentPreviewItem = pageOrScreen - state.currentView = "detail" return state }) } diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte index 3be9f17b16..e5fed68103 100644 --- a/packages/builder/src/components/common/Inputs/InputGroup.svelte +++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte @@ -10,18 +10,18 @@ export let onChange = () => {} function handleChange(val, idx) { - value.splice(idx, 1, val !== "auto" ? val + suffix : val) + value.splice(idx, 1, val !== "auto" && suffix ? val + suffix : val) value = value let _value = value.map(v => - !v.endsWith(suffix) && v !== "auto" ? v + suffix : v + suffix && !v.endsWith(suffix) && v !== "auto" ? v + suffix : v ) onChange(_value) } - $: displayValues = value + $: displayValues = value && suffix ? value.map(v => v.replace(new RegExp(`${suffix}$`), "")) - : [] + : value || []
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index a7288c8c91..53450c2200 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -21,14 +21,48 @@ return componentName || "element" } - $: iframe && - console.log( - iframe.contentDocument.head.insertAdjacentHTML( - "beforeend", - `<\style>` - ) - ) + const screenPlaceholder = { + name: "Screen Placeholder", + route: "*", + props: { + _component: "@budibase/standard-components/container", + type: "div", + _children: [ + { + _component: "@budibase/standard-components/container", + _styles: { normal: {}, hover: {}, active: {}, selected: {} }, + _id: "__screenslot__text", + _code: "", + className: "", + onLoad: [], + type: "div", + _children: [ + { + _component: "@budibase/standard-components/text", + _styles: { + normal: {}, + hover: {}, + active: {}, + selected: {}, + }, + _id: "__screenslot__text_2", + _code: "", + text: "content", + font: "", + color: "", + textAlign: "inline", + verticalAlign: "inline", + formattingTag: "none", + }, + ], + }, + ], + }, + } + + $: hasComponent = !!$store.currentPreviewItem + $: { styles = "" // Apply the CSS from the currently selected page and its screens @@ -52,49 +86,12 @@ $: frontendDefinition = { appId: $store.appId, libraries: $store.libraries, - page: $store.currentPreviewItem, - screens: screensExist - ? $store.currentPreviewItem._screens - : [ - { - name: "Screen Placeholder", - route: "*", - props: { - _component: "@budibase/standard-components/container", - type: "div", - _children: [ - { - _component: "@budibase/standard-components/container", - _styles: { normal: {}, hover: {}, active: {}, selected: {} }, - _id: "__screenslot__text", - _code: "", - className: "", - onLoad: [], - type: "div", - _children: [ - { - _component: "@budibase/standard-components/text", - _styles: { - normal: {}, - hover: {}, - active: {}, - selected: {}, - }, - _id: "__screenslot__text_2", - _code: "", - text: "content", - font: "", - color: "", - textAlign: "inline", - verticalAlign: "inline", - formattingTag: "none", - }, - ], - }, - ], - }, - }, - ], + page: $store.pages[$store.currentPageName], + screens: [ + $store.currentFrontEndType === "page" + ? screenPlaceholder + : $store.currentPreviewItem, + ], appRootPath: "", } @@ -103,6 +100,22 @@ $: selectedComponentId = $store.currentComponentInfo ? $store.currentComponentInfo._id : "" + + const refreshContent = () => { + iframe.contentWindow.postMessage(JSON.stringify({ + styles, + stylesheetLinks, + selectedComponentType, + selectedComponentId, + frontendDefinition, + })) + } + + $: if(iframe) iframe.contentWindow.addEventListener("bb-ready", refreshContent, { once: true }) + + $: if(iframe && frontendDefinition) { + refreshContent() + }
@@ -111,13 +124,7 @@ style="height: 100%; width: 100%" title="componentPreview" bind:this={iframe} - srcdoc={iframeTemplate({ - styles, - stylesheetLinks, - selectedComponentType, - selectedComponentId, - frontendDefinition: JSON.stringify(frontendDefinition), - })} /> + srcdoc={iframeTemplate} /> {/if}
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js index 462becb32f..3d305f1c1d 100644 --- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js +++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js @@ -1,20 +1,6 @@ -export default ({ - styles, - stylesheetLinks, - selectedComponentType, - selectedComponentId, - frontendDefinition, -}) => ` +export default ` - ${stylesheetLinks} - diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 71a5c019fc..bfe5507256 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -1,6 +1,5 @@ -
-
(show = !show)}> -
- -
-
{capitalize(name)}
-
-
- - {#each properties as props} - onStyleChanged(styleCategory, key, value)} - props={{ ...excludeProps(props, ['control', 'label']) }} /> - {/each} -
-
- - + + {#each properties as props} + onStyleChanged(styleCategory, key, value)} + props={{ ...excludeProps(props, ['control', 'label']) }} /> + {/each} + diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index a3438a4e4f..99e704d1d9 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -9,10 +9,7 @@ export let componentInstance = {} export let onChange = () => {} - - let pageScreenProps = ["title","favicon", "description", "route"] - - const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props + const propExistsOnComponentDef = prop => prop in componentDefinition.props function handleChange(key, data) { data.target ? onChange(key, data.target.value) : onChange(key, data) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 259324fb6d..38ef0558e4 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -2,16 +2,10 @@ import Input from "../common/Input.svelte" import OptionSelect from "./OptionSelect.svelte" import InputGroup from "../common/Inputs/InputGroup.svelte" import FlatButtonGroup from "./FlatButtonGroup.svelte" - -export const screen = [ - { label: "Description", key: "description", control: Input }, - { label: "Route", key: "route", control: Input }, -] - -export const page = [ - { label: "Title", key: "title", control: Input }, - { label: "Favicon", key: "favicon", control: Input }, -] +// import Colorpicker from "../common/Colorpicker.svelte" +/* + TODO: Allow for default values for all properties +*/ export const layout = [ { @@ -90,7 +84,6 @@ export const spacing = [ key: "margin", control: InputGroup, meta: spacingMeta, - suffix: "px", defaultValue: ["0", "0", "0", "0"], }, { @@ -98,7 +91,6 @@ export const spacing = [ key: "padding", control: InputGroup, meta: spacingMeta, - suffix: "px", defaultValue: ["0", "0", "0", "0"], }, ] @@ -109,7 +101,6 @@ export const size = [ key: "width", control: Input, placeholder: "px", - suffix: "px", width: "48px", textAlign: "center", }, @@ -118,7 +109,6 @@ export const size = [ key: "height", control: Input, placeholder: "px", - suffix: "px", width: "48px", textAlign: "center", }, @@ -127,7 +117,6 @@ export const size = [ key: "min-width", control: Input, placeholder: "px", - suffix: "px", width: "48px", textAlign: "center", }, @@ -135,7 +124,6 @@ export const size = [ label: "Min H", key: "min-height", control: Input, - suffix: "px", placeholder: "px", width: "48px", textAlign: "center", @@ -145,7 +133,6 @@ export const size = [ key: "max-width", control: Input, placeholder: "px", - suffix: "px", width: "48px", textAlign: "center", }, @@ -154,7 +141,6 @@ export const size = [ key: "max-height", control: Input, placeholder: "px", - suffix: "px", width: "48px", textAlign: "center", }, diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte index 2eec749c8f..4d2a708f1e 100644 --- a/packages/builder/src/pages/[application]/_reset.svelte +++ b/packages/builder/src/pages/[application]/_reset.svelte @@ -62,7 +62,7 @@ (location = `/${application}`)}> + on:click={() => window.open(`/${application}`)}>
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte index 09e1254379..f8a0d1d244 100644 --- a/packages/builder/src/pages/_layout.svelte +++ b/packages/builder/src/pages/_layout.svelte @@ -1,5 +1,6 @@