From 9b25a6170686e80a839cefeb5fe60dae22ebe1df Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Wed, 2 Dec 2020 16:15:14 +0000 Subject: [PATCH] allow editing of screen layout from modal --- .../src/builderStore/store/frontend.js | 4 +- .../ComponentTree.svelte | 5 +-- .../EditScreenLayoutModal.svelte | 14 +++++++ .../ComponentNavigationTree/PathTree.svelte | 6 +-- .../ScreenDropdownMenu.svelte | 23 ++++++++---- .../ComponentsPaneSwitcher.svelte | 3 +- .../components/userInterface/Layout.svelte | 4 -- packages/builder/src/constants/index.js | 15 -------- .../static/templates/BudibaseApp.svelte | 3 +- packages/server/src/constants/layouts.js | 5 +-- packages/server/src/constants/screens.js | 37 ++++++++++++++----- 11 files changed, 66 insertions(+), 53 deletions(-) create mode 100644 packages/builder/src/components/userInterface/ComponentNavigationTree/EditScreenLayoutModal.svelte diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 3936f11ac7..47a6b90ab3 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -13,7 +13,7 @@ import { } from "builderStore" import { fetchComponentLibDefinitions } from "../loadComponentLibraries" import api from "../api" -import { DEFAULT_LAYOUTS, FrontendTypes } from "../../constants" +import { FrontendTypes } from "../../constants" import getNewComponentName from "../getNewComponentName" import analytics from "analytics" import { @@ -27,7 +27,7 @@ const INITIAL_FRONTEND_STATE = { apps: [], name: "", description: "", - layouts: DEFAULT_LAYOUTS, + layouts: [], screens: [], mainUi: {}, unauthenticatedUi: {}, diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte index ae7118a88b..db5e747be4 100644 --- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte +++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte @@ -2,17 +2,16 @@ import { goto } from "@sveltech/routify" import { store } from "builderStore" import { getComponentDefinition } from "builderStore/storeUtils" - import { DropEffect, DropPosition } from "./dragDropStore" + import initDragDropStore, { DropEffect, DropPosition } from "./dragDropStore" import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte" import NavItem from "components/common/NavItem.svelte" - export let layout export let components = [] export let currentComponent export let onSelect = () => {} export let level = 0 - export let dragDropStore + export let dragDropStore = initDragDropStore() const isScreenslot = name => name === "##builtin/screenslot" diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/EditScreenLayoutModal.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/EditScreenLayoutModal.svelte new file mode 100644 index 0000000000..b54aebcd78 --- /dev/null +++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/EditScreenLayoutModal.svelte @@ -0,0 +1,14 @@ + + +
+ +
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte index 4426007281..d76c38b1d2 100644 --- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte +++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte @@ -8,8 +8,6 @@ import NavItem from "components/common/NavItem.svelte" import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte" - const dragDropStore = instantiateStore() - export let route export let path export let indent @@ -39,13 +37,13 @@ text={url === '/' ? 'Home' : url} withArrow={route.subpaths} on:click={() => changeScreen(screenId)}> - + {#if selectedScreen?._id === screenId} + /> {/if} {/each} {/each} diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte index a7b20f2f59..d27bc2bdcd 100644 --- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte @@ -3,21 +3,31 @@ import { store, allScreens } from "builderStore" import { notifier } from "builderStore/store/notifications" import ConfirmDialog from "components/common/ConfirmDialog.svelte" + import EditScreenLayoutModal from "./EditScreenLayoutModal.svelte" import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui" import { DropdownContainer, DropdownItem } from "components/common/Dropdowns" - export let screen + export let screenId let confirmDeleteDialog let editLayoutDialog let dropdown let anchor + $: screen = $allScreens.find(screen => screen._id === screenId) + const deleteScreen = () => { - const screenToDelete = $allScreens.find(scr => scr._id === screen) - store.actions.screens.delete(screenToDelete) + store.actions.screens.delete(screen) store.actions.routing.fetch() } + + async function saveScreen() { + try { + await store.actions.screens.save(screen) + } catch (err) { + notifier.danger("Error saving page.") + } + }
@@ -45,11 +55,8 @@ onOk={deleteScreen} /> - - Choose a layout for your screen + + diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index 1ecadebeb1..beae2d7e3f 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -1,5 +1,6 @@
- {#if $store.currentFrontEndType === 'layout' || $allScreens.length} + {#if $store.currentFrontEndType === FrontendTypes.LAYOUT || $allScreens.length}