From d92f1a709713b40809eaeae7444b9b33e200696b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 18 Jan 2023 13:56:53 +0000 Subject: [PATCH] Portal redesign (#9336) * 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 comment to docker-compose config --- hosting/docker-compose.dev.yaml | 3 +- packages/bbui/src/Actions/click_outside.js | 17 +- .../bbui/src/Actions/position_dropdown.js | 103 ++--- packages/bbui/src/Avatar/Avatar.svelte | 1 + packages/bbui/src/Button/Button.svelte | 8 +- packages/bbui/src/Drawer/DrawerContent.svelte | 1 - packages/bbui/src/Form/Core/DatePicker.svelte | 2 +- packages/bbui/src/Form/Core/Picker.svelte | 259 +++++------ packages/bbui/src/Form/Core/TextField.svelte | 4 - packages/bbui/src/Icon/IconAvatar.svelte | 3 + .../bbui/src/InlineAlert/InlineAlert.svelte | 1 + packages/bbui/src/Label/Label.svelte | 1 + packages/bbui/src/Layout/Page.svelte | 89 +++- packages/bbui/src/List/ListItem.svelte | 9 +- packages/bbui/src/Modal/CustomContent.svelte | 1 - packages/bbui/src/Modal/Modal.svench | 1 - packages/bbui/src/Modal/ModalContent.svelte | 5 +- packages/bbui/src/Modal/QuizModal.svelte | 1 - packages/bbui/src/Popover/Popover.svelte | 22 +- packages/bbui/src/Popover/Popover.svench | 1 - packages/bbui/src/Table/StringRenderer.svelte | 10 +- packages/bbui/src/Table/Table.svelte | 49 +- packages/bbui/src/Tabs/Tab.svelte | 3 +- packages/bbui/src/Tags/Tag.svelte | 2 +- packages/bbui/src/Tags/Tags.svelte | 10 + packages/bbui/src/Typography/Heading.svelte | 6 + packages/bbui/src/bbui.css | 10 +- packages/builder/assets/bb-emblem.svg | 2 +- packages/builder/package.json | 2 +- packages/builder/src/App.svelte | 3 - .../components/backend/DataTable/Table.svelte | 1 - .../TableNavigator/TableDataImport.svelte | 1 - .../src/components/common/AppLockModal.svelte | 147 +++--- .../components/common/CodeMirrorEditor.svelte | 2 +- .../components/common/ConfigChecklist.svelte | 64 --- .../src/components/common/EditableIcon.svelte | 51 ++- .../src/components/common/HelpIcon.svelte | 1 + .../src/components/common/RoleSelect.svelte | 43 +- .../components/common/TemplateDisplay.svelte | 190 ++++---- .../common/bindings/BindingPanel.svelte | 2 +- .../components/common/inputs/CopyInput.svelte | 2 +- .../src/components/deploy/DeployModal.svelte | 8 +- .../components/deploy/DeployNavigation.svelte | 2 +- .../components/integration/QueryEditor.svelte | 2 +- .../automation/HistoryDetailsPanel.svelte | 106 ----- .../overview/automation/StatusRenderer.svelte | 39 -- .../components/portal/page/Breadcrumb.svelte | 37 ++ .../components/portal/page/Breadcrumbs.svelte | 22 + .../src/components/portal/page/Content.svelte | 46 ++ .../src/components/portal/page/Header.svelte | 52 +++ .../src/components/portal/page/SideNav.svelte | 26 ++ .../components/portal/page/SideNavItem.svelte | 23 + .../src/components/portal/page/index.js | 6 + ...eAPIKeyModal.svelte => APIKeyModal.svelte} | 19 +- ...erInfoModal.svelte => ProfileModal.svelte} | 6 +- .../src/components/settings/ThemeModal.svelte | 16 + .../src/components/start/AppRow.svelte | 180 +++++--- .../components/start/ChooseIconModal.svelte | 92 ++-- .../components/start/CreateAppModal.svelte | 1 + .../components/start/UpdateAppModal.svelte | 64 ++- .../builder/src/components/usage/Usage.svelte | 29 +- .../src/components/usage/UsageDashCard.svelte | 2 +- packages/builder/src/global.css | 1 - .../builder/app/[application]/_layout.svelte | 20 +- .../new/_components/NewComponentPanel.svelte | 1 + .../screens/_components/RoleIndicator.svelte | 1 + .../_components/ScreenSettingsPanel.svelte | 2 +- .../_components/ButtonRoundnessSelect.svelte | 2 +- .../src/pages/builder/apps/index.svelte | 13 +- .../builder/portal/_components/Logo.svelte | 18 + .../portal/_components/MobileMenu.svelte | 101 +++++ .../portal/_components/UpgradeButton.svelte | 26 ++ .../portal/_components/UserDropdown.svelte | 78 ++++ .../src/pages/builder/portal/_layout.svelte | 403 ++++------------- .../builder/portal/account/_layout.svelte | 21 + .../pages/builder/portal/account/index.svelte | 4 + .../{settings => account}/upgrade.svelte | 68 ++- .../portal/{settings => account}/usage.svelte | 100 +++-- .../apps/_components/AcessFilter.svelte | 49 -- .../pages/builder/portal/apps/_layout.svelte | 38 ++ .../pages/builder/portal/apps/create.svelte | 145 ++---- .../pages/builder/portal/apps/index.svelte | 259 +++-------- .../builder/portal/apps/templates.svelte | 46 +- .../builder/portal/manage/_layout.svelte | 20 - .../email/_components/TemplateBindings.svelte | 15 - .../portal/manage/groups/[groupId].svelte | 264 ----------- .../portal/manage/groups/_layout.svelte | 3 - .../portal/overview/[appId]/_layout.svelte | 275 ++++++++++++ .../_components/AssignmentModal.svelte | 25 +- .../_components/EditableRoleRenderer.svelte | 26 ++ .../overview/[appId]/access/index.svelte | 271 ++++++++++++ .../_components/HistoryDetailsPanel.svelte | 82 ++++ .../_components/StatusRenderer.svelte | 27 ++ .../[appId]/automation-history/index.svelte} | 210 ++++----- .../_components}/ActionsRenderer.svelte | 0 .../_components}/AppSizeRenderer.svelte | 0 .../_components}/CreateBackupModal.svelte | 0 .../_components}/CreateRestoreModal.svelte | 0 .../_components}/DatasourceRenderer.svelte | 0 .../backups/_components}/NameRenderer.svelte | 0 .../_components}/StatusRenderer.svelte | 0 .../backups/_components}/TypeRenderer.svelte | 0 .../backups/_components}/UserRenderer.svelte | 0 .../overview/[appId]/backups/index.svelte} | 214 +++++---- .../portal/overview/[appId]/index.svelte | 4 + .../overview/[appId]/name-and-url.svelte | 77 ++++ .../overview.svelte} | 113 +++-- .../portal/overview/[appId]/version.svelte | 40 ++ .../overview/[application]/index.svelte | 417 ------------------ .../overview/_components/AccessTab.svelte | 224 ---------- .../overview/_components/AutomationTab.svelte | 11 - .../overview/_components/SettingsTab.svelte | 116 ----- .../builder/portal/overview/_layout.svelte | 20 + .../builder/portal/overview/index.svelte | 4 + .../plugins/_components/AddPluginModal.svelte | 0 .../_components/DeletePluginModal.svelte | 5 +- .../_components/EditPluginModal.svelte | 83 ++++ .../_components/EditPluginRenderer.svelte | 14 + .../_components/PluginNameRenderer.svelte | 36 ++ .../plugins/_components/PluginRow.svelte | 2 +- .../portal/{manage => }/plugins/index.svelte | 80 +++- .../builder/portal/settings/_layout.svelte | 19 +- .../auth/_logos/Google.svelte | 0 .../auth/_logos/OIDC.svelte | 0 .../{manage => settings}/auth/index.svelte | 243 +++++----- .../email/[template].svelte | 57 +-- .../email/_components/TemplateBindings.svelte | 38 ++ .../{manage => settings}/email/_layout.svelte | 0 .../{manage => settings}/email/index.svelte | 13 +- .../builder/portal/settings/index.svelte | 4 +- .../portal/settings/organisation.svelte | 39 +- .../builder/portal/settings/theming.svelte | 37 -- .../{update.svelte => version.svelte} | 24 +- .../pages/builder/portal/users/_layout.svelte | 22 + .../portal/users/groups/[groupId].svelte | 262 +++++++++++ .../groups/_components/AppAddModal.svelte | 0 .../_components/CreateEditGroupModal.svelte | 4 +- .../_components/GroupAppsTableRenderer.svelte | 0 .../groups/_components/GroupIcon.svelte | 0 .../_components/GroupNameTableRenderer.svelte | 11 +- .../RemoveUserTableRenderer.svelte | 18 + .../_components/UsersTableRenderer.svelte | 0 .../{manage => users}/groups/index.svelte | 30 +- .../pages/builder/portal/users/index.svelte | 4 + .../{manage => users}/users/[userId].svelte | 297 +++++++------ .../users/_components/AddUserModal.svelte | 0 .../_components/AppNameTableRenderer.svelte | 30 ++ .../_components/AppRoleTableRenderer.svelte | 16 + .../_components/AppsTableRenderer.svelte | 0 .../users/_components/DeleteUserModal.svelte | 0 .../_components/DeletionFailureModal.svelte | 0 .../users/_components/EmailSelect.svelte | 0 .../ForceResetPasswordModal.svelte | 0 .../_components/GroupsTableRenderer.svelte | 0 .../users/_components/ImportUsersModal.svelte | 1 - .../users/_components/InvitedModal.svelte | 0 .../_components/OnboardingTypeModal.svelte | 0 .../PasswordCopyTableRenderer.svelte} | 0 .../users/_components/PasswordModal.svelte | 4 +- .../RemoveGroupTableRenderer.svelte | 18 + .../_components/RoleTableRenderer.svelte | 0 .../_components/RolesTagsTableRenderer.svelte | 0 .../_components/TagsTableRenderer.svelte | 0 .../users/_components/UpdateRolesModal.svelte | 0 .../{manage => users}/users/index.svelte | 125 +++--- packages/builder/src/stores/portal/admin.js | 6 - packages/builder/src/stores/portal/index.js | 2 + packages/builder/src/stores/portal/menu.js | 103 +++++ .../builder/src/stores/portal/overview.js | 21 + packages/builder/yarn.lock | 8 +- .../frontend-core/src/themes/midnight.css | 2 +- .../static/templates/BudibaseApp.svelte | 1 - 172 files changed, 3933 insertions(+), 3511 deletions(-) delete mode 100644 packages/builder/src/components/common/ConfigChecklist.svelte delete mode 100644 packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte delete mode 100644 packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte create mode 100644 packages/builder/src/components/portal/page/Breadcrumb.svelte create mode 100644 packages/builder/src/components/portal/page/Breadcrumbs.svelte create mode 100644 packages/builder/src/components/portal/page/Content.svelte create mode 100644 packages/builder/src/components/portal/page/Header.svelte create mode 100644 packages/builder/src/components/portal/page/SideNav.svelte create mode 100644 packages/builder/src/components/portal/page/SideNavItem.svelte create mode 100644 packages/builder/src/components/portal/page/index.js rename packages/builder/src/components/settings/{UpdateAPIKeyModal.svelte => APIKeyModal.svelte} (63%) rename packages/builder/src/components/settings/{UpdateUserInfoModal.svelte => ProfileModal.svelte} (89%) create mode 100644 packages/builder/src/components/settings/ThemeModal.svelte create mode 100644 packages/builder/src/pages/builder/portal/_components/Logo.svelte create mode 100644 packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte create mode 100644 packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte create mode 100644 packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte create mode 100644 packages/builder/src/pages/builder/portal/account/_layout.svelte create mode 100644 packages/builder/src/pages/builder/portal/account/index.svelte rename packages/builder/src/pages/builder/portal/{settings => account}/upgrade.svelte (72%) rename packages/builder/src/pages/builder/portal/{settings => account}/usage.svelte (74%) delete mode 100644 packages/builder/src/pages/builder/portal/apps/_components/AcessFilter.svelte create mode 100644 packages/builder/src/pages/builder/portal/apps/_layout.svelte delete mode 100644 packages/builder/src/pages/builder/portal/manage/_layout.svelte delete mode 100644 packages/builder/src/pages/builder/portal/manage/email/_components/TemplateBindings.svelte delete mode 100644 packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte delete mode 100644 packages/builder/src/pages/builder/portal/manage/groups/_layout.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte rename packages/builder/src/pages/builder/portal/overview/{ => [appId]/access}/_components/AssignmentModal.svelte (91%) create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/EditableRoleRenderer.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/HistoryDetailsPanel.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/StatusRenderer.svelte rename packages/builder/src/{components/portal/overview/automation/HistoryTab.svelte => pages/builder/portal/overview/[appId]/automation-history/index.svelte} (64%) rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/ActionsRenderer.svelte (100%) rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/AppSizeRenderer.svelte (100%) rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/CreateBackupModal.svelte (100%) rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/CreateRestoreModal.svelte (100%) rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/DatasourceRenderer.svelte (100%) rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/NameRenderer.svelte (100%) rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/StatusRenderer.svelte (100%) rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/TypeRenderer.svelte (100%) rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/UserRenderer.svelte (100%) rename packages/builder/src/{components/portal/overview/backups/BackupsTab.svelte => pages/builder/portal/overview/[appId]/backups/index.svelte} (65%) create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/index.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/name-and-url.svelte rename packages/builder/src/pages/builder/portal/overview/{_components/OverviewTab.svelte => [appId]/overview.svelte} (77%) create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/version.svelte delete mode 100644 packages/builder/src/pages/builder/portal/overview/[application]/index.svelte delete mode 100644 packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte delete mode 100644 packages/builder/src/pages/builder/portal/overview/_components/AutomationTab.svelte delete mode 100644 packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/_layout.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/index.svelte rename packages/builder/src/pages/builder/portal/{manage => }/plugins/_components/AddPluginModal.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => }/plugins/_components/DeletePluginModal.svelte (88%) create mode 100644 packages/builder/src/pages/builder/portal/plugins/_components/EditPluginModal.svelte create mode 100644 packages/builder/src/pages/builder/portal/plugins/_components/EditPluginRenderer.svelte create mode 100644 packages/builder/src/pages/builder/portal/plugins/_components/PluginNameRenderer.svelte rename packages/builder/src/pages/builder/portal/{manage => }/plugins/_components/PluginRow.svelte (97%) rename packages/builder/src/pages/builder/portal/{manage => }/plugins/index.svelte (53%) rename packages/builder/src/pages/builder/portal/{manage => settings}/auth/_logos/Google.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => settings}/auth/_logos/OIDC.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => settings}/auth/index.svelte (74%) rename packages/builder/src/pages/builder/portal/{manage => settings}/email/[template].svelte (82%) create mode 100644 packages/builder/src/pages/builder/portal/settings/email/_components/TemplateBindings.svelte rename packages/builder/src/pages/builder/portal/{manage => settings}/email/_layout.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => settings}/email/index.svelte (93%) delete mode 100644 packages/builder/src/pages/builder/portal/settings/theming.svelte rename packages/builder/src/pages/builder/portal/settings/{update.svelte => version.svelte} (78%) create mode 100644 packages/builder/src/pages/builder/portal/users/_layout.svelte create mode 100644 packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/AppAddModal.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/CreateEditGroupModal.svelte (90%) rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/GroupAppsTableRenderer.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/GroupIcon.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/GroupNameTableRenderer.svelte (64%) create mode 100644 packages/builder/src/pages/builder/portal/users/groups/_components/RemoveUserTableRenderer.svelte rename packages/builder/src/pages/builder/portal/{manage => users}/groups/_components/UsersTableRenderer.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/groups/index.svelte (87%) create mode 100644 packages/builder/src/pages/builder/portal/users/index.svelte rename packages/builder/src/pages/builder/portal/{manage => users}/users/[userId].svelte (57%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/AddUserModal.svelte (100%) create mode 100644 packages/builder/src/pages/builder/portal/users/users/_components/AppNameTableRenderer.svelte create mode 100644 packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/AppsTableRenderer.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/DeleteUserModal.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/DeletionFailureModal.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/EmailSelect.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/ForceResetPasswordModal.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/GroupsTableRenderer.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/ImportUsersModal.svelte (99%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/InvitedModal.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/OnboardingTypeModal.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage/users/_components/PasswordCopyRenderer.svelte => users/users/_components/PasswordCopyTableRenderer.svelte} (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/PasswordModal.svelte (95%) create mode 100644 packages/builder/src/pages/builder/portal/users/users/_components/RemoveGroupTableRenderer.svelte rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/RoleTableRenderer.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/RolesTagsTableRenderer.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/TagsTableRenderer.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/_components/UpdateRolesModal.svelte (100%) rename packages/builder/src/pages/builder/portal/{manage => users}/users/index.svelte (78%) create mode 100644 packages/builder/src/stores/portal/menu.js create mode 100644 packages/builder/src/stores/portal/overview.js diff --git a/hosting/docker-compose.dev.yaml b/hosting/docker-compose.dev.yaml index 1626d520b6..7906a389fa 100644 --- a/hosting/docker-compose.dev.yaml +++ b/hosting/docker-compose.dev.yaml @@ -6,7 +6,8 @@ services: minio-service: container_name: budi-minio-dev restart: on-failure - image: minio/minio + # Last version that supports the "fs" backend + image: minio/minio:RELEASE.2022-10-24T18-35-07Z volumes: - minio_data:/data ports: diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js index 3a08484635..6842b94a32 100644 --- a/packages/bbui/src/Actions/click_outside.js +++ b/packages/bbui/src/Actions/click_outside.js @@ -1,11 +1,11 @@ -const ignoredClasses = [".flatpickr-calendar", ".modal-container"] +const ignoredClasses = [".flatpickr-calendar"] let clickHandlers = [] /** * Handle a body click event */ const handleClick = event => { - // Ignore click if needed + // Ignore click if this is an ignored class for (let className of ignoredClasses) { if (event.target.closest(className)) { return @@ -14,9 +14,18 @@ const handleClick = event => { // Process handlers clickHandlers.forEach(handler => { - if (!handler.element.contains(event.target)) { - handler.callback?.(event) + if (handler.element.contains(event.target)) { + return } + + // Ignore clicks for modals, unless the handler is registered from a modal + const sourceInModal = handler.element.closest(".spectrum-Modal") != null + const clickInModal = event.target.closest(".spectrum-Modal") != null + if (clickInModal && !sourceInModal) { + return + } + + handler.callback?.(event) }) } document.documentElement.addEventListener("click", handleClick, true) diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js index 7570a39c8c..463b69169f 100644 --- a/packages/bbui/src/Actions/position_dropdown.js +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -1,75 +1,68 @@ -export default function positionDropdown(element, { anchor, align, maxWidth }) { - let positionSide = "top" - let maxHeight = 0 - let dimensions = getDimensions(anchor) +export default function positionDropdown( + element, + { anchor, align, maxWidth, useAnchorWidth } +) { + const update = () => { + const anchorBounds = anchor.getBoundingClientRect() + const elementBounds = element.getBoundingClientRect() + let styles = { + maxHeight: null, + minWidth: null, + maxWidth, + left: null, + top: null, + } - function getDimensions() { - const { - bottom, - top: spaceAbove, - left, - width, - } = anchor.getBoundingClientRect() - const spaceBelow = window.innerHeight - bottom - const containerRect = element.getBoundingClientRect() - - let y - - if (spaceAbove > spaceBelow) { - positionSide = "bottom" - maxHeight = spaceAbove - 20 - y = window.innerHeight - spaceAbove + 5 + // Determine vertical styles + if (window.innerHeight - anchorBounds.bottom < 100) { + styles.top = anchorBounds.top - elementBounds.height - 5 } else { - positionSide = "top" - y = bottom + 5 - maxHeight = spaceBelow - 20 + styles.top = anchorBounds.bottom + 5 + styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20 } - return { - [positionSide]: y, - left, - width, - containerWidth: containerRect.width, + // Determine horizontal styles + if (!maxWidth && useAnchorWidth) { + styles.maxWidth = anchorBounds.width } + if (useAnchorWidth) { + styles.minWidth = anchorBounds.width + } + if (align === "right") { + styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width + } else if (align === "right-side") { + styles.left = anchorBounds.left + anchorBounds.width + } else { + styles.left = anchorBounds.left + } + + // Apply styles + Object.entries(styles).forEach(([style, value]) => { + if (value) { + element.style[style] = `${value.toFixed(0)}px` + } else { + element.style[style] = null + } + }) } - function calcLeftPosition() { - let left - - if (align == "right") { - left = dimensions.left + dimensions.width - dimensions.containerWidth - } else if (align == "right-side") { - left = dimensions.left + dimensions.width - } else { - left = dimensions.left - } - - return left - } - + // Apply initial styles which don't need to change element.style.position = "absolute" element.style.zIndex = "9999" - if (maxWidth) { - element.style.maxWidth = `${maxWidth}px` - } - element.style.minWidth = `${dimensions.width}px` - element.style.maxHeight = `${maxHeight.toFixed(0)}px` - element.style.transformOrigin = `center ${positionSide}` - element.style[positionSide] = `${dimensions[positionSide]}px` - element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px` + // Observe both anchor and element and resize the popover as appropriate const resizeObserver = new ResizeObserver(entries => { - entries.forEach(() => { - dimensions = getDimensions() - element.style[positionSide] = `${dimensions[positionSide]}px` - element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px` - }) + entries.forEach(update) }) resizeObserver.observe(anchor) resizeObserver.observe(element) + + document.addEventListener("scroll", update, true) + return { destroy() { resizeObserver.disconnect() + document.removeEventListener("scroll", update, true) }, } } diff --git a/packages/bbui/src/Avatar/Avatar.svelte b/packages/bbui/src/Avatar/Avatar.svelte index 136a4fe24b..1e4cefd8ce 100644 --- a/packages/bbui/src/Avatar/Avatar.svelte +++ b/packages/bbui/src/Avatar/Avatar.svelte @@ -58,5 +58,6 @@ overflow: hidden; user-select: none; text-transform: uppercase; + flex-shrink: 0; } diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte index 36abcbf4da..979ec6a728 100644 --- a/packages/bbui/src/Button/Button.svelte +++ b/packages/bbui/src/Button/Button.svelte @@ -14,7 +14,7 @@ export let active = false export let tooltip = undefined export let dataCy - export let newStyles = false + export let newStyles = true let showTooltip = false @@ -28,6 +28,7 @@ class:spectrum-Button--quiet={quiet} class:new-styles={newStyles} class:active + class:disabled class="spectrum-Button spectrum-Button--size{size.toUpperCase()}" {disabled} data-cy={dataCy} @@ -108,7 +109,10 @@ border-color: transparent; color: var(--spectrum-global-color-gray-900); } - .spectrum-Button--secondary.new-styles:hover { + .spectrum-Button--secondary.new-styles:not(.disabled):hover { background: var(--spectrum-global-color-gray-300); } + .spectrum-Button--secondary.new-styles.disabled { + color: var(--spectrum-global-color-gray-500); + } diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte index 28e0975d82..944a3f4313 100644 --- a/packages/bbui/src/Drawer/DrawerContent.svelte +++ b/packages/bbui/src/Drawer/DrawerContent.svelte @@ -34,7 +34,6 @@ display: none; } .main { - font-family: var(--font-sans); padding: var(--spacing-xl); } .main :global(textarea) { diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte index 6996525a76..10aae67ec6 100644 --- a/packages/bbui/src/Form/Core/DatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker.svelte @@ -264,7 +264,7 @@ max-height: 100%; } :global(.flatpickr-calendar) { - font-family: "Source Sans Pro", sans-serif; + font-family: var(--font-sans); } .is-disabled { pointer-events: none !important; diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 97bd1394b4..81348452c7 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -2,12 +2,12 @@ import "@spectrum-css/picker/dist/index-vars.css" import "@spectrum-css/popover/dist/index-vars.css" import "@spectrum-css/menu/dist/index-vars.css" - import { fly } from "svelte/transition" import { createEventDispatcher } from "svelte" import clickOutside from "../../Actions/click_outside" import Search from "./Search.svelte" import Icon from "../../Icon/Icon.svelte" import StatusLight from "../../StatusLight/StatusLight.svelte" + import Popover from "../../Popover/Popover.svelte" export let id = null export let disabled = false @@ -33,7 +33,10 @@ export let sort = false const dispatch = createEventDispatcher() + let searchTerm = null + let button + let popover $: sortedOptions = getSortedOptions(options, getOptionLabel, sort) $: filteredOptions = getFilteredOptions( @@ -76,77 +79,117 @@ } -
(open = false)}> - - {#if open} -
- {#if autocomplete} - (searchTerm = event.detail)} - {disabled} - placeholder="Search" - /> + {/if} + + + + (open = false)} + useAnchorWidth={!autoWidth} + maxWidth={autoWidth ? 400 : null} +> +
+ {#if autocomplete} + (searchTerm = event.detail)} + {disabled} + placeholder="Search" + /> + {/if} +
    + {#if placeholderOption} +
  • onSelectOption(null)} + > + {placeholderOption} + +
    • {/if} -
      - {#if placeholderOption} + {#if filteredOptions.length} + {#each filteredOptions as option, idx}
    • onSelectOption(null)} + on:click={() => onSelectOption(getOptionValue(option, idx))} + class:is-disabled={!isOptionEnabled(option)} > - {placeholderOption} + {#if getOptionIcon(option, idx)} + + + + {/if} + {#if getOptionColour(option, idx)} + + + + {/if} + + {getOptionLabel(option, idx)} +
      • - {/if} - {#if filteredOptions.length} - {#each filteredOptions as option, idx} -
    • onSelectOption(getOptionValue(option, idx))} - class:is-disabled={!isOptionEnabled(option)} - > - {#if getOptionIcon(option, idx)} - - - - {/if} - {#if getOptionColour(option, idx)} - - - - {/if} - - {getOptionLabel(option, idx)} - - -
      • - {/each} - {/if} -
    -
- {/if} -
+ {/each} + {/if} + +
+ diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte index 0a723c140a..6a64876a2c 100644 --- a/packages/bbui/src/Form/Core/TextField.svelte +++ b/packages/bbui/src/Form/Core/TextField.svelte @@ -112,8 +112,4 @@ .spectrum-Textfield { width: 100%; } - input:disabled { - color: var(--spectrum-global-color-gray-600) !important; - -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important; - } diff --git a/packages/bbui/src/Icon/IconAvatar.svelte b/packages/bbui/src/Icon/IconAvatar.svelte index b404cdea9f..add51f5bdc 100644 --- a/packages/bbui/src/Icon/IconAvatar.svelte +++ b/packages/bbui/src/Icon/IconAvatar.svelte @@ -19,6 +19,7 @@ .icon { width: 28px; height: 28px; + flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; @@ -34,6 +35,7 @@ .icon.size--S { width: 22px; height: 22px; + flex: 0 0 22px; } .icon.size--S :global(.spectrum-Icon) { width: 16px; @@ -46,6 +48,7 @@ .icon.size--L { width: 40px; height: 40px; + flex: 0 0 40px; } .icon.size--L :global(.spectrum-Icon) { width: 28px; diff --git a/packages/bbui/src/InlineAlert/InlineAlert.svelte b/packages/bbui/src/InlineAlert/InlineAlert.svelte index 94ac6b2c2a..57e7296234 100644 --- a/packages/bbui/src/InlineAlert/InlineAlert.svelte +++ b/packages/bbui/src/InlineAlert/InlineAlert.svelte @@ -56,5 +56,6 @@ --spectrum-semantic-positive-icon-color: #2d9d78; --spectrum-semantic-negative-icon-color: #e34850; min-width: 100px; + margin: 0; } diff --git a/packages/bbui/src/Label/Label.svelte b/packages/bbui/src/Label/Label.svelte index 6b3392ce2d..ee6d9adf76 100644 --- a/packages/bbui/src/Label/Label.svelte +++ b/packages/bbui/src/Label/Label.svelte @@ -21,6 +21,7 @@ label { padding: 0; white-space: nowrap; + color: var(--spectrum-global-color-gray-600); } .muted { diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 2996bcc613..15aabd2c61 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -1,32 +1,95 @@ -
- +
+
+
+ +
+
+
{ + sidePanelVisble = false + }} + > + +
diff --git a/packages/bbui/src/List/ListItem.svelte b/packages/bbui/src/List/ListItem.svelte index 40d3c5541c..28015c4c57 100644 --- a/packages/bbui/src/List/ListItem.svelte +++ b/packages/bbui/src/List/ListItem.svelte @@ -30,9 +30,11 @@ {/if}
-
- -
+ {#if $$slots.default} +
+ +
+ {/if} diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index cec270486a..19d361c8b1 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -21,6 +21,8 @@ * template: a HBS or JS binding to use as the value * background: the background color * color: the text color + * borderLeft: show a left border + * borderRight: show a right border */ export let data = [] export let schema = {} @@ -31,6 +33,7 @@ export let allowSelectRows export let allowEditRows = true export let allowEditColumns = true + export let allowClickRows = true export let selectedRows = [] export let customRenderers = [] export let disableSorting = false @@ -270,6 +273,17 @@ if (schema[field].align === "Right") { styles[field] += "justify-content: flex-end; text-align: right;" } + if (schema[field].borderLeft) { + styles[field] += + "border-left: 1px solid var(--spectrum-global-color-gray-200);" + } + if (schema[field].borderLeft) { + styles[field] += + "border-right: 1px solid var(--spectrum-global-color-gray-200);" + } + if (schema[field].minWidth) { + styles[field] += `min-width: ${schema[field].minWidth};` + } }) return styles } @@ -290,7 +304,11 @@ {:else} -
+
{#if fields.length}
{#if showEditColumn} @@ -356,7 +374,7 @@ {/if} {#if sortedRows?.length} {#each sortedRows as row, idx} -
+
{#if showEditColumn}
diff --git a/packages/bbui/src/Tags/Tag.svelte b/packages/bbui/src/Tags/Tag.svelte index f7089decdb..0cdd6c385d 100644 --- a/packages/bbui/src/Tags/Tag.svelte +++ b/packages/bbui/src/Tags/Tag.svelte @@ -37,7 +37,7 @@ diff --git a/packages/bbui/src/Tags/Tags.svelte b/packages/bbui/src/Tags/Tags.svelte index 36d34507f3..ebca64b774 100644 --- a/packages/bbui/src/Tags/Tags.svelte +++ b/packages/bbui/src/Tags/Tags.svelte @@ -5,3 +5,13 @@
+ + diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte index 077c0a4878..5f243ad5a6 100644 --- a/packages/bbui/src/Typography/Heading.svelte +++ b/packages/bbui/src/Typography/Heading.svelte @@ -15,3 +15,9 @@ > + + diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css index f98f27bf58..ef3483d3df 100644 --- a/packages/bbui/src/bbui.css +++ b/packages/bbui/src/bbui.css @@ -40,12 +40,14 @@ --rounded-medium: 8px; --rounded-large: 16px; - --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", - "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", + "Helvetica Neue", Arial, "Noto Sans", sans-serif; + --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", + "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-serif: "Georgia", Cambria, Times New Roman, Times, serif; --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --spectrum-alias-body-text-font-family: var(--font-sans); font-size: 16px; --font-size-xs: 0.75rem; @@ -89,6 +91,8 @@ --border-light-2: 2px var(--grey-3) solid; --border-blue: 2px var(--blue) solid; --border-transparent: 2px transparent solid; + + --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600); } a { diff --git a/packages/builder/assets/bb-emblem.svg b/packages/builder/assets/bb-emblem.svg index 9f4f3690d5..7d499e4862 100644 --- a/packages/builder/assets/bb-emblem.svg +++ b/packages/builder/assets/bb-emblem.svg @@ -3,7 +3,7 @@ diff --git a/packages/builder/package.json b/packages/builder/package.json index e1086fde16..eefdd9d0f1 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -87,7 +87,7 @@ "shortid": "2.2.15", "svelte-dnd-action": "^0.9.8", "svelte-loading-spinners": "^0.1.1", - "svelte-portal": "0.1.0", + "svelte-portal": "1.0.0", "uuid": "8.3.1", "yup": "0.29.2" }, diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte index 4d193df104..04846e01bf 100644 --- a/packages/builder/src/App.svelte +++ b/packages/builder/src/App.svelte @@ -11,11 +11,8 @@