From bd8b47318df9779d5d39f31b9fd64e2c21f859eb Mon Sep 17 00:00:00 2001 From: Dean Date: Fri, 25 Mar 2022 09:43:28 +0000 Subject: [PATCH] UI/UX code review changes --- packages/bbui/src/Button/Button.svelte | 2 + .../src/components/common/TemplateCard.svelte | 14 ++++-- .../components/common/TemplateDisplay.svelte | 50 ++++++++++--------- .../pages/builder/portal/apps/create.svelte | 20 +++++--- .../pages/builder/portal/apps/index.svelte | 9 +++- .../builder/portal/apps/templates.svelte | 9 ++-- 6 files changed, 66 insertions(+), 38 deletions(-) diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte index a3d2df069a..e8f6b4500e 100644 --- a/packages/bbui/src/Button/Button.svelte +++ b/packages/bbui/src/Button/Button.svelte @@ -13,6 +13,7 @@ export let icon = undefined export let active = false export let tooltip = undefined + export let dataCy let showTooltip = false @@ -27,6 +28,7 @@ class:active class="spectrum-Button spectrum-Button--size{size.toUpperCase()}" {disabled} + data-cy={dataCy} on:click|preventDefault on:mouseover={() => (showTooltip = true)} on:focus={() => (showTooltip = true)} diff --git a/packages/builder/src/components/common/TemplateCard.svelte b/packages/builder/src/components/common/TemplateCard.svelte index dc8cdc9610..ab2e874b55 100644 --- a/packages/builder/src/components/common/TemplateCard.svelte +++ b/packages/builder/src/components/common/TemplateCard.svelte @@ -37,7 +37,11 @@ -
+
@@ -52,8 +56,7 @@ } .template-card:hover .template-thumbnail-action-overlay { - display: flex; - flex-direction: column; + opacity: 1; } .template-thumbnail-action-overlay { @@ -62,10 +65,13 @@ left: 0px; width: 100%; height: 70%; - display: none; + display: flex; + flex-direction: column; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.7); + opacity: 0; + transition: opacity var(--spectrum-global-animation-duration-100) ease; border-top-right-radius: inherit; border-top-left-radius: inherit; } diff --git a/packages/builder/src/components/common/TemplateDisplay.svelte b/packages/builder/src/components/common/TemplateDisplay.svelte index f7954788b6..facefd1cbc 100644 --- a/packages/builder/src/components/common/TemplateDisplay.svelte +++ b/packages/builder/src/components/common/TemplateDisplay.svelte @@ -1,5 +1,13 @@ -
+
Templates -
- - - {#each templateCategories as templateCategoryKey} - - {/each} + All + + {#each templateCategories as templateCategoryKey} + { + selectedTemplateCategory = templateCategoryKey + }} + > + {templateCategoryKey} + + {/each} +
diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte index f866aae267..697af7cb2b 100644 --- a/packages/builder/src/pages/builder/portal/apps/create.svelte +++ b/packages/builder/src/pages/builder/portal/apps/create.svelte @@ -9,7 +9,6 @@ Body, Modal, Divider, - Link, } from "@budibase/bbui" import CreateAppModal from "components/start/CreateAppModal.svelte" import TemplateDisplay from "components/common/TemplateDisplay.svelte" @@ -61,15 +60,16 @@ - { $goto("../") }} > - < Back - + Back +
@@ -82,10 +82,17 @@
-
-
+ + {#if loaded && $templates?.length} {/if} diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index 58a86acc65..b024afa1c7 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -299,7 +299,13 @@
- {#if $apps?.length > 0} @@ -315,6 +321,7 @@ {/if} {#if !$apps?.length} {#if loaded && $templates?.length}