CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-14 02:36:22 +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
parent 8bd81367f5 b08aea2241
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",
"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
}

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

@ -19,9 +19,10 @@
const handleLink = e => {
if (!linkURL) {
return
return false
}
e.preventDefault()
e.stopPropagation()
routeStore.actions.navigate(linkURL, linkPeek)
}
</script>
@ -32,6 +33,8 @@
tabindex="0"
role="figure"
class:horizontal
class:clickable={buttonOnClick && !showButton}
on:click={showButton ? null : buttonOnClick}
>
{#if imageURL}
<div
@ -67,7 +70,9 @@
{/if}
{#if showButton}
<div class="spectrum-Card-footer button-container">
<Button on:click={buttonOnClick} secondary>{buttonText || ""}</Button>
<Button on:click={buttonOnClick} secondary>
{buttonText || "Click me"}
</Button>
</div>
{/if}
</div>
@ -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;