From 5cf6ba89cf79faf5d83aa2cfb13e34c5bf9ece73 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 11:58:27 +0000 Subject: [PATCH 1/8] Update multiple pages to be responsive and improve loading experience --- packages/bbui/src/Table/Table.svelte | 4 ++ .../src/components/start/AppRow.svelte | 53 ++++++++++++------- .../pages/builder/portal/apps/_layout.svelte | 3 +- .../pages/builder/portal/apps/index.svelte | 16 +----- .../pages/builder/portal/plugins/index.svelte | 13 +++++ .../builder/portal/users/groups/index.svelte | 2 +- .../builder/portal/users/users/index.svelte | 3 ++ 7 files changed, 58 insertions(+), 36 deletions(-) diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index 00ba5ab37c..5215a7ed8e 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -280,6 +280,9 @@ 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 } @@ -450,6 +453,7 @@ --table-bg: var(--spectrum-global-color-gray-50); --table-border: 1px solid var(--spectrum-alias-border-color-mid); --cell-padding: var(--spectrum-global-dimension-size-250); + overflow: auto; } .wrapper--quiet { --table-bg: var(--spectrum-alias-background-color-transparent); diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index 47cf2d20a4..0404bc6b05 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -1,14 +1,35 @@ -
editApp(app)}> +
@@ -35,21 +56,12 @@ {app.deployed ? "Published" : "Unpublished"}
-
-
- - - -
+
+ + +
@@ -139,5 +151,8 @@ .app-row { padding: 20px; } + .app-row-actions { + display: none; + } } diff --git a/packages/builder/src/pages/builder/portal/apps/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/_layout.svelte index 159daae608..fe10d4b08a 100644 --- a/packages/builder/src/pages/builder/portal/apps/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/apps/_layout.svelte @@ -4,7 +4,8 @@ import { onMount } from "svelte" import { goto } from "@roxi/routify" - let loaded = false + // Don't block loading if we've already hydrated state + let loaded = $apps.length > 0 onMount(async () => { try { diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index bcb95ab248..519fde7f23 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -178,20 +178,6 @@ creatingApp = false } - const appOverview = app => { - $goto(`../overview/${app.devId}`) - } - - const editApp = app => { - if (app.lockedOther) { - notifications.error( - `App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.` - ) - return - } - $goto(`../../app/${app.devId}`) - } - function createAppFromTemplateUrl(templateKey) { // validate the template key just to make sure const templateParts = templateKey.split("/") @@ -309,7 +295,7 @@
{#each filteredApps as app (app.appId)} - + {/each}
diff --git a/packages/builder/src/pages/builder/portal/plugins/index.svelte b/packages/builder/src/pages/builder/portal/plugins/index.svelte index 6c87661986..6e25944742 100644 --- a/packages/builder/src/pages/builder/portal/plugins/index.svelte +++ b/packages/builder/src/pages/builder/portal/plugins/index.svelte @@ -20,6 +20,7 @@ const schema = { name: { width: "2fr", + minWidth: "200px", }, version: { width: "1fr", @@ -28,6 +29,7 @@ width: "1fr", displayName: "Type", capitalise: true, + minWidth: "120px", }, edit: { width: "auto", @@ -119,8 +121,19 @@ display: flex; gap: var(--spacing-xl); justify-content: space-between; + flex-wrap: wrap; } .controls :global(.spectrum-Search) { width: 200px; } + + @media (max-width: 640px) { + .filters { + display: grid; + grid-template-columns: 1fr 1fr; + } + .controls :global(.spectrum-Search) { + width: auto; + } + } diff --git a/packages/builder/src/pages/builder/portal/users/groups/index.svelte b/packages/builder/src/pages/builder/portal/users/groups/index.svelte index 04b6030b16..25c8702f6b 100644 --- a/packages/builder/src/pages/builder/portal/users/groups/index.svelte +++ b/packages/builder/src/pages/builder/portal/users/groups/index.svelte @@ -40,7 +40,7 @@ ] $: schema = { - name: { displayName: "Group", width: "2fr" }, + name: { displayName: "Group", width: "2fr", minWidth: "200px" }, users: { sortable: false, width: "1fr" }, roles: { sortable: false, displayName: "Apps", width: "1fr" }, } diff --git a/packages/builder/src/pages/builder/portal/users/users/index.svelte b/packages/builder/src/pages/builder/portal/users/users/index.svelte index 384475e89e..ba49bb2946 100644 --- a/packages/builder/src/pages/builder/portal/users/users/index.svelte +++ b/packages/builder/src/pages/builder/portal/users/users/index.svelte @@ -57,6 +57,7 @@ email: { sortable: false, width: "2fr", + minWidth: "200px", }, role: { sortable: false, @@ -296,6 +297,8 @@ flex-direction: row; justify-content: space-between; align-items: center; + flex-wrap: wrap; + gap: var(--spacing-xl); } .controls-right { From 3d76b07a9afcd600cad1a637674997b975e79b14 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 12:09:58 +0000 Subject: [PATCH 2/8] Make automation history page responsive --- .../[appId]/automation-history/index.svelte | 100 +++++++++--------- 1 file changed, 52 insertions(+), 48 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte index 30f77696f4..78ab2abe52 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte @@ -155,47 +155,47 @@ -
-
- -
-
- +
+
+ { + if (licensePlan?.type === Constants.PlanType.FREE) { + return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0 + } else if (licensePlan?.type === Constants.PlanType.TEAM) { + return ["90-d"].indexOf(x.value) < 0 + } else if (licensePlan?.type === Constants.PlanType.PRO) { + return ["30-d", "90-d"].indexOf(x.value) < 0 + } + return true + }} + /> +
{#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud} -
- -
+ {/if}
@@ -236,14 +236,24 @@ {/if} From 4ddb63d79c307608ebf243ccb3d67653a73c6b16 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 16:39:32 +0000 Subject: [PATCH 3/8] Update backups page to be responsive --- .../overview/[appId]/backups/index.svelte | 67 ++++++++++--------- 1 file changed, 37 insertions(+), 30 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte index 860d8dacad..42e3cd19a9 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte @@ -14,7 +14,6 @@ Tags, Tag, Table, - Page, } from "@budibase/bbui" import { backups, licensing, auth, admin, overview } from "stores/portal" import { createPaginationStore } from "helpers/pagination" @@ -223,29 +222,30 @@
{:else if loaded} -
-
- filter.value} + getOptionLabel={filter => filter.label} + bind:value={filterOpt} + /> +
+ { + if (e.detail[0].length > 1) { + startDate = e.detail[0][0].toISOString() + endDate = e.detail[0][1].toISOString() + } + }} />
- { - if (e.detail[0].length > 1) { - startDate = e.detail[0][0].toISOString() - endDate = e.detail[0][1].toISOString() - } - }} - /> - -
+
Create new backup @@ -291,15 +291,29 @@ gap: var(--spacing-xl); } + .controls { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-end; + gap: var(--spacing-xl); + flex-wrap: wrap; + } + .search { + flex: 1 1 auto; display: flex; gap: var(--spacing-xl); - width: 100%; align-items: flex-end; } + .search :global(.spectrum-InputGroup) { + min-width: 100px; + } .select { flex-basis: 160px; + width: 0; + min-width: 100px; } .pagination { @@ -309,13 +323,6 @@ margin-top: var(--spacing-xl); } - .split-buttons { - display: flex; - align-items: center; - justify-content: flex-end; - flex: 1; - } - .title { display: flex; flex-direction: row; From 3778ab3bd58b65cd5ce3e07de4c4d40d85782b73 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 12 Jan 2023 09:18:17 +0000 Subject: [PATCH 4/8] Update pickers to use absolutely positioned root popover so that overflow does not matter --- packages/bbui/src/Actions/click_outside.js | 2 +- .../bbui/src/Actions/position_dropdown.js | 24 +- packages/bbui/src/Form/Core/Picker.svelte | 256 +++++++++--------- packages/bbui/src/Popover/Popover.svelte | 22 +- 4 files changed, 169 insertions(+), 135 deletions(-) diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js index 3a08484635..9ea247f997 100644 --- a/packages/bbui/src/Actions/click_outside.js +++ b/packages/bbui/src/Actions/click_outside.js @@ -1,4 +1,4 @@ -const ignoredClasses = [".flatpickr-calendar", ".modal-container"] +const ignoredClasses = [".flatpickr-calendar"] let clickHandlers = [] /** diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js index 7570a39c8c..88f8783633 100644 --- a/packages/bbui/src/Actions/position_dropdown.js +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -1,6 +1,10 @@ -export default function positionDropdown(element, { anchor, align, maxWidth }) { +export default function positionDropdown( + element, + { anchor, align, maxWidth, useAnchorWidth } +) { let positionSide = "top" let maxHeight = 0 + let minWidth = 0 let dimensions = getDimensions(anchor) function getDimensions() { @@ -14,8 +18,7 @@ export default function positionDropdown(element, { anchor, align, maxWidth }) { const containerRect = element.getBoundingClientRect() let y - - if (spaceAbove > spaceBelow) { + if (window.innerHeight - bottom < 100) { positionSide = "bottom" maxHeight = spaceAbove - 20 y = window.innerHeight - spaceAbove + 5 @@ -25,6 +28,13 @@ export default function positionDropdown(element, { anchor, align, maxWidth }) { maxHeight = spaceBelow - 20 } + if (!maxWidth && useAnchorWidth) { + maxWidth = width + } + if (useAnchorWidth) { + minWidth = width + } + return { [positionSide]: y, left, @@ -36,9 +46,9 @@ export default function positionDropdown(element, { anchor, align, maxWidth }) { function calcLeftPosition() { let left - if (align == "right") { + if (align === "right") { left = dimensions.left + dimensions.width - dimensions.containerWidth - } else if (align == "right-side") { + } else if (align === "right-side") { left = dimensions.left + dimensions.width } else { left = dimensions.left @@ -52,7 +62,9 @@ export default function positionDropdown(element, { anchor, align, maxWidth }) { if (maxWidth) { element.style.maxWidth = `${maxWidth}px` } - element.style.minWidth = `${dimensions.width}px` + if (minWidth) { + element.style.minWidth = `${minWidth}px` + } element.style.maxHeight = `${maxHeight.toFixed(0)}px` element.style.transformOrigin = `center ${positionSide}` element.style[positionSide] = `${dimensions[positionSide]}px` diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 63f07b7cd6..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/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte index b81e76dc1f..191898578a 100644 --- a/packages/bbui/src/Popover/Popover.svelte +++ b/packages/bbui/src/Popover/Popover.svelte @@ -4,6 +4,7 @@ import { createEventDispatcher } from "svelte" import positionDropdown from "../Actions/position_dropdown" import clickOutside from "../Actions/click_outside" + import { fly } from "svelte/transition" const dispatch = createEventDispatcher() @@ -12,9 +13,10 @@ export let portalTarget export let dataCy export let maxWidth - export let direction = "bottom" export let showTip = false + export let open = false + export let useAnchorWidth = false let tipSvg = ' ' @@ -35,13 +37,22 @@ const handleOutsideClick = e => { if (open) { - e.stopPropagation() + // Stop propagation if the source is the anchor + let node = e.target + let fromAnchor = false + while (!fromAnchor && node && node.parentNode) { + fromAnchor = node === anchor + node = node.parentNode + } + if (fromAnchor) { + e.stopPropagation() + } + + // Hide the popover hide() } } - let open = null - function handleEscape(e) { if (open && e.key === "Escape") { hide() @@ -53,12 +64,13 @@