diff --git a/packages/builder/src/PackageRoot.svelte b/packages/builder/src/PackageRoot.svelte index c79193f20d..fa70d0718c 100644 --- a/packages/builder/src/PackageRoot.svelte +++ b/packages/builder/src/PackageRoot.svelte @@ -55,7 +55,7 @@ flex: 0 0 auto; height: 48px; background: white; - padding: 0px 15px; + padding: 0px 15px 0 1.8rem; width: 100%; display: flex; align-items: center; @@ -104,7 +104,7 @@ cursor: pointer; outline: none; height: 40px; - padding: 8px 10px; + padding: 8px 10px 8px 0; } .home-logo:hover { diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js index 766dac3f06..e6b5bf03d7 100644 --- a/packages/builder/src/builderStore/store.js +++ b/packages/builder/src/builderStore/store.js @@ -721,9 +721,27 @@ const getContainerComponent = components => */ const addChildComponent = store => (componentToAdd, presetName) => { store.update(state => { + function findSlot(component_array) { + for (let i = 0; i < component_array.length; i += 1) { + if (component_array[i]._component === "##builtin/screenslot") + return true + if (component_array[i]._children) findSlot(component_array[i]) + } + + return false + } + + if ( + componentToAdd.startsWith("##") && + findSlot(state.pages[state.currentPageName].props._children) + ) { + return state + } + const component = componentToAdd.startsWith("##") ? getBuiltin(componentToAdd) : state.components.find(({ name }) => name === componentToAdd) + const presetProps = presetName ? component.presets[presetName] : {} const newComponent = createProps(component, presetProps) @@ -731,7 +749,9 @@ const addChildComponent = store => (componentToAdd, presetName) => { newComponent.props ) - _savePage(state) + state.currentFrontEndType === "page" + ? _savePage(state) + : _saveScreenApi(state.currentPreviewItem, state) return state }) diff --git a/packages/builder/src/common/Icons/Add.svelte b/packages/builder/src/common/Icons/Add.svelte new file mode 100644 index 0000000000..89b3e21b4f --- /dev/null +++ b/packages/builder/src/common/Icons/Add.svelte @@ -0,0 +1,8 @@ + + + + diff --git a/packages/builder/src/common/Icons/ArrowDown.svelte b/packages/builder/src/common/Icons/ArrowDown.svelte index 5a0f2231ea..bc1bfd2363 100644 --- a/packages/builder/src/common/Icons/ArrowDown.svelte +++ b/packages/builder/src/common/Icons/ArrowDown.svelte @@ -1,10 +1,10 @@ + width="100%" + height="100%"> + d="M12 15l-4.243-4.243 1.415-1.414L12 12.172l2.828-2.829 1.415 1.414z" /> diff --git a/packages/builder/src/common/Icons/Check.svelte b/packages/builder/src/common/Icons/Check.svelte new file mode 100644 index 0000000000..8293996bc9 --- /dev/null +++ b/packages/builder/src/common/Icons/Check.svelte @@ -0,0 +1,10 @@ + + + + diff --git a/packages/builder/src/common/Icons/Grid.svelte b/packages/builder/src/common/Icons/Grid.svelte new file mode 100644 index 0000000000..175ba0aa11 --- /dev/null +++ b/packages/builder/src/common/Icons/Grid.svelte @@ -0,0 +1,12 @@ + + + + diff --git a/packages/builder/src/common/Icons/Shape.svelte b/packages/builder/src/common/Icons/Shape.svelte new file mode 100644 index 0000000000..e3c4d08e2e --- /dev/null +++ b/packages/builder/src/common/Icons/Shape.svelte @@ -0,0 +1,12 @@ + + + + diff --git a/packages/builder/src/common/Icons/index.js b/packages/builder/src/common/Icons/index.js index 353985a59e..465c4934f0 100644 --- a/packages/builder/src/common/Icons/index.js +++ b/packages/builder/src/common/Icons/index.js @@ -11,3 +11,7 @@ export { default as XCircleIcon } from "./XCircle.svelte" export { default as ChevronUpIcon } from "./ChevronUp.svelte" export { default as ChevronDownIcon } from "./ChevronDown.svelte" export { default as CopyIcon } from "./Copy.svelte" +export { default as CheckIcon } from "./Check.svelte" +export { default as GridIcon } from "./Grid.svelte" +export { default as ShapeIcon } from "./Shape.svelte" +export { default as AddIcon } from "./Add.svelte" diff --git a/packages/builder/src/userInterface/ComponentSelectionList.svelte b/packages/builder/src/userInterface/ComponentSelectionList.svelte index 7ceb9d7f11..19ce097775 100644 --- a/packages/builder/src/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/userInterface/ComponentSelectionList.svelte @@ -60,6 +60,12 @@ store.addTemplatedComponent(instance.props) } + function generate_components_list(components) { + return $store.currentFrontEndType === "page" + ? $store.builtins.concat(components) + : components + } + $: { const newComponentLibraries = [] @@ -111,6 +117,7 @@ {#if componentLibrary} {#each $store.builtins.concat(componentLibrary.components) as component} + {#each generate_components_list(componentLibrary.components) as component}
- selectedComponent = null} diff --git a/packages/builder/src/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/userInterface/ComponentsHierarchy.svelte index 4df058e455..0f2a19068d 100644 --- a/packages/builder/src/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/userInterface/ComponentsHierarchy.svelte @@ -5,7 +5,7 @@ import ConfirmDialog from "../common/ConfirmDialog.svelte" import { pipe } from "../common/core" import { store } from "../builderStore" - import { ArrowDownIcon } from "../common/Icons/" + import { ArrowDownIcon, ShapeIcon } from "../common/Icons/" export let screens = [] @@ -26,8 +26,7 @@ ) const lastPartOfName = c => - c && - last(c.name ? c.name.split("/") : c._component.split("/")) + c && last(c.name ? c.name.split("/") : c._component.split("/")) const isComponentSelected = (current, comp) => current === comp @@ -47,7 +46,6 @@ componentToDelete = component confirmDeleteDialog.show() } -
@@ -55,17 +53,21 @@ {#each _screens as screen}
store.setCurrentScreen(screen.title)}> + class:rotate={$store.currentPreviewItem.name !== screen.title}> {#if screen.component.props._children.length} {/if} + + + + {screen.title}
@@ -73,41 +75,42 @@ + onCopyComponent={store.copyComponent} /> {/if} {/each}
- store.deleteComponent(componentToDelete)}/> + onOk={() => store.deleteComponent(componentToDelete)} /> diff --git a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte index 0246806c34..819ab6d3c6 100644 --- a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte @@ -1,7 +1,12 @@ + +
+
store.setScreenType('page')}> + + + {#if _layout.component.props._children.length} + + {/if} + + + + + + + Master Layout +
+ + {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children} + + {/if} +
+ + store.deleteComponent(componentToDelete)} /> + + diff --git a/packages/builder/src/userInterface/PagesList.svelte b/packages/builder/src/userInterface/PagesList.svelte index dd3c66eecf..64322e48af 100644 --- a/packages/builder/src/userInterface/PagesList.svelte +++ b/packages/builder/src/userInterface/PagesList.svelte @@ -1,6 +1,7 @@
- - - {@html getIcon('chevron-down', '24')} - + + + {/each} +
diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte index 84b1e2728a..29064ca412 100644 --- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte @@ -1,6 +1,7 @@
@@ -40,63 +41,32 @@
- -
- - - -
+
-
@@ -117,12 +87,12 @@ - store.deleteComponent(componentToDelete)}/> + onOk={() => store.deleteComponent(componentToDelete)} />