From f08c52207985a44741812347d99f96532adbeada Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 23 Jan 2023 15:38:43 +0000 Subject: [PATCH] Onboarding core components (#9412) * Update BB logo to black * Update top nav bar and core layout * Add redesign for apps pages * Update user and groups pages * More WIP portal redesign! * Fix top nav colours and fix selected tab not updating * Remove log * Update copy on settings pages * Update and standardise page headers and subtitles, and remove side nav titles * Update font styles to allow for easy customisation * Update button styles to always use newStyles, update auth page styles * Update settings pages to new designs * Update structure for account pages * Add initial rewrite of app overview section * Update config checklist to properly center * Update app overview version and name/url screens * Add tooltip to explain why URL cannot be changed until unpublishing * Update overview automation history tab * Update overview backups page * Rewrite app overview access tab * Update table hover colours * Remove scrolling from tables when not required and stop selects from updating their own state locally * Update table styles to support flexible column widths much better * Fix extremely long strings in breadcrumbs not wrapping * Fix multiple issues with long text overflow * Fix flashing in version settings page * Fix loading bugs in app backups page * Add sidebar for portal and use it for automation history. Fix multiple overflow and scrolling issues * Tidy up * Update user details page to use tables and match designs * Update users detail page * Update user and group details pages with new tables * Fix automation error linking from apps page and improve automation fetching logic in automation history * Move theme and API key into user profile dropdown instead of settings * Move settings before account and show plugins for devs * Convert plugins page to table and update components and modals * Update links when going back from the builder * Update plugin search placeholder * Fix URLs in app overview * Properly handle text overflow in plugins table * Remove getting started checklist * Fix checklist removal and fix profile modal * Update email details page to match new designs * Cleanup * Add licensing and env logic to determine which account links to show * Update upgrade button URL for cloud accounts * Update app list to use a more compact style * Make core page layout responsive and update apps list to be responsive * Update mobile design of apps page * Update more pages to be responsive and add mobile specific components * Refactor main portal page into multiple components * Update multiple pages to be responsive and improve loading experience * Make automation history page responsive * Update backups page to be responsive * Update pickers to use absolutely positioned root popover so that overflow does not matter * Fix some responsive styles * Fix update link in app overview * Improve dropdown logic * Lint * Update click outside handler to handle modals properly * Remove log * Fix mobile menu upgrade button not closing menu * Hide groups page if disabled at tenant level * Centralise menu logic and show full menu on mobile * Update app access assignment and fix backups table * Ensure avatars cannot be squished * Standardise disabled field text colour * Allow developer users to access users, groups and usage pages * Allow readonly access to users and groups for developer users * Remove logs * Improve users page loading experience * Improve responsiveness on apps list page and fix discussions link styles * Update spacing on user and group detail page and fix usage page showing wrong copy * Fix logo override not working * Pin minio version to an old one that supports the fs backend in dev * Shrink upgrade button * Shrink user dropdown * Update assignment modal text * Remove clickable visual styles from plugins * Always show groups section in app access page * Update app overview button styles to include more CTAs * Hide edit and view links in more menu on overview page unless on mobile * Make usage stats responsive and fix layout issues * Add core page layout for onboarding to frontend-core * Add initial work on fancy form components for onboarding * Add checkbox component and add error handling to fancy form fields * Add fancy select and improve other fancy components * Update fancy components and fix select rounded corners * Fix mobile styles for split pages * Revert google button * Fix links not working with click handlers * Fix label animation * Improve styles of fancy components * Improve mobile compatibility with fancy button radio * Revert changes to builder files for testing * Tidy up small UI issues * Improve some minor design issues * Fix issue with scroll padding not being applied * Ensure unauthorised users cannot view pages they should not be able to * Lint --- .../bbui/src/ActionButton/ActionButton.svelte | 1 + .../bbui/src/FancyForm/FancyButton.svelte | 29 ++++ .../src/FancyForm/FancyButtonRadio.svelte | 70 +++++++++ .../bbui/src/FancyForm/FancyCheckbox.svelte | 53 +++++++ packages/bbui/src/FancyForm/FancyField.svelte | 126 ++++++++++++++++ .../bbui/src/FancyForm/FancyFieldLabel.svelte | 25 ++++ packages/bbui/src/FancyForm/FancyForm.svelte | 40 ++++++ packages/bbui/src/FancyForm/FancyInput.svelte | 63 ++++++++ .../bbui/src/FancyForm/FancySelect.svelte | 135 ++++++++++++++++++ packages/bbui/src/FancyForm/index.js | 6 + packages/bbui/src/Form/Core/Select.svelte | 3 + packages/bbui/src/Layout/Page.svelte | 8 +- packages/bbui/src/Link/Link.svelte | 5 +- packages/bbui/src/index.js | 3 + .../components/portal/page/SideNavItem.svelte | 2 +- .../src/pages/builder/portal/_layout.svelte | 2 +- .../builder/portal/account/_layout.svelte | 9 +- .../pages/builder/portal/apps/index.svelte | 2 +- .../builder/portal/settings/_layout.svelte | 5 +- .../pages/builder/portal/users/_layout.svelte | 5 +- .../src/components/SplitPage.svelte | 50 +++++++ .../src/components/TestimonialPage.svelte | 62 ++++++++ .../frontend-core/src/components/index.js | 2 + packages/frontend-core/src/index.js | 1 + 24 files changed, 694 insertions(+), 13 deletions(-) create mode 100644 packages/bbui/src/FancyForm/FancyButton.svelte create mode 100644 packages/bbui/src/FancyForm/FancyButtonRadio.svelte create mode 100644 packages/bbui/src/FancyForm/FancyCheckbox.svelte create mode 100644 packages/bbui/src/FancyForm/FancyField.svelte create mode 100644 packages/bbui/src/FancyForm/FancyFieldLabel.svelte create mode 100644 packages/bbui/src/FancyForm/FancyForm.svelte create mode 100644 packages/bbui/src/FancyForm/FancyInput.svelte create mode 100644 packages/bbui/src/FancyForm/FancySelect.svelte create mode 100644 packages/bbui/src/FancyForm/index.js create mode 100644 packages/frontend-core/src/components/SplitPage.svelte create mode 100644 packages/frontend-core/src/components/TestimonialPage.svelte create mode 100644 packages/frontend-core/src/components/index.js diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index cfc810807e..cc4417be2a 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -88,6 +88,7 @@ } .is-selected:not(.spectrum-ActionButton--emphasized) { background: var(--spectrum-global-color-gray-300); + border-color: var(--spectrum-global-color-gray-700); } .noPadding { padding: 0; diff --git a/packages/bbui/src/FancyForm/FancyButton.svelte b/packages/bbui/src/FancyForm/FancyButton.svelte new file mode 100644 index 0000000000..09615df8fa --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyButton.svelte @@ -0,0 +1,29 @@ + + + + {#if icon} + {#if icon.includes("/")} + button + {:else} + + {/if} + {/if} +
+ +
+ + + diff --git a/packages/bbui/src/FancyForm/FancyButtonRadio.svelte b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte new file mode 100644 index 0000000000..510fd8efb8 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte @@ -0,0 +1,70 @@ + + + + {#if label} + {label} + {/if} + +
+ {#each options as option} + onChange(getOptionValue(option))} + > + {getOptionLabel(option)} + + {/each} +
+ + + diff --git a/packages/bbui/src/FancyForm/FancyCheckbox.svelte b/packages/bbui/src/FancyForm/FancyCheckbox.svelte new file mode 100644 index 0000000000..191cc79485 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyCheckbox.svelte @@ -0,0 +1,53 @@ + + + + + + +
+ {#if text} + {text} + {/if} + +
+ + + diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte new file mode 100644 index 0000000000..89f2dec7d0 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyField.svelte @@ -0,0 +1,126 @@ + + +
+
+
+ +
+ {#if error} +
+ +
+ {/if} +
+ {#if error} +
+ {error} +
+ {/if} +
+ + diff --git a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte new file mode 100644 index 0000000000..181cff50e4 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte @@ -0,0 +1,25 @@ + + +
+ +
+ + diff --git a/packages/bbui/src/FancyForm/FancyForm.svelte b/packages/bbui/src/FancyForm/FancyForm.svelte new file mode 100644 index 0000000000..f874238572 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyForm.svelte @@ -0,0 +1,40 @@ + + +
+ +
+ + diff --git a/packages/bbui/src/FancyForm/FancyInput.svelte b/packages/bbui/src/FancyForm/FancyInput.svelte new file mode 100644 index 0000000000..ef254949c8 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyInput.svelte @@ -0,0 +1,63 @@ + + + + {#if label} + {label} + {/if} + (focused = true)} + on:blur={() => (focused = false)} + class:placeholder + /> + + + diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte new file mode 100644 index 0000000000..240871fc9a --- /dev/null +++ b/packages/bbui/src/FancyForm/FancySelect.svelte @@ -0,0 +1,135 @@ + + + (open = true)} +> + {#if label} + {label} + {/if} + +
+ {value || ""} +
+ +
+ +
+ + + (open = false)} + useAnchorWidth={true} + maxWidth={null} +> +
+ {#if options.length} + {#each options as option, idx} +
onChange(getOptionValue(option, idx))} + > + + {getOptionLabel(option, idx)} + + {#if value === getOptionValue(option, idx)} + + {/if} +
+ {/each} + {/if} +
+ + + diff --git a/packages/bbui/src/FancyForm/index.js b/packages/bbui/src/FancyForm/index.js new file mode 100644 index 0000000000..241036fb35 --- /dev/null +++ b/packages/bbui/src/FancyForm/index.js @@ -0,0 +1,6 @@ +export { default as FancyInput } from "./FancyInput.svelte" +export { default as FancyCheckbox } from "./FancyCheckbox.svelte" +export { default as FancySelect } from "./FancySelect.svelte" +export { default as FancyButton } from "./FancyButton.svelte" +export { default as FancyForm } from "./FancyForm.svelte" +export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte" diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte index 3e15b7f6ef..721083e3a6 100644 --- a/packages/bbui/src/Form/Core/Select.svelte +++ b/packages/bbui/src/Form/Core/Select.svelte @@ -18,8 +18,11 @@ export let autoWidth = false export let autocomplete = false export let sort = false + const dispatch = createEventDispatcher() + let open = false + $: fieldText = getFieldText(value, options, placeholder) $: fieldIcon = getFieldAttribute(getOptionIcon, value, options) $: fieldColour = getFieldAttribute(getOptionColour, value, options) diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 15aabd2c61..01111fda9a 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -18,6 +18,7 @@
+
import "@spectrum-css/link/dist/index-vars.css" + import { createEventDispatcher } from "svelte" export let href = "#" export let size = "M" @@ -9,10 +10,12 @@ export let overBackground = false export let target export let download + + const dispatch = createEventDispatcher() dispatch("click") && e.stopPropagation()} {href} {target} {download} diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 601c4dcbca..3de0bc2f46 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -101,3 +101,6 @@ export { banner, BANNER_TYPES } from "./Stores/banner" // Helpers export * as Helpers from "./helpers" + +// Fancy form components +export * from "./FancyForm" diff --git a/packages/builder/src/components/portal/page/SideNavItem.svelte b/packages/builder/src/components/portal/page/SideNavItem.svelte index b31afb683f..c22b8b6113 100644 --- a/packages/builder/src/components/portal/page/SideNavItem.svelte +++ b/packages/builder/src/components/portal/page/SideNavItem.svelte @@ -5,7 +5,7 @@ - {text} + {text || ""} diff --git a/packages/frontend-core/src/components/TestimonialPage.svelte b/packages/frontend-core/src/components/TestimonialPage.svelte new file mode 100644 index 0000000000..3028d4447a --- /dev/null +++ b/packages/frontend-core/src/components/TestimonialPage.svelte @@ -0,0 +1,62 @@ + + + + +
+
+ +
+ "Here is an example of how Budibase changed my life for the better and + now all I do is eat, sleep, build apps, repeat." +
+
+ +
+
No-code Enthusiast
+
Bedroom TLD
+
+
+ +
+
+ + + diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js new file mode 100644 index 0000000000..7ca21c4ff9 --- /dev/null +++ b/packages/frontend-core/src/components/index.js @@ -0,0 +1,2 @@ +export { default as SplitPage } from "./SplitPage.svelte" +export { default as TestimonialPage } from "./TestimonialPage.svelte" diff --git a/packages/frontend-core/src/index.js b/packages/frontend-core/src/index.js index aecca81cda..01bf05c69e 100644 --- a/packages/frontend-core/src/index.js +++ b/packages/frontend-core/src/index.js @@ -3,3 +3,4 @@ export { fetchData } from "./fetch/fetchData" export * as Constants from "./constants" export * from "./stores" export * from "./utils" +export * from "./components"