From b0761ed36c46e79a4c1d60d08918421493e76ef8 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 18 Mar 2022 19:52:11 +0000 Subject: [PATCH 01/19] Add initial work on horizontally scrollable component tree with automatic scrolling --- .../src/components/common/NavItem.svelte | 75 ++++++++++--------- .../ComponentTree.svelte | 10 +++ .../ComponentNavigationTree/PathTree.svelte | 8 ++ .../ComponentNavigationTree/index.svelte | 7 +- .../FrontendNavigatePane.svelte | 66 +++++++++++++--- .../design/[assetType]/_layout.svelte | 2 - 6 files changed, 118 insertions(+), 50 deletions(-) diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte index d2074b69b1..c653f4739a 100644 --- a/packages/builder/src/components/common/NavItem.svelte +++ b/packages/builder/src/components/common/NavItem.svelte @@ -15,6 +15,7 @@ export let iconColor const dispatch = createEventDispatcher() + let textRef function onIconClick(event) { event.stopPropagation() @@ -26,49 +27,58 @@ class="nav-item" class:border class:selected - style={`padding-left: ${indentLevel * 14}px`} + style={`padding-left: ${20 + indentLevel * 14}px`} {draggable} on:dragend on:dragstart on:dragover on:drop on:click + on:mouseover={() => { + const size = textRef.getBoundingClientRect() + dispatch("mouseover", size.width) + }} ondragover="return false" ondragenter="return false" > -
- {#if withArrow} -
- -
- {/if} + {#if withArrow} +
+ +
+ {/if} - - {#if iconText} -
- {iconText} -
- {:else if icon} -
- -
- {/if} -
{text}
- {#if withActions} -
- -
- {/if} -
+ + {#if iconText} +
+ {iconText} +
+ {:else if icon} +
+ +
+ {/if} +
{text}
+ {#if withActions} +
+ +
+ {/if} diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte index a5045d8e9f..12282323ee 100644 --- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte @@ -1,5 +1,5 @@ Date: Mon, 21 Mar 2022 09:57:55 +0000 Subject: [PATCH 03/19] Properly center all path, screen and component dropdown menu icons --- packages/builder/src/components/common/NavItem.svelte | 5 ++--- .../ComponentNavigationTree/ComponentDropdownMenu.svelte | 7 +++++++ .../ComponentNavigationTree/PathDropdownMenu.svelte | 4 ++++ .../ComponentNavigationTree/ScreenDropdownMenu.svelte | 7 +++++++ 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte index c653f4739a..6e16879bc2 100644 --- a/packages/builder/src/components/common/NavItem.svelte +++ b/packages/builder/src/components/common/NavItem.svelte @@ -125,10 +125,9 @@ height: 20px; cursor: pointer; position: relative; - flex-direction: row; - justify-content: center; - align-items: center; + display: grid; margin-left: var(--spacing-s); + place-items: center; } .iconText { diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte index 75601084a0..ae031e14bd 100644 --- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte @@ -138,3 +138,10 @@ onOk={deleteComponent} /> {/if} + + diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte index 5d9eb2568c..6de656b6b5 100644 --- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte @@ -75,4 +75,8 @@ align-items: flex-start; padding-left: var(--spacing-xl); } + .icon { + display: grid; + place-items: center; + } diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte index 972414ae0b..76bb48a26c 100644 --- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte @@ -103,3 +103,10 @@ confirmText="Duplicate" /> + + From 733fe1fe3f5cbd0760ab8c69955374310e985b1b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 21 Mar 2022 12:16:51 +0000 Subject: [PATCH 04/19] Update spectrum card word wrapping to allow breaking text anywhere --- packages/client/src/components/app/SpectrumCard.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client/src/components/app/SpectrumCard.svelte b/packages/client/src/components/app/SpectrumCard.svelte index 7aa2990ae4..24cda52598 100644 --- a/packages/client/src/components/app/SpectrumCard.svelte +++ b/packages/client/src/components/app/SpectrumCard.svelte @@ -130,6 +130,7 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; + word-break: break-all; } .button-container { From 7c39430d1c636cf039d2a69165b0ad4f4cd0aa6d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 21 Mar 2022 13:38:53 +0000 Subject: [PATCH 05/19] Add vertical scrolling to selected component and support scrolling to selected screen --- .../src/components/common/NavItem.svelte | 83 ++++++++++++------- .../ComponentTree.svelte | 6 -- .../ComponentNavigationTree/PathTree.svelte | 12 ++- .../FrontendNavigatePane.svelte | 47 +++++++---- 4 files changed, 89 insertions(+), 59 deletions(-) diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte index 6e16879bc2..0f8ec43669 100644 --- a/packages/builder/src/components/common/NavItem.svelte +++ b/packages/builder/src/components/common/NavItem.svelte @@ -1,6 +1,6 @@
{ - const size = textRef.getBoundingClientRect() - dispatch("mouseover", size.width) - }} ondragover="return false" ondragenter="return false" > - {#if withArrow} -
- -
- {/if} +
+ {#if withArrow} +
+ +
+ {/if} - - {#if iconText} -
- {iconText} -
- {:else if icon} -
- -
- {/if} -
{text}
- {#if withActions} -
- -
- {/if} + + {#if iconText} +
+ {iconText} +
+ {:else if icon} +
+ +
+ {/if} +
{text}
+ {#if withActions} +
+ +
+ {/if} +
From 2def829ebf8c5fc0f8a6166f9761856246b5db37 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 21 Mar 2022 13:54:46 +0000 Subject: [PATCH 06/19] Tidy up logic for scrolling to components --- .../FrontendNavigatePane.svelte | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte index 3cb99a2003..624146cb8a 100644 --- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte @@ -33,41 +33,40 @@ const sidebarWidth = 259 const navItemHeight = 32 + const { scrollLeft, scrollTop, offsetHeight } = scrollRef let scrollBounds = scrollRef.getBoundingClientRect() - let newScrollOffsets = {} + let newOffsets = {} // Calculate left offset - const offsetX = bounds.left + bounds.width + scrollRef.scrollLeft + 20 + const offsetX = bounds.left + bounds.width + scrollLeft + 20 if (offsetX > sidebarWidth) { - newScrollOffsets.left = offsetX - sidebarWidth + newOffsets.left = offsetX - sidebarWidth } else { - newScrollOffsets.left = 0 + newOffsets.left = 0 } - if (newScrollOffsets.left === scrollRef.scrollLeft) { - delete newScrollOffsets.left + if (newOffsets.left === scrollLeft) { + delete newOffsets.left } // Calculate top offset - const offsetY = bounds.top - scrollBounds?.top + scrollRef.scrollTop - const upperOffset = 2 * navItemHeight - 8 - const lowerOffset = navItemHeight + 8 - if (offsetY > scrollRef.scrollTop + scrollRef.offsetHeight - upperOffset) { - newScrollOffsets.top = offsetY - scrollRef.offsetHeight + upperOffset - } else if (offsetY < scrollRef.scrollTop + lowerOffset) { - newScrollOffsets.top = offsetY - lowerOffset + const offsetY = bounds.top - scrollBounds?.top + scrollTop + if (offsetY > scrollTop + offsetHeight - 2 * navItemHeight) { + newOffsets.top = offsetY - offsetHeight + 2 * navItemHeight + } else if (offsetY < scrollTop + navItemHeight) { + newOffsets.top = offsetY - navItemHeight } else { - delete newScrollOffsets.top + delete newOffsets.top } // Skip if offset is unchanged - if (newScrollOffsets.left == null && newScrollOffsets.top == null) { + if (newOffsets.left == null && newOffsets.top == null) { return } // Smoothly scroll to the offset scrollRef.scroll({ - ...newScrollOffsets, + ...newOffsets, behavior: "smooth", }) } From e68f1e33b9c1fbeebe8258afbcb427195e08164c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 21 Mar 2022 14:23:56 +0000 Subject: [PATCH 07/19] Remove logs --- packages/builder/src/components/common/NavItem.svelte | 1 - .../NavigationPanel/ComponentNavigationTree/PathTree.svelte | 3 --- .../design/NavigationPanel/FrontendNavigatePane.svelte | 1 + 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte index 0f8ec43669..ce641aa3fc 100644 --- a/packages/builder/src/components/common/NavItem.svelte +++ b/packages/builder/src/components/common/NavItem.svelte @@ -29,7 +29,6 @@ if (!scrollApi || !contentRef) { return } - console.log("selected", text) const bounds = contentRef.getBoundingClientRect() scrollApi.scrollTo(bounds) } diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte index 84d640a2a2..b4a79f4e9e 100644 --- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte @@ -66,9 +66,6 @@ } routeManuallyOpened = !routeManuallyOpened } - - $: console.log($store.selectedComponentId) - $: console.log() {#if !noSearchMatch} diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte index 624146cb8a..8a1ae83792 100644 --- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte @@ -148,6 +148,7 @@
+
From ed7a80ca6f75da99400125bc3bf2e2f6d984a217 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 21 Mar 2022 14:46:59 +0000 Subject: [PATCH 08/19] Support scrolling screens or folders into view when clicking --- packages/builder/src/components/common/NavItem.svelte | 11 ++++++++--- .../ComponentNavigationTree/PathTree.svelte | 5 +++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte index ce641aa3fc..6b3b287704 100644 --- a/packages/builder/src/components/common/NavItem.svelte +++ b/packages/builder/src/components/common/NavItem.svelte @@ -20,8 +20,13 @@ let contentRef $: selected && contentRef && scrollToView() - function onIconClick(event) { - event.stopPropagation() + const onClick = () => { + scrollToView() + dispatch("click") + } + + const onIconClick = e => { + e.stopPropagation() dispatch("iconClick") } @@ -44,7 +49,7 @@ on:dragstart on:dragover on:drop - on:click + on:click={onClick} ondragover="return false" ondragenter="return false" > diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte index b4a79f4e9e..df4f8b6826 100644 --- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte @@ -30,7 +30,9 @@ export let indent export let border + let folder let routeManuallyOpened = false + $: selectedScreen = $currentAsset $: allScreens = getAllScreens(route) $: filteredScreens = getFilteredScreens(allScreens, $screenSearchString) @@ -85,8 +87,7 @@ Date: Mon, 21 Mar 2022 15:17:51 +0000 Subject: [PATCH 09/19] Ensure the component tree containing the selected component cannot be hidden --- packages/builder/src/builderStore/index.js | 12 +++++++++++- .../ComponentTree.svelte | 17 ++++++++++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index 82556c74cf..504f33861b 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -3,7 +3,7 @@ import { getAutomationStore } from "./store/automation" import { getThemeStore } from "./store/theme" import { derived, writable } from "svelte/store" import { FrontendTypes, LAYOUT_NAMES } from "../constants" -import { findComponent } from "./componentUtils" +import { findComponent, findComponentPath } from "./componentUtils" export const store = getFrontendStore() export const automationStore = getAutomationStore() @@ -29,6 +29,16 @@ export const selectedComponent = derived( } ) +export const selectedComponentPath = derived( + [store, currentAsset], + ([$store, $currentAsset]) => { + return findComponentPath( + $currentAsset.props, + $store.selectedComponentId + ).map(component => component._id) + } +) + export const currentAssetId = derived(store, $store => { return $store.currentFrontEndType === FrontendTypes.SCREEN ? $store.selectedScreenId diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte index ddcc08479b..6b78bc40c1 100644 --- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte @@ -5,6 +5,7 @@ import NavItem from "components/common/NavItem.svelte" import { capitalise } from "helpers" import { notifications } from "@budibase/bbui" + import { selectedComponentPath } from "builderStore" export let components = [] export let currentComponent @@ -71,10 +72,20 @@ notifications.error("Error saving component") } } + + const isOpen = (component, selectedComponentPath, closedNodes) => { + if (!component?._children?.length) { + return false + } + if (selectedComponentPath.includes(component._id)) { + return true + } + return !closedNodes[component._id] + }
    - {#each components as component, index (component._id)} + {#each components || [] as component, index (component._id)}
  • selectComponent(component)}> {#if $dragDropStore?.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
    - {#if component._children && !closedNodes[component._id]} + {#if isOpen(component, $selectedComponentPath, closedNodes)} Date: Mon, 21 Mar 2022 15:21:29 +0000 Subject: [PATCH 10/19] Fix issue when currentAsset is null and fix overflow when no screens for current role --- packages/builder/src/builderStore/index.js | 2 +- .../NavigationPanel/ComponentNavigationTree/index.svelte | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index 504f33861b..619bdd94a1 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -33,7 +33,7 @@ export const selectedComponentPath = derived( [store, currentAsset], ([$store, $currentAsset]) => { return findComponentPath( - $currentAsset.props, + $currentAsset?.props, $store.selectedComponentId ).map(component => component._id) } diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte index 187a8da98e..1c108f164e 100644 --- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte @@ -55,11 +55,10 @@ } -
    +
    {#each paths as path, idx (path)} 0} {path} route={routes[path]} /> {/each} - {#if !paths.length}
    There aren't any screens configured with this access role. @@ -68,7 +67,7 @@
    diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte index 8a1ae83792..0611d4fc71 100644 --- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte @@ -148,15 +148,21 @@
    -
    - {#each $store.layouts as layout, idx (layout._id)} - 0} /> - {/each} +
    +
    + {#each $store.layouts as layout, idx (layout._id)} + 0} /> + {/each} +
    +
    @@ -212,4 +218,12 @@ height: 0; position: relative; } + .nav-items-container--layouts { + border-top: none; + margin-top: calc(-1 * var(--spectrum-global-dimension-static-size-150)); + } + + .layouts-container { + min-width: max-content; + } From 278c4932aa7cc4f157efbd6ee3789b5e9d459bf4 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 21 Mar 2022 15:47:49 +0000 Subject: [PATCH 12/19] Update datasource navigation to use new full width nav items --- .../DatasourceNavigator/DatasourceNavigator.svelte | 2 +- .../builder/app/[application]/data/_layout.svelte | 10 ++-------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte index 45ff66a901..aa58c63ee7 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte @@ -110,7 +110,7 @@ {#if $database?._id} -
    +
    {#each enrichedDataSources as datasource, idx} 0} diff --git a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte index f321a2c422..9664ebbd09 100644 --- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte @@ -23,10 +23,8 @@
    -
    - - -
    + +
    Date: Mon, 21 Mar 2022 15:48:00 +0000 Subject: [PATCH 13/19] Update automation navigation to use new full width nav items --- .../AutomationPanel/AutomationPanel.svelte | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte index 0c975eab18..2c67a3966c 100644 --- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte @@ -10,12 +10,10 @@
    -
    - - - - -
    + + + +
    @@ -24,9 +22,6 @@