From b08aea22410d0495ba7ac87bbbbab95fb08be3da Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 18 Jul 2022 15:23:07 +0100 Subject: [PATCH] Allow full spectrum cards to be clickable --- packages/client/manifest.json | 14 ++++++++------ .../src/components/app/SpectrumCard.svelte | 16 +++++++++++++--- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index fdb5700a5c..8be92e19f6 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3509,17 +3509,18 @@ }, { "type": "boolean", - "label": "Show button", + "label": "Use button for click action", "key": "showButton" }, { "type": "text", "key": "buttonText", - "label": "Button text" + "label": "Button text", + "dependsOn": "showButton" }, { "type": "event", - "label": "Button action", + "label": "Click action", "key": "buttonOnClick" } ] @@ -3841,18 +3842,19 @@ }, { "type": "boolean", - "label": "Show button", + "label": "Use button for click action", "key": "showCardButton" }, { "type": "text", "key": "cardButtonText", "label": "Button text", - "nested": true + "nested": true, + "dependsOn": "showCardButton" }, { "type": "event", - "label": "Button action", + "label": "Click action", "key": "cardButtonOnClick", "nested": true } diff --git a/packages/client/src/components/app/SpectrumCard.svelte b/packages/client/src/components/app/SpectrumCard.svelte index 4b4f9d62f2..3b2fe44f4e 100644 --- a/packages/client/src/components/app/SpectrumCard.svelte +++ b/packages/client/src/components/app/SpectrumCard.svelte @@ -19,9 +19,10 @@ const handleLink = e => { if (!linkURL) { - return + return false } e.preventDefault() + e.stopPropagation() routeStore.actions.navigate(linkURL, linkPeek) } @@ -32,6 +33,8 @@ tabindex="0" role="figure" class:horizontal + class:clickable={buttonOnClick && !showButton} + on:click={showButton ? null : buttonOnClick} > {#if imageURL} {/if} @@ -81,6 +86,11 @@ flex-direction: column; justify-content: flex-start; align-items: stretch; + transition: border-color 130ms ease-out; + } + .spectrum-Card.clickable:hover { + cursor: pointer; + border-color: var(--spectrum-global-color-gray-500) !important; } .spectrum-Card.horizontal { flex-direction: row; @@ -90,7 +100,7 @@ padding: var(--spectrum-global-dimension-size-50) 0; } .spectrum-Card-title.link { - transition: color 130ms ease-in-out; + transition: color 130ms ease-out; } .spectrum-Card-title.link:hover { cursor: pointer;