From 5f7940d9a129f31f51fc16f26d31830ccefd5a51 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 12 May 2022 09:42:25 +0100 Subject: [PATCH] Render screenslot when showing legacy layouts and remove concept of preview type --- .../builder/src/builderStore/store/frontend.js | 11 +---------- .../[screenId]/_components/AppPreview.svelte | 14 +++++++++++--- .../[screenId]/_components/iframeTemplate.js | 2 -- packages/client/src/components/ClientApp.svelte | 2 +- packages/client/src/components/Component.svelte | 6 ++---- packages/client/src/index.js | 1 - packages/client/src/stores/builder.js | 1 - packages/client/src/stores/components.js | 4 ++-- 8 files changed, 17 insertions(+), 24 deletions(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 286e44d868..285e4607a3 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -42,7 +42,6 @@ const INITIAL_FRONTEND_STATE = { messagePassing: false, continueIfAction: false, }, - currentFrontEndType: "none", errors: [], hasAppPackage: false, libraries: null, @@ -191,7 +190,6 @@ export const getFrontendStore = () => { screens.find(screen => screen._id === screenId) || screens[0] if (!screen) return state - state.currentFrontEndType = FrontendTypes.SCREEN state.selectedScreenId = screen._id state.currentView = "detail" state.selectedComponentId = screen.props?._id @@ -287,13 +285,8 @@ export const getFrontendStore = () => { }, preview: { saveSelected: async () => { - const state = get(store) const selectedAsset = get(currentAsset) - if (state.currentFrontEndType !== FrontendTypes.LAYOUT) { - return await store.actions.screens.save(selectedAsset) - } else { - return await store.actions.layouts.save(selectedAsset) - } + return await store.actions.screens.save(selectedAsset) }, setDevice: device => { store.update(state => { @@ -308,8 +301,6 @@ export const getFrontendStore = () => { const layout = store.actions.layouts.find(layoutId) || get(store).layouts[0] if (!layout) return - state.currentFrontEndType = FrontendTypes.LAYOUT - state.currentView = "detail" state.selectedLayoutId = layout._id state.selectedComponentId = layout.props?._id return state diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index 38ad9b73b7..b4dbf715a4 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -19,6 +19,7 @@ import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw" import { findComponent, findComponentPath } from "builderStore/componentUtils" import { isActive, goto } from "@roxi/routify" + import { Screen } from "builderStore/store/screenTemplates/utils/Screen" let iframe let layout @@ -42,14 +43,22 @@ $store.clientLibPath ) + const placeholderScreen = new Screen() + .name("Screen Placeholder") + .route("/") + .component("@budibase/standard-components/screenslot") + .instanceName("Content Placeholder") + .normalStyle({ flex: "1 1 auto" }) + .json() + // Extract data to pass to the iframe $: { - screen = $selectedScreen - // If viewing legacy layouts, always show the custom layout if ($isActive("./layouts")) { + screen = placeholderScreen layout = $selectedLayout } else { + screen = $selectedScreen layout = $store.layouts.find(layout => layout._id === screen?.layoutId) } } @@ -63,7 +72,6 @@ layout, screen, selectedComponentId, - previewType: $store.currentFrontEndType, theme: $store.theme, customTheme: $store.customTheme, previewDevice: $store.previewDevice, diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js index 3555194263..def32dd45f 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js @@ -61,7 +61,6 @@ export default ` selectedComponentId, layout, screen, - previewType, appId, theme, customTheme, @@ -76,7 +75,6 @@ export default ` window["##BUDIBASE_PREVIEW_SCREEN##"] = screen window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId window["##BUDIBASE_PREVIEW_ID##"] = Math.random() - window["##BUDIBASE_PREVIEW_TYPE##"] = previewType window["##BUDIBASE_PREVIEW_THEME##"] = theme window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index 347df9aab8..8d73afb24a 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -156,7 +156,7 @@
- {#key `${$screenStore.activeLayout._id}-${$builderStore.previewType}`} + {#key $screenStore.activeLayout._id} { const split = component?.split("/") const name = split?.[split.length - 1] - if (name === "screenslot" && $builderStore.previewType !== "layout") { + if (name === "screenslot" && !insideScreenslot) { return Router } return AppComponents[name] diff --git a/packages/client/src/index.js b/packages/client/src/index.js index d43af38ff5..10062cb2da 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -15,7 +15,6 @@ const loadBudibase = () => { screen: window["##BUDIBASE_PREVIEW_SCREEN##"], selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"], previewId: window["##BUDIBASE_PREVIEW_ID##"], - previewType: window["##BUDIBASE_PREVIEW_TYPE##"], theme: window["##BUDIBASE_PREVIEW_THEME##"], customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"], previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"], diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js index d78fedd896..bc3e933079 100644 --- a/packages/client/src/stores/builder.js +++ b/packages/client/src/stores/builder.js @@ -13,7 +13,6 @@ const createBuilderStore = () => { selectedComponentId: null, editMode: false, previewId: null, - previewType: null, selectedPath: [], theme: null, customTheme: null, diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js index 4f972b23c7..a836ca150d 100644 --- a/packages/client/src/stores/components.js +++ b/packages/client/src/stores/components.js @@ -18,9 +18,9 @@ const createComponentStore = () => { // Derive the selected component instance and definition let asset - const { layout, screen, previewType, selectedComponentId } = $builderState + const { screen, selectedComponentId } = $builderState if ($builderState.inBuilder) { - asset = previewType === "layout" ? layout : screen + asset = screen } else { asset = $screenState.activeScreen }