diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 164fda4440..46b4bab6c0 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -225,7 +225,7 @@ export const getFrontendStore = () => { // Select new screen store.update(state => { state.selectedScreenId = screen._id - state.selectedComponentId = screen.props?._id + state.selectedComponentId = "screen" return state }) }, diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentInfoSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentInfoSection.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentInfoSection.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentInfoSection.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentSettingsPanel.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ComponentSettingsSection.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUIDrawer.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/ConditionalUISection.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/CustomStylesSection.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/DesignSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/DesignSection.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/StyleSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/StyleSection.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/componentStyles.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Component/componentStyles.js rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksDrawer.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/LinksEditor.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte 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]/[componentId]/_components/Navigation/index.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/SettingsPanel.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Screen/SettingsPanel.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/SettingsPanel.svelte 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]/[componentId]/_layout.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte new file mode 100644 index 0000000000..0ff63d1ead --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte @@ -0,0 +1 @@ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte similarity index 99% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte index 7dca5b792b..4500723027 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte @@ -1,6 +1,6 @@ diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte new file mode 100644 index 0000000000..32150ef921 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte @@ -0,0 +1,24 @@ + + +
+ + {#if $isActive("./:componentId")} + + {/if} +
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/DropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/DropdownMenu.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/RoleIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/RoleIndicator.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte similarity index 70% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte index c11e933624..9324b2073d 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte @@ -9,29 +9,42 @@ let newScreen = false let search = false + let resizing = false let searchValue = "" let searchInput let screensContainer let scrolling = false + let height = "210px" + let previousHeight = null + let dragOffset $: filteredScreens = getFilteredScreens($sortedScreens, searchValue) + const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) + const openSearch = async () => { search = true await tick() searchInput.focus() screensContainer.scroll({ top: 0, behavior: "smooth" }) + previousHeight = height + height = "calc(100% + 1px)" } - const closeSearch = () => { + const closeSearch = async () => { + if (previousHeight) { + // Restore previous height and wait for animation + height = previousHeight + previousHeight = null + await sleep(300) + } search = false searchValue = "" } const getFilteredScreens = (screens, search) => { return screens.filter(screen => { - const searchMatch = !search || screen.routing.route.includes(search) - return searchMatch + return !search || screen.routing.route.includes(search) }) } @@ -54,17 +67,33 @@ } const handleScroll = e => { - if (e.target.scrollTop === 0) { - scrolling = false - } else { - scrolling = true + scrolling = e.target.scrollTop !== 0 + } + + const startResizing = e => { + resizing = true + dragOffset = parseInt(height) - e.clientY + document.addEventListener("mousemove", resize) + document.addEventListener("mouseup", stopResizing) + } + + const resize = e => { + const newHeight = Math.max(0, e.clientY + dragOffset) + if (newHeight == null || isNaN(newHeight)) { + return } + height = `${newHeight}px` + } + + const stopResizing = () => { + resizing = false + document.removeEventListener("mousemove", resize) } -
-
+
+
{/if}
+ +
@@ -129,20 +160,24 @@ z-index: 2; background-color: var(--background); } - .newScreenVisible { display: initial; } .screens { - height: 210px; display: flex; flex-direction: column; - transition: height 300ms ease-out; + min-height: 147px; + max-height: calc(100% - 147px); + position: relative; } - - .screenSearch { - height: 100%; + .screens.search { + transition: height 300ms ease-out; + max-height: none; + } + .screens.resizing { + user-select: none; + cursor: row-resize; } .header { @@ -154,11 +189,10 @@ display: flex; align-items: center; border-bottom: 2px solid transparent; - transition: border-bottom 300ms ease-out; + transition: border-bottom 130ms ease-out; } - - .headerScrolling { - border-bottom: 2px solid var(--grey-2); + .header.scrolling { + border-bottom: var(--border-light); } .input { @@ -178,8 +212,7 @@ .input::placeholder { color: var(--spectrum-global-color-gray-600); } - - .screenSearch input { + .screens.search input { display: block; } @@ -197,6 +230,9 @@ overflow: auto; flex-grow: 1; } + .screens.resizing .content { + pointer-events: none; + } .screens :global(.nav-item) { padding-right: 8px !important; @@ -208,7 +244,6 @@ margin-right: 10px; opacity: 1; } - .searchButton:hover { color: var(--ink); } @@ -223,15 +258,14 @@ cursor: pointer; transition: transform 300ms ease-out; } + .addButton:hover { + color: var(--ink); + } .closeButton { transform: rotate(45deg); } - .addButton:hover { - color: var(--ink); - } - .icon { margin-left: 4px; margin-right: 4px; @@ -240,4 +274,24 @@ .no-results { color: var(--spectrum-global-color-gray-600); } + + .divider { + position: absolute; + bottom: 0; + transform: translateY(50%); + height: 16px; + width: 100%; + } + .divider:after { + content: ""; + position: absolute; + background: var(--spectrum-global-color-gray-200); + height: 2px; + width: 100%; + top: 50%; + transform: translateY(-50%); + } + .divider:hover { + cursor: row-resize; + } 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 8471cc03ed..61514270e6 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 @@ -4,7 +4,7 @@ import { syncURLToState } from "helpers/urlStateSync" import { store } from "builderStore" import { onDestroy } from "svelte" - import LeftPanel from "./components/[componentId]/_components/LeftPanel/index.svelte" + import LeftPanel from "./_components/LeftPanel.svelte" $: screenId = $store.selectedScreenId $: store.actions.websocket.selectResource(screenId) 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 deleted file mode 100644 index c1fe15f625..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte +++ /dev/null @@ -1,28 +0,0 @@ - - -
- -
- {#if $selectedScreen} - - {/if} -
- - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte deleted file mode 100644 index 9b5d05fe57..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte +++ /dev/null @@ -1,4 +0,0 @@ - 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 deleted file mode 100644 index 9361415cb7..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte +++ /dev/null @@ -1,8 +0,0 @@ - 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 496467c546..c3951eab5d 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,8 +1,5 @@ diff --git a/packages/builder/src/pages/builder/app/[application]/design/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/index.svelte index 470c81b88c..79d264d120 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/index.svelte @@ -4,7 +4,7 @@ $: { if ($frontendStore.screens.length > 0) { - $redirect(`./${$frontendStore.screens[0]._id}/components/screen`) + $redirect(`./${$frontendStore.screens[0]._id}/screen`) } else { $redirect("./new") }