CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-11 16:12:19 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #6788 from Budibase/clickable-cards

Browse source 
Allow full spectrum cards to be clickable
This commit is contained in:
Andrew Kingston 2022-07-21 09:16:41 +01:00 committed by GitHub
commit e5665c5164
2 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/client/manifest.json
View file

@ -3509,17 +3509,18 @@
}, },
{ {
"type": "boolean", "type": "boolean",
"label": "Show button", "label": "Use button for click action",
"key": "showButton" "key": "showButton"
}, },
{ {
"type": "text", "type": "text",
"key": "buttonText", "key": "buttonText",
"label": "Button text" "label": "Button text",
"dependsOn": "showButton"
}, },
{ {
"type": "event", "type": "event",
"label": "Button action", "label": "Click action",
"key": "buttonOnClick" "key": "buttonOnClick"
} }
] ]
@ -3841,18 +3842,19 @@
}, },
{ {
"type": "boolean", "type": "boolean",
"label": "Show button", "label": "Use button for click action",
"key": "showCardButton" "key": "showCardButton"
}, },
{ {
"type": "text", "type": "text",
"key": "cardButtonText", "key": "cardButtonText",
"label": "Button text", "label": "Button text",
"nested": true "nested": true,
"dependsOn": "showCardButton"
}, },
{ {
"type": "event", "type": "event",
"label": "Button action", "label": "Click action",
"key": "cardButtonOnClick", "key": "cardButtonOnClick",
"nested": true "nested": true
} }

16
packages/client/src/components/app/SpectrumCard.svelte
View file

@ -19,9 +19,10 @@
const handleLink = e => { const handleLink = e => {
if (!linkURL) { if (!linkURL) {
return return false
} }
e.preventDefault() e.preventDefault()
e.stopPropagation()
routeStore.actions.navigate(linkURL, linkPeek) routeStore.actions.navigate(linkURL, linkPeek)
} }
</script> </script>
@ -32,6 +33,8 @@
tabindex="0" tabindex="0"
role="figure" role="figure"
class:horizontal class:horizontal
class:clickable={buttonOnClick && !showButton}
on:click={showButton ? null : buttonOnClick}
> >
{#if imageURL} {#if imageURL}
<div <div
@ -67,7 +70,9 @@
{/if} {/if}
{#if showButton} {#if showButton}
<div class="spectrum-Card-footer button-container"> <div class="spectrum-Card-footer button-container">
<Button on:click={buttonOnClick} secondary>{buttonText || ""}</Button> <Button on:click={buttonOnClick} secondary>
{buttonText || "Click me"}
</Button>
</div> </div>
{/if} {/if}
</div> </div>
@ -81,6 +86,11 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; 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 { .spectrum-Card.horizontal {
flex-direction: row; flex-direction: row;
@ -90,7 +100,7 @@
padding: var(--spectrum-global-dimension-size-50) 0; padding: var(--spectrum-global-dimension-size-50) 0;
} }
.spectrum-Card-title.link { .spectrum-Card-title.link {
transition: color 130ms ease-in-out; transition: color 130ms ease-out;
} }
.spectrum-Card-title.link:hover { .spectrum-Card-title.link:hover {
cursor: pointer; cursor: pointer;