From 03d6a75af8fc62e3723f7acad2b7db9d80eb1acf Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 22 Jul 2022 12:04:20 +0100 Subject: [PATCH 01/28] Replace preview icon with button --- .../components/deploy/DeployNavigation.svelte | 16 +++++++++++++++- .../builder/app/[application]/_layout.svelte | 19 ++++++++----------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/packages/builder/src/components/deploy/DeployNavigation.svelte b/packages/builder/src/components/deploy/DeployNavigation.svelte index d12b31beaf..676d7a5b7f 100644 --- a/packages/builder/src/components/deploy/DeployNavigation.svelte +++ b/packages/builder/src/components/deploy/DeployNavigation.svelte @@ -56,6 +56,10 @@ } } + const previewApp = () => { + window.open(`/${application}`) + } + const viewApp = () => { analytics.captureEvent(Events.APP_VIEW_PUBLISHED, { appId: selectedApp.appId, @@ -174,7 +178,10 @@ Are you sure you want to unpublish the app {selectedApp?.name}? - +
+ + +
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte index df84277142..54b685f541 100644 --- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte @@ -1,7 +1,14 @@ - $goto("../new")} - showExpandIcon - borderRight -> + +
+ +
  • diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte index 7b5f164e06..113100becc 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte @@ -151,7 +151,7 @@ }) -
    +
    Date: Mon, 25 Jul 2022 11:57:27 +0100 Subject: [PATCH 05/28] Update add component menu to new designs --- .../[screenId]/_components/AppPreview.svelte | 8 ++-- .../new/_components/NewComponentPanel.svelte | 37 +++++-------------- packages/client/manifest.json | 2 +- 3 files changed, 16 insertions(+), 31 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index c199e6c7d3..304d41ad19 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -99,7 +99,9 @@ $: refreshContent(json) // Determine if the add component menu is active - $: isAddingComponent = $isActive(`./components/${$selectedComponent._id}/new`) + $: isAddingComponent = $isActive( + `./components/${$selectedComponent?._id}/new` + ) // Update the iframe with the builder info to render the correct preview const refreshContent = message => { @@ -226,10 +228,10 @@ const toggleAddComponent = () => { if (isAddingComponent) { - $goto(`../${$selectedScreen._id}/components/${$selectedComponent._id}`) + $goto(`../${$selectedScreen._id}/components/${$selectedComponent?._id}`) } else { $goto( - `../${$selectedScreen._id}/components/${$selectedComponent._id}/new` + `../${$selectedScreen._id}/components/${$selectedComponent?._id}/new` ) } } diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte index 113100becc..5dd059fbcb 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte @@ -187,11 +187,10 @@ {#if filteredStructure.length} {#each filteredStructure as category} -
    + {#each category.children as component}
    15} class:selected={selectedIndex === orderMap[component.component]} on:click={() => addComponent(component.component)} @@ -201,7 +200,7 @@ {component.name}
    {/each} -
    +     {/each} {:else} @@ -217,7 +216,7 @@ {#each blocks as block}
    addComponent(block.component)} > @@ -240,28 +239,18 @@ flex-direction: row; align-items: stretch; } - .component-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: var(--spacing-s); - } .component { background-color: var(--spectrum-global-color-gray-200); border-radius: 4px; - height: 76px; display: flex; - flex-direction: column; - justify-content: center; align-items: center; - text-align: center; - padding: 0 var(--spacing-s); - gap: var(--spacing-s); - padding-top: 4px; border: 1px solid var(--spectrum-global-color-gray-200); transition: border-color 130ms ease-out; - } - .component.wide { - grid-column: span 2; + flex-direction: row; + justify-content: flex-start; + padding: var(--spacing-s) var(--spacing-l); + gap: var(--spacing-m); + overflow: hidden; } .component.selected, .component:hover { @@ -272,13 +261,7 @@ } .component :global(.spectrum-Body) { line-height: 1.2 !important; - } - - .block { - flex-direction: row; - justify-content: flex-start; - height: 48px; - padding: 0 var(--spacing-l); - gap: var(--spacing-m); + overflow: hidden; + text-overflow: ellipsis; } diff --git a/packages/client/manifest.json b/packages/client/manifest.json index fdb5700a5c..3bd1ecfc9f 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3736,7 +3736,7 @@ "cardsblock": { "block": true, "name": "Cards block", - "icon": "Table", + "icon": "PersonalizationField", "styles": [ "size" ], From 4a1abca7f7aab317458748fc673559c50a49ad27 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 25 Jul 2022 12:06:45 +0100 Subject: [PATCH 06/28] Update more styles of new component panel --- .../new/_components/NewComponentPanel.svelte | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte index 5dd059fbcb..95242b4a3a 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte @@ -179,15 +179,11 @@ > {/if} - -
    - -
    - {#if searchString || section === "components"} - {#if filteredStructure.length} - {#each filteredStructure as category} - + {#if searchString || section === "components"} + {#if filteredStructure.length} + {#each filteredStructure as category} +
    {category.name}
    {#each category.children as component}
    {/each} - - {/each} - {:else} - + {/each} + {:else} There aren't any components matching the current filter - - {/if} - {:else} - + {/if} + {:else} Blocks are collections of pre-built components {#each blocks as block} @@ -224,8 +216,8 @@
    {/each}     - - {/if} + {/if} +
    @@ -239,6 +231,13 @@ flex-direction: row; align-items: stretch; } + .category-label { + color: var(--spectrum-global-color-gray-600); + text-transform: uppercase; + font-size: 12px; + font-weight: 600; + margin-top: var(--spacing-xs); + } .component { background-color: var(--spectrum-global-color-gray-200); border-radius: 4px; From ea1722dfd224d888f555a044e4f4791e6dec9e06 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 25 Jul 2022 12:07:11 +0100 Subject: [PATCH 07/28] Update class names --- .../[componentId]/new/_components/NewComponentPanel.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte index 95242b4a3a..4ee5bb33a6 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte @@ -151,7 +151,7 @@ }) -
    +
    From 61481fd50b9df46395cac1c0287375756ff4a15e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 25 Jul 2022 17:06:00 +0100 Subject: [PATCH 12/28] Update screen list to match designs. Update nav items to make text clearer. Update screen picker --- .../src/components/common/NavItem.svelte | 45 +++++++------- .../[screenId]/_components/AppPanel.svelte | 11 ++-- .../navigation/ComponentListPanel.svelte | 2 +- .../screens/_components/RoleIndicator.svelte | 58 +++++++++++++++++++ .../_components/ScreenListPanel.svelte | 6 +- 5 files changed, 94 insertions(+), 28 deletions(-) create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte index 4cb67dc9c4..0309458a1a 100644 --- a/packages/builder/src/components/common/NavItem.svelte +++ b/packages/builder/src/components/common/NavItem.svelte @@ -1,5 +1,5 @@
    @@ -15,10 +14,11 @@ options={$sortedScreens} getOptionLabel={x => x.routing.route} getOptionValue={x => x._id} - getOptionIcon={x => (x.routing.homeScreen ? "Home" : "WebPage")} getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)} value={$store.selectedScreenId} on:change={e => store.actions.screens.select(e.detail)} + quiet + autoWidth />
    @@ -62,7 +62,8 @@ gap: var(--spacing-l); } .header-left :global(.spectrum-Picker) { - width: 250px; + font-weight: 600; + color: var(--spectrum-global-color-gray-900); } .content { flex: 1 1 auto; diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte index e025b8c7a7..d6d77a0d87 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte @@ -24,7 +24,7 @@ let newOffsets = {} // Calculate left offset - const offsetX = bounds.left + bounds.width + scrollLeft - 58 + const offsetX = bounds.left + bounds.width + scrollLeft - 39 if (offsetX > sidebarWidth) { newOffsets.left = offsetX - sidebarWidth } else { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte new file mode 100644 index 0000000000..eb25d86645 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte @@ -0,0 +1,58 @@ + + +
    (showTooltip = true)} + on:mouseleave={() => (showTooltip = false)} + style="--color: {color};" +> + + {#if showTooltip} +
    + +
    + {/if} +
    + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte index 27345cc429..a6fd9089b1 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte @@ -6,6 +6,7 @@ import NavItem from "components/common/NavItem.svelte" import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte" import ScreenWizard from "./ScreenWizard.svelte" + import RoleIndicator from "./RoleIndicator.svelte" import { RoleUtils } from "@budibase/frontend-core" let searchString @@ -52,14 +53,15 @@ {#each filteredScreens as screen (screen._id)} store.actions.screens.select(screen._id)} - color={RoleUtils.getRoleColour(screen.routing.roleId)} + rightAlignIcon > + {/each} {#if !filteredScreens?.length} From 77f9b11e8894a2b59d289eadc1c4966c4132cc75 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 26 Jul 2022 10:36:12 +0100 Subject: [PATCH 13/28] Update version icon to version status light --- .../bbui/src/StatusLight/StatusLight.svelte | 8 ++++++++ .../src/components/deploy/VersionModal.svelte | 17 +++++------------ .../builder/app/[application]/_layout.svelte | 8 +++++++- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/packages/bbui/src/StatusLight/StatusLight.svelte b/packages/bbui/src/StatusLight/StatusLight.svelte index 6648b2b32b..d30bf96b05 100644 --- a/packages/bbui/src/StatusLight/StatusLight.svelte +++ b/packages/bbui/src/StatusLight/StatusLight.svelte @@ -19,12 +19,15 @@ export let active = false export let color = null export let square = false + export let hoverable = false
    diff --git a/packages/builder/src/components/deploy/VersionModal.svelte b/packages/builder/src/components/deploy/VersionModal.svelte index f0f58d7cb0..b0f4655f1b 100644 --- a/packages/builder/src/components/deploy/VersionModal.svelte +++ b/packages/builder/src/components/deploy/VersionModal.svelte @@ -1,11 +1,11 @@ -{#if !hideIcon} -
    - -
    +{#if !hideIcon && updateAvailable} + + Update available + {/if}
    - +
    + +
    @@ -180,4 +182,8 @@ align-items: center; gap: var(--spacing-xl); } + + .version { + margin-right: var(--spacing-s); + } From 1b34bc8e81475972cdcfe54a6a336947f3b86897 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 26 Jul 2022 11:37:27 +0100 Subject: [PATCH 14/28] Update device preview picker to be quiet --- packages/bbui/src/ActionButton/ActionButton.svelte | 7 +++++++ .../[screenId]/_components/DevicePreviewSelect.svelte | 5 ++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index 53ba6c7e51..cfc810807e 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -84,6 +84,7 @@ } :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) { margin-left: 0; + transition: color ease-out 130ms; } .is-selected:not(.spectrum-ActionButton--emphasized) { background: var(--spectrum-global-color-gray-300); @@ -92,4 +93,10 @@ padding: 0; min-width: 0; } + .spectrum-ActionButton--quiet { + padding: 0 8px; + } + .is-selected:not(.emphasized) .spectrum-Icon { + color: var(--spectrum-global-color-gray-900); + } diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte index 9f9447daee..870f801336 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte @@ -3,18 +3,21 @@ import { store } from "builderStore" - + store.actions.preview.setDevice("desktop")} /> store.actions.preview.setDevice("tablet")} /> store.actions.preview.setDevice("mobile")} From a6dbd4d807c3bfaea670fa6ef9cd3db862eed676 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 27 Jul 2022 10:47:24 +0100 Subject: [PATCH 15/28] Fix attachment renderer not working due to tooltips --- .../bbui/src/Table/AttachmentRenderer.svelte | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/bbui/src/Table/AttachmentRenderer.svelte b/packages/bbui/src/Table/AttachmentRenderer.svelte index 97ce1394cc..25b7b617f5 100644 --- a/packages/bbui/src/Table/AttachmentRenderer.svelte +++ b/packages/bbui/src/Table/AttachmentRenderer.svelte @@ -1,5 +1,5 @@ @@ -15,10 +14,11 @@