From 7f4b3e4bf8d76145fc0cd558c1093a562173e6f2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 16 May 2022 08:48:03 +0100
Subject: [PATCH] Disable new screens settings when viewing an old screen and
 correctly upgrade all screen settings when detaching from custom layouts

---
 packages/builder/src/builderStore/store/frontend.js       | 8 ++------
 .../screens/_components/ScreenSettingsPanel.svelte        | 4 +++-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 53da1c3c4d..00e8d4c1fd 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -290,12 +290,8 @@ export const getFrontendStore = () => {
         // 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"
-        }
+        screen.showNavigation = layout?.props.navigation !== "None"
+        screen.width = layout?.props.width || "Large"
         await store.actions.screens.save(screen)
       },
     },
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 71a1a1d0ac..f17caf55cb 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
@@ -90,7 +90,7 @@
     }
   }
 
-  const screenSettings = [
+  $: screenSettings = [
     {
       key: "routing.homeScreen",
       control: Checkbox,
@@ -134,6 +134,7 @@
       control: Toggle,
       props: {
         text: "Show navigation",
+        disabled: !!$selectedScreen.layoutId,
       },
     },
     {
@@ -143,6 +144,7 @@
       props: {
         options: ["Extra small", "Small", "Medium", "Large", "Max"],
         placeholder: "Default",
+        disabled: !!$selectedScreen.layoutId,
       },
     },
   ]