diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js index 272f627163..c2072f3ced 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js @@ -5,7 +5,7 @@ export class Screen extends BaseStructure { constructor() { super(true) this._json = { - layoutId: "layout_private_master", + showNavigation: true, props: { _id: Helpers.uuid(), _component: "@budibase/standard-components/container", diff --git a/packages/client/src/components/devtools/DevToolsStatsTab.svelte b/packages/client/src/components/devtools/DevToolsStatsTab.svelte index ab029db815..b20b9fafa0 100644 --- a/packages/client/src/components/devtools/DevToolsStatsTab.svelte +++ b/packages/client/src/components/devtools/DevToolsStatsTab.svelte @@ -14,8 +14,6 @@ value={`${$appStore.clientLoadTime} ms`} /> {/if} - - { const createBuilderStore = () => { const initialState = { inBuilder: false, - layout: null, screen: null, selectedComponentId: null, editMode: false, @@ -20,6 +19,9 @@ const createBuilderStore = () => { customTheme: null, previewDevice: "desktop", isDragging: false, + + // Legacy - allow the builder to specify a layout + layout: null, } const store = writable(initialState) const actions = { diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js index 9635f2b5a0..2b19ac9aa9 100644 --- a/packages/client/src/stores/screens.js +++ b/packages/client/src/stores/screens.js @@ -13,31 +13,69 @@ const createScreenStore = () => { [appStore, routeStore, builderStore], ([$appStore, $routeStore, $builderStore]) => { let activeLayout, activeScreen - let layouts, screens + let screens + if ($builderStore.inBuilder) { // Use builder defined definitions if inside the builder preview - activeLayout = $builderStore.layout activeScreen = $builderStore.screen - layouts = [activeLayout] screens = [activeScreen] - } else { - activeLayout = { props: { _component: "screenslot" } } + // Legacy - allow the builder to specify a layout + if ($builderStore.layout) { + activeLayout = $builderStore.layout + } + } else { // Find the correct screen by matching the current route screens = $appStore.screens - layouts = $appStore.layouts if ($routeStore.activeRoute) { activeScreen = screens.find( screen => screen._id === $routeStore.activeRoute.screenId ) } + + // Legacy - find the custom layout for the selected screen if (activeScreen) { - activeLayout = layouts.find( + const screenLayout = $appStore.layouts?.find( layout => layout._id === activeScreen.layoutId ) + if (screenLayout) { + activeLayout = screenLayout + } } } - return { layouts, screens, activeLayout, activeScreen } + + // If we don't have a legacy custom layout, build a layout structure + // from the screen navigation settings + if (!activeLayout) { + activeLayout = { + _id: "layout", + props: { + _component: "@budibase/standard-components/layout", + _children: [ + { + _component: "screenslot", + _id: "screenslot", + _styles: { + normal: { + flex: "1 1 auto", + display: "flex", + "flex-direction": "column", + "justify-content": "flex-start", + "align-items": "stretch", + }, + }, + }, + ], + // If this is a legacy screen without any navigation settings, + // fall back to just showing the app title + ...(activeScreen.navigation || { + title: $appStore.application?.name, + }), + }, + } + } + + return { screens, activeLayout, activeScreen } } )