MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove a lot of hacks around screenslots and allow naming them

This commit is contained in:
Andrew Kingston 2021-06-30 09:05:03 +01:00
parent 1cf0d3b0cf
commit 24172d111c
6 changed files with 70 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/builder/src/builderStore/store/frontend.js
View File

@ -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,

7
packages/builder/src/components/design/AppPreview/componentStructure.json
View File

@ -57,13 +57,6 @@
"icon",
"embed"
]
},
{
"name": "Other",
"icon": "More",
"children": [
"screenslot"
]
}
]

102
packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
View File

@ -65,52 +65,56 @@
}
</script>
<ActionMenu>
<div slot="control" class="icon">
<Icon size="S" hoverable name="MoreSmallList" />
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
<MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>
Move up
</MenuItem>
<MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>
Move down
</MenuItem>
<MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>
Duplicate
</MenuItem>
<MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>
Cut
</MenuItem>
<MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>
Copy
</MenuItem>
<MenuItem
icon="LayersBringToFront"
on:click={() => pasteComponent("above")}
disabled={noPaste}
>
Paste above
</MenuItem>
<MenuItem
icon="LayersSendToBack"
on:click={() => pasteComponent("below")}
disabled={noPaste}
>
Paste below
</MenuItem>
<MenuItem
icon="ShowOneLayer"
on:click={() => pasteComponent("inside")}
disabled={noPaste || noChildrenAllowed}
>
Paste inside
</MenuItem>
</ActionMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Deletion"
body={`Are you sure you wish to delete this '${definition?.name}' component?`}
okText="Delete Component"
onOk={deleteComponent}
/>
{#if definition.editable !== false}
<ActionMenu>
<div slot="control" class="icon">
<Icon size="S" hoverable name="MoreSmallList" />
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>
Delete
</MenuItem>
<MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>
Move up
</MenuItem>
<MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>
Move down
</MenuItem>
<MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>
Duplicate
</MenuItem>
<MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>
Cut
</MenuItem>
<MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>
Copy
</MenuItem>
<MenuItem
icon="LayersBringToFront"
on:click={() => pasteComponent("above")}
disabled={noPaste}
>
Paste above
</MenuItem>
<MenuItem
icon="LayersSendToBack"
on:click={() => pasteComponent("below")}
disabled={noPaste}
>
Paste below
</MenuItem>
<MenuItem
icon="ShowOneLayer"
on:click={() => pasteComponent("inside")}
disabled={noPaste || noChildrenAllowed}
>
Paste inside
</MenuItem>
</ActionMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Deletion"
body={`Are you sure you wish to delete this '${definition?.name}' component?`}
okText="Delete Component"
onOk={deleteComponent}
/>
{/if}

17
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
View File

@ -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)
}
</script>
<ul>
@ -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}

3
packages/server/src/constants/layouts.js
View File

@ -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",

3
packages/standard-components/manifest.json
View File

@ -230,7 +230,8 @@
"screenslot": {
"name": "Screenslot",
"icon": "WebPage",
"description": "Contains your app screens"
"description": "Contains your app screens",
"editable": false
},
"button": {
"name": "Button",