diff --git a/packages/builder/assets/bb-space-man.svg b/packages/builder/assets/bb-space-man.svg new file mode 100644 index 0000000000..bb6eda2bf4 --- /dev/null +++ b/packages/builder/assets/bb-space-man.svg @@ -0,0 +1,290 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index ca758e46d0..2a5a7eb130 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -188,8 +188,16 @@ Cypress.Commands.add("navigateToFrontend", () => { Cypress.Commands.add("createScreen", (screenName, route) => { cy.get("[aria-label=AddCircle]").click() cy.get(".spectrum-Modal").within(() => { - cy.get("input").first().type(screenName) - cy.get("input").eq(1).type(route) + cy.get(".item").first().click() + cy.get(".spectrum-Button--cta").click() + }) + cy.get(".spectrum-Modal").within(() => { + cy.get("input").first().clear().type(screenName) + cy.get("input").eq(1).clear().type(route) + cy.get(".spectrum-Button--cta").click() + }) + cy.get(".spectrum-Modal").within(() => { + cy.get(`[data-cy="left-nav"]`).click() cy.get(".spectrum-Button--cta").click() }) }) 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..51dd44026e 100644 --- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte @@ -10,10 +10,11 @@ import { roles } from "stores/backend" import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte" import Layout from "components/design/NavigationPanel/Layout.svelte" - import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte" import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte" import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui" + export let showModal + const tabs = [ { title: "Screens", @@ -85,9 +86,6 @@ - - - @@ -102,7 +100,7 @@
- +
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..8035281193 --- /dev/null +++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte @@ -0,0 +1,179 @@ + + + (blankSelected ? chooseModal(1) : chooseModal(0))} + size="M" + onConfirm={() => { + save(createdScreens) + }} + disabled={!selectedNav} +> + Please select your preferred layout for the new application: + +
+
(selectedNav = "Left")} + class:unselected={selectedNav && selectedNav !== "Left"} + > +
+
+
+
Side Nav
+
+
(selectedNav = "Top")} + class:unselected={selectedNav && selectedNav !== "Top"} + > +
+
+
+
Top Nav
+
+
(selectedNav = "None")} + class:unselected={selectedNav && selectedNav !== "None"} + > +
+
No Nav
+
+
+ + + diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte index 0671dce589..cfbcd444c2 100644 --- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte @@ -1,117 +1,115 @@ - - - - + + diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte new file mode 100644 index 0000000000..33d3cbb4aa --- /dev/null +++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte @@ -0,0 +1,48 @@ + + + + + + + + + + + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte index d3e5d5d2d0..7844357288 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte @@ -5,6 +5,8 @@ selectedComponent, allScreens, } from "builderStore" + import { Detail, Layout, Button, Icon } from "@budibase/bbui" + import CurrentItemPreview from "components/design/AppPreview" import PropertiesPanel from "components/design/PropertiesPanel/PropertiesPanel.svelte" import ComponentSelectionList from "components/design/AppPreview/ComponentSelectionList.svelte" @@ -16,6 +18,8 @@ import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte" import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte" import DevicePreviewSelect from "components/design/AppPreview/DevicePreviewSelect.svelte" + import Logo from "assets/bb-space-man.svg" + import ScreenWizard from "components/design/NavigationPanel/ScreenWizard.svelte" // Cache previous values so we don't update the URL more than necessary let previousType @@ -23,6 +27,9 @@ let previousComponentId let hydrationComplete = false + // Manage the layout modal flow from here + let showModal + // Hydrate state from URL params $: hydrateStateFromURL($params, $leftover) @@ -145,7 +152,7 @@
- +
@@ -166,6 +173,25 @@ {/key}
+ {:else} +
+
+ + logo +
+ Let's add some life to this screen +
+ +
+
+
{/if}
@@ -178,6 +204,8 @@ + +