From 1a265149e23cf5301fd84d31c73b302ba4099992 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 9 Nov 2021 09:33:34 +0000 Subject: [PATCH] new auto screen ux --- .../createFromScratchScreen.js | 1 + .../FrontendNavigatePane.svelte | 7 +- .../NavigationSelectionModal.svelte | 85 ++++++++++ .../NavigationPanel/NewScreenModal.svelte | 147 ++++++++++++------ 4 files changed, 190 insertions(+), 50 deletions(-) create mode 100644 packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte diff --git a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js index 817dfeceea..d4b78740d0 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js @@ -2,6 +2,7 @@ import { Screen } from "./utils/Screen" export default { name: `Create from scratch`, + id: `createFromScratch`, create: () => createScreen(), } diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte index de5400d0ba..274df8294c 100644 --- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte @@ -26,6 +26,7 @@ ] let modal + let navSelectionModal $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens" const navigate = ({ detail }) => { @@ -85,9 +86,9 @@
- - - + diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte new file mode 100644 index 0000000000..4efd74b30b --- /dev/null +++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte @@ -0,0 +1,85 @@ + + + navSelectionModal.show()} + size="M" + disabled={!selectedNav} +> + Please select your preferred layout for the new application: + +
+
(selectedNav = "sideNav")} + class:unselected={selectedNav && selectedNav !== "sideNav"} + > +
+
+
+
Side Nav
+
+
(selectedNav = "topNav")} + class:unselected={selectedNav && selectedNav !== "topNav"} + > +
+
+
+
Top Nav
+
+
(selectedNav = "noNav")} + class:unselected={selectedNav && selectedNav !== "noNav"} + > +
+
No Nav
+
+
+ + + diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte index 0671dce589..fd3f0c2a57 100644 --- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte @@ -1,21 +1,20 @@ - - - -