From 659cfd249270f9930ecf5099c53ff714c1ab3289 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 2 Feb 2023 10:06:41 +0000 Subject: [PATCH] Misc fixes and improvements (#9503) * Rewrite position dropdown helper to properly work as a svelte action, improve performance and fix bugs * Update action button styles * Update spacing on some onboarding pages and update background gradient * Prevent special characters in first app name * Fix type in onboarding tour * Default first app name and url to having a value * Update text in first app onboarding file upload * Fix double mounting of apps page causing issues and templates error * Fix null app ID when creating your first app using data upload * Fix app deletion not causing app list to be refreshed --- .../bbui/src/ActionButton/ActionButton.svelte | 2 +- .../bbui/src/Actions/position_dropdown.js | 65 +++++++++++++----- packages/bbui/src/Popover/Popover.svelte | 46 ++++++------- .../onboarding/steps/OnboardingData.svelte | 2 +- .../components/start/CreateAppModal.svelte | 1 - .../src/pages/builder/auth/forgot.svelte | 12 +++- .../src/pages/builder/auth/login.svelte | 13 ++-- .../src/pages/builder/invite/index.svelte | 3 +- .../src/pages/builder/portal/_layout.svelte | 63 +++++++++-------- .../pages/builder/portal/apps/_layout.svelte | 12 ++-- .../onboarding/_components/NamePanel.svelte | 5 ++ .../portal/apps/onboarding/index.svelte | 16 ++--- .../portal/overview/[appId]/_layout.svelte | 3 +- .../builder/portal/overview/_layout.svelte | 13 ++-- .../portal/users/groups/[groupId].svelte | 2 +- .../builder/portal/users/groups/index.svelte | 4 +- .../portal/users/users/[userId].svelte | 7 +- packages/frontend-core/assets/bg.png | Bin 1765541 -> 2360061 bytes 18 files changed, 152 insertions(+), 117 deletions(-) diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index a8dc989313..663128160f 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -86,7 +86,7 @@ } .is-selected:not(.spectrum-ActionButton--emphasized):not(.spectrum-ActionButton--quiet) { background: var(--spectrum-global-color-gray-300); - border-color: var(--spectrum-global-color-gray-700); + border-color: var(--spectrum-global-color-gray-500); } .noPadding { padding: 0; diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js index d99601afeb..abc7188985 100644 --- a/packages/bbui/src/Actions/position_dropdown.js +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -1,11 +1,21 @@ -export default function positionDropdown( - element, - { anchor, align, maxWidth, useAnchorWidth, offset = 5 } -) { - const update = () => { +export default function positionDropdown(element, opts) { + let resizeObserver + let latestOpts = opts + + // We need a static reference to this function so that we can properly + // clean up the scroll listener. + const scrollUpdate = () => { + updatePosition(latestOpts) + } + + // Updates the position of the dropdown + const updatePosition = opts => { + const { anchor, align, maxWidth, useAnchorWidth, offset = 5 } = opts if (!anchor) { return } + + // Compute bounds const anchorBounds = anchor.getBoundingClientRect() const elementBounds = element.getBoundingClientRect() let styles = { @@ -51,26 +61,47 @@ export default function positionDropdown( }) } + // The actual svelte action callback which creates observers on the relevant + // DOM elements + const update = newOpts => { + latestOpts = newOpts + + // Cleanup old state + if (resizeObserver) { + resizeObserver.disconnect() + } + + // Do nothing if no anchor + const { anchor } = newOpts + if (!anchor) { + return + } + + // Observe both anchor and element and resize the popover as appropriate + resizeObserver = new ResizeObserver(() => updatePosition(newOpts)) + resizeObserver.observe(anchor) + resizeObserver.observe(element) + resizeObserver.observe(document.body) + } + // Apply initial styles which don't need to change element.style.position = "absolute" element.style.zIndex = "9999" - // Observe both anchor and element and resize the popover as appropriate - const resizeObserver = new ResizeObserver(entries => { - entries.forEach(update) - }) - if (anchor) { - resizeObserver.observe(anchor) - } - resizeObserver.observe(element) - resizeObserver.observe(document.body) + // Set up a scroll listener + document.addEventListener("scroll", scrollUpdate, true) - document.addEventListener("scroll", update, true) + // Perform initial update + update(opts) return { + update, destroy() { - resizeObserver.disconnect() - document.removeEventListener("scroll", update, true) + // Cleanup + if (resizeObserver) { + resizeObserver.disconnect() + } + document.removeEventListener("scroll", scrollUpdate, true) }, } } diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte index b873fabb80..8f6ef06591 100644 --- a/packages/bbui/src/Popover/Popover.svelte +++ b/packages/bbui/src/Popover/Popover.svelte @@ -57,30 +57,28 @@ {#if open} - {#key anchor} - -
{}, - anchor, - }} - on:keydown={handleEscape} - class="spectrum-Popover is-open" - role="presentation" - transition:fly|local={{ y: -20, duration: 200 }} - > - -
- - {/key} + +
{}, + anchor, + }} + on:keydown={handleEscape} + class="spectrum-Popover is-open" + role="presentation" + transition:fly|local={{ y: -20, duration: 200 }} + > + +
+ {/if} diff --git a/packages/builder/src/pages/builder/auth/login.svelte b/packages/builder/src/pages/builder/auth/login.svelte index 032cf850fa..80122c23a5 100644 --- a/packages/builder/src/pages/builder/auth/login.svelte +++ b/packages/builder/src/pages/builder/auth/login.svelte @@ -66,7 +66,7 @@ - + {#if loaded} logo @@ -124,14 +124,19 @@ - diff --git a/packages/builder/src/pages/builder/invite/index.svelte b/packages/builder/src/pages/builder/invite/index.svelte index 4b786db497..35231117c4 100644 --- a/packages/builder/src/pages/builder/invite/index.svelte +++ b/packages/builder/src/pages/builder/invite/index.svelte @@ -68,7 +68,7 @@ - + logo Join {company} @@ -175,6 +175,7 @@