From b488293e926987e946b84fde03a227ffdd8f8be2 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 13 May 2022 13:50:15 +0100 Subject: [PATCH] Add warning to navigation section when using an old screen with a custom layout, and allow upgrading --- .../src/builderStore/store/frontend.js | 20 ++++++++++++++++++- .../_components/NavigationInfoPanel.svelte | 19 +++++++++++++++++- .../_components/ScreenSettingsPanel.svelte | 16 ++------------- 3 files changed, 39 insertions(+), 16 deletions(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 5d6e3a6bfc..53da1c3c4d 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -1,6 +1,12 @@ import { get, writable } from "svelte/store" import { cloneDeep } from "lodash/fp" -import { currentAsset, mainLayout, selectedComponent } from "builderStore" +import { + currentAsset, + mainLayout, + selectedComponent, + selectedScreen, + store, +} from "builderStore" import { datasources, integrations, @@ -280,6 +286,18 @@ export const getFrontendStore = () => { promises.push(store.actions.screens.save(screen)) return await Promise.all(promises) }, + removeCustomLayout: async screen => { + // Pull relevant settings from old layout, if required + const layout = get(store).layouts.find(x => x._id === screen.layoutId) + screen.layoutId = null + if (screen.showNavigation == null) { + screen.showNavigation = layout?.props.navigation !== "None" + } + if (screen.width == null) { + screen.width = layout?.props.width || "Large" + } + await store.actions.screens.save(screen) + }, }, preview: { saveSelected: async () => { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte index f18730307d..dbd23c462f 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte @@ -1,10 +1,27 @@ + {#if $selectedScreen.layoutId} + + You can't preview your navigation settings using this screen as it uses + a custom layout, which is deprecated + + {/if} Your navigation is configured for all the screens within your app. diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte index b33f3609ba..71a1a1d0ac 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte @@ -148,19 +148,7 @@ ] const removeCustomLayout = async () => { - let screen = get(selectedScreen) - - // Pull relevant settings from old layout, if required - const layout = get(store).layouts.find(x => x._id === screen.layoutId) - screen.layoutId = null - if (screen.showNavigation == null) { - screen.showNavigation = layout?.props.navigation !== "None" - } - if (screen.width == null) { - screen.width = layout?.props.width || "Large" - } - - await store.actions.screens.save(screen) + return store.actions.screens.removeCustomLayout(get(selectedScreen)) } @@ -173,7 +161,7 @@ {#if $selectedScreen.layoutId}