From 24172d111c038ef40e20233daf0de225550c712a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 30 Jun 2021 09:05:03 +0100 Subject: [PATCH] Remove a lot of hacks around screenslots and allow naming them --- .../src/builderStore/store/frontend.js | 9 -- .../design/AppPreview/componentStructure.json | 7 -- .../ComponentDropdownMenu.svelte | 102 +++++++++--------- .../ComponentTree.svelte | 17 ++- packages/server/src/constants/layouts.js | 3 + packages/standard-components/manifest.json | 3 +- 6 files changed, 70 insertions(+), 71 deletions(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index a0a64b4504..b9bedfa310 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -330,15 +330,6 @@ export const getFrontendStore = () => { const asset = get(currentAsset) const state = get(store) - // Only allow one screen slot, and in the layout - if (componentName.endsWith("screenslot")) { - const isLayout = state.currentFrontEndType === FrontendTypes.LAYOUT - const slot = findComponentType(asset.props, componentName) - if (!isLayout || slot != null) { - return - } - } - // Create new component const componentInstance = store.actions.components.createInstance( componentName, diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json index e203c7c9a2..4b7fd1ad00 100644 --- a/packages/builder/src/components/design/AppPreview/componentStructure.json +++ b/packages/builder/src/components/design/AppPreview/componentStructure.json @@ -57,13 +57,6 @@ "icon", "embed" ] - }, - { - "name": "Other", - "icon": "More", - "children": [ - "screenslot" - ] } ] diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte index 5b7ecda155..df30a17640 100644 --- a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte @@ -65,52 +65,56 @@ } - -
- -
- Delete - - Move up - - - Move down - - - Duplicate - - storeComponentForCopy(true)}> - Cut - - storeComponentForCopy(false)}> - Copy - - pasteComponent("above")} - disabled={noPaste} - > - Paste above - - pasteComponent("below")} - disabled={noPaste} - > - Paste below - - pasteComponent("inside")} - disabled={noPaste || noChildrenAllowed} - > - Paste inside - - - +{#if definition.editable !== false} + +
+ +
+ + Delete + + + Move up + + + Move down + + + Duplicate + + storeComponentForCopy(true)}> + Cut + + storeComponentForCopy(false)}> + Copy + + pasteComponent("above")} + disabled={noPaste} + > + Paste above + + pasteComponent("below")} + disabled={noPaste} + > + Paste below + + pasteComponent("inside")} + disabled={noPaste || noChildrenAllowed} + > + Paste inside + + + +{/if} diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte index 39a56f549c..c89de55796 100644 --- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte @@ -3,6 +3,7 @@ import { DropEffect, DropPosition } from "./dragDropStore" import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte" import NavItem from "components/common/NavItem.svelte" + import { capitalise } from "helpers" export let components = [] export let currentComponent @@ -10,8 +11,6 @@ export let level = 0 export let dragDropStore - const isScreenslot = name => name?.endsWith("screenslot") - const selectComponent = component => { store.actions.components.select(component) } @@ -42,6 +41,16 @@ return false } + + const getComponentText = component => { + if (component._instanceName) { + return component._instanceName + } + const type = + component._component.replace("@budibase/standard-components/", "") || + "component" + return capitalise(type) + }
    @@ -63,9 +72,7 @@ on:dragstart={dragstart(component)} on:dragover={dragover(component, index)} on:drop={dragDropStore.actions.drop} - text={isScreenslot(component._component) - ? "Screenslot" - : component._instanceName} + text={getComponentText(component)} withArrow indentLevel={level + 1} selected={$store.selectedComponentId === component._id} diff --git a/packages/server/src/constants/layouts.js b/packages/server/src/constants/layouts.js index f435c31d1e..0cc9e3b43a 100644 --- a/packages/server/src/constants/layouts.js +++ b/packages/server/src/constants/layouts.js @@ -15,6 +15,7 @@ const EMPTY_LAYOUT = { { _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967", _component: "@budibase/standard-components/screenslot", + _instanceName: "Screen slot", _styles: { normal: { flex: "1 1 auto", @@ -63,6 +64,7 @@ const BASE_LAYOUTS = [ { _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967", _component: "@budibase/standard-components/screenslot", + _instanceName: "Screen slot", _styles: { normal: { flex: "1 1 auto", @@ -109,6 +111,7 @@ const BASE_LAYOUTS = [ { _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967", _component: "@budibase/standard-components/screenslot", + _instanceName: "Screen slot", _styles: { normal: { flex: "1 1 auto", diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index f81fa9ed50..db17afc479 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -230,7 +230,8 @@ "screenslot": { "name": "Screenslot", "icon": "WebPage", - "description": "Contains your app screens" + "description": "Contains your app screens", + "editable": false }, "button": { "name": "Button",