diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index 2ca8057b48..3cd387fe95 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -61,6 +61,12 @@ export const selectedLayout = derived(store, $store => { export const selectedComponent = derived( [store, selectedScreen], ([$store, $selectedScreen]) => { + if ( + $selectedScreen && + ["navigation", "screen"].includes($store.selectedComponentId) + ) { + return findComponent($selectedScreen?.props, $selectedScreen?.props._id) + } if (!$selectedScreen || !$store.selectedComponentId) { return null } diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index f312a58e97..038fb661b9 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -769,9 +769,13 @@ export const getFrontendStore = () => { else { await store.actions.screens.patch(screen => { // Find the selected component + let selectedComponentId = state.selectedComponentId + if (["navigation", "screen"].includes(selectedComponentId)) { + selectedComponentId = screen?.props._id + } const currentComponent = findComponent( screen.props, - state.selectedComponentId + selectedComponentId ) if (!currentComponent) { return false diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte b/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte rename to packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte b/packages/builder/src/components/design/NewScreen/DatasourceModal.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte rename to packages/builder/src/components/design/NewScreen/DatasourceModal.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte b/packages/builder/src/components/design/NewScreen/ScreenRoleModal.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte rename to packages/builder/src/components/design/NewScreen/ScreenRoleModal.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/blank.png b/packages/builder/src/components/design/NewScreen/blank.png similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/blank.png rename to packages/builder/src/components/design/NewScreen/blank.png diff --git a/packages/builder/src/components/design/NewScreen/index.svelte b/packages/builder/src/components/design/NewScreen/index.svelte new file mode 100644 index 0000000000..b504940ca7 --- /dev/null +++ b/packages/builder/src/components/design/NewScreen/index.svelte @@ -0,0 +1,105 @@ + + +
+ +
+ Start from scratch or create screens from your data +
+ +
+
createScreenModal.show("blank")}> +
+ +
+
+ Blank screen + Add an empty blank screen +
+
+ +
createScreenModal.show("table")}> +
+ +
+
+ Table + View, edit and delete rows on a table +
+
+
+ +
+ + + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/table.png b/packages/builder/src/components/design/NewScreen/table.png similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/table.png rename to packages/builder/src/components/design/NewScreen/table.png diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte deleted file mode 100644 index 00165e4ee9..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte index 8bc0dcc3e5..77510951b1 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte @@ -1,11 +1,8 @@ -
-
- - $goto("./screens")} - /> - $goto("./components")} - /> - $goto("./theme")} - /> - $goto("./navigation")} - /> - {#if $store.layouts?.length} - $goto("./layouts")} - /> - {/if} - -
- -
- {#if $selectedScreen} - - - {/if} -
-
- - + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPanel.svelte similarity index 52% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPanel.svelte index 785b221239..379cebca37 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPanel.svelte @@ -1,9 +1,7 @@ @@ -11,22 +9,11 @@
- +
+ Screens +
+
+ +
+
+ +
+
+
+ {#each filteredScreens as screen (screen._id)} + store.actions.screens.select(screen._id)} + rightAlignIcon + showTooltip + selectedBy={$userSelectedResourceMap[screen._id]} + > + + + + {/each} +
+ {#if !filteredScreens?.length} + + + There aren't any screens matching the current filters + + + {/if} +
+ +
+ (newScreen = false)} /> +
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte new file mode 100644 index 0000000000..3f521b23c7 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte @@ -0,0 +1,24 @@ + + +
+ +
+ +
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte new file mode 100644 index 0000000000..f442e3a275 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte @@ -0,0 +1,260 @@ + + +
+
+
+ +
+ Navigation +
+
+
+
+ General +
+
+ + Show nav on this screen +
+
+
+
+
+ Customize +
+
+
+ + These settings apply to all screens +
+
+
+ +
+
+
+ +
+ + update("navigation", "Top")} + /> + update("navigation", "Left")} + /> + + + {#if $store.navigation.navigation === "Top"} +
+ +
+ update("sticky", e.detail)} + /> +
+ +
+ update("logoUrl", e.detail)} + updateOnChange={false} + /> + {/if} +
+ +
+ update("hideTitle", !e.detail)} + /> + {#if !$store.navigation.hideTitle} +
+ +
+ update("title", e.detail)} + updateOnChange={false} + /> + {/if} +
+ +
+ update("navBackground", e.detail)} + /> +
+ +
+ update("navTextColor", e.detail)} + /> +
+
+
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte deleted file mode 100644 index 9513753d76..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte +++ /dev/null @@ -1,90 +0,0 @@ - - - -
- -
- -
    -
  • - { - $store.selectedComponentId = $selectedScreen?.props._id - }} - id={`component-${$selectedScreen?.props._id}`} - selectedBy={$userSelectedResourceMap[$selectedScreen?.props._id]} - > - - - - - - {#if $dndStore.dragging && $dndStore.valid} - - {#if $dndStore.dropPosition !== DropPosition.INSIDE} - - {/if} - {/if} -
    • -
- - - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte index 860258c940..1dcf40a3c5 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte @@ -1,14 +1,19 @@ - - - +
+
+ {#if $selectedScreen} + + + {#if routeComponentId === "screen"} + + {:else if routeComponentId === "navigation"} + + {:else} + + {/if} + + {/if} +
+
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte index f8c4cc0868..9361415cb7 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte @@ -1,18 +1,8 @@ diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte index f5e3806bd6..496467c546 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte @@ -1,5 +1,8 @@ diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte deleted file mode 100644 index cba68f899d..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte +++ /dev/null @@ -1,41 +0,0 @@ - - - -
- -
- Delete - - - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte deleted file mode 100644 index cc895317fd..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte +++ /dev/null @@ -1,29 +0,0 @@ - - - -
- {#each $store.layouts as layout (layout._id)} - store.actions.layouts.select(layout._id)} - > - - - {/each} -
- - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte deleted file mode 100644 index bfc2f94f43..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - Custom layouts are being deprecated. They will be removed in a future - release. - - - You can save the content of this layout by pressing the button below. - - - This will copy all components inside your layout, which you can then paste - into a screen. - - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte deleted file mode 100644 index c82fefab3e..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte +++ /dev/null @@ -1,20 +0,0 @@ - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte deleted file mode 100644 index 4d39403bc3..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte deleted file mode 100644 index 1333c6afe3..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte deleted file mode 100644 index 09d45f8fde..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/CustomizePane.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/CustomizePane.svelte deleted file mode 100644 index 05108b1736..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/CustomizePane.svelte +++ /dev/null @@ -1,176 +0,0 @@ - - - -
-
- - CHANGES WILL APPLY TO ALL SCREENS -
- - Your navigation is configured for all the screens within your app. - -
-
- -
-
-
- -
- - update("navigation", "Top")} - /> - update("navigation", "Left")} - /> - - - {#if $store.navigation.navigation === "Top"} -
- -
- update("sticky", e.detail)} - /> -
- -
- update("logoUrl", e.detail)} - updateOnChange={false} - /> - {/if} -
- -
- update("hideTitle", !e.detail)} - /> - {#if !$store.navigation.hideTitle} -
- -
- update("title", e.detail)} - updateOnChange={false} - /> - {/if} -
- -
- update("navBackground", e.detail)} - /> -
- -
- update("navTextColor", e.detail)} - /> -
- - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/SettingsPane.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/SettingsPane.svelte deleted file mode 100644 index d3ce720994..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/SettingsPane.svelte +++ /dev/null @@ -1,31 +0,0 @@ - - - -
- - Show nav on this screen -
- - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/index.svelte deleted file mode 100644 index 6ce5405f93..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/index.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte deleted file mode 100644 index 5ffccc5800..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte +++ /dev/null @@ -1,130 +0,0 @@ - - - -
- - {#if links?.length} -
- {#each links as link (link.id)} -
-
(dragDisabled = false)} - > - -
- - - - removeLink(link.id)} - /> -
- {/each} -
- {/if} -
- -
- -
- - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte deleted file mode 100644 index 895c82495d..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - Configure the links in your navigation bar. - - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte deleted file mode 100644 index c6d43984b2..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte +++ /dev/null @@ -1,110 +0,0 @@ - - - - - - - - - update("navigation", "Top")} - /> - update("navigation", "Left")} - /> - - - {#if $store.navigation.navigation === "Top"} - update("sticky", e.detail)} - /> - update("logoUrl", e.detail)} - placeholder="Add logo URL" - updateOnChange={false} - /> - {/if} - - - update("hideTitle", !e.detail)} - /> - {#if !$store.navigation.hideTitle} - update("title", e.detail)} - placeholder="Add title" - updateOnChange={false} - /> - {/if} - - - - update("navBackground", e.detail)} - /> - - - - update("navTextColor", e.detail)} - /> - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte deleted file mode 100644 index 2331d8b285..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte deleted file mode 100644 index 6362af3073..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - (searchString = e.detail)} - /> -