CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 19:43:32 +13:00
Code Issues Projects Releases Wiki Activity

colorpicker for links in card component now works correctly

Browse source
This commit is contained in:
kevmodrome 2020-12-09 15:27:24 +01:00
parent d454d1a2d1
commit d0997efadb
3 changed files with 11 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View file

@ -312,13 +312,13 @@ export default {
label: "Link Color", label: "Link Color",
key: "linkColor", key: "linkColor",
control: Colorpicker, control: Colorpicker,
defaultValue: "#000" defaultValue: "#000",
}, },
{ {
label: "Hover Color", label: "Hover Color",
key: "linkHoverColor", key: "linkHoverColor",
control: Colorpicker, control: Colorpicker,
defaultValue: "#222" defaultValue: "#222",
}, },
{ {
label: "Image Height", label: "Image Height",
@ -387,13 +387,13 @@ export default {
label: "Link Color", label: "Link Color",
key: "linkColor", key: "linkColor",
control: Colorpicker, control: Colorpicker,
defaultValue: "#000" defaultValue: "#000",
}, },
{ {
label: "Hover Color", label: "Hover Color",
key: "linkHoverColor", key: "linkHoverColor",
control: Colorpicker, control: Colorpicker,
defaultValue: "#222" defaultValue: "#222",
}, },
{ {
label: "Card Width", label: "Card Width",

9
packages/standard-components/src/Card.svelte
View file

@ -17,8 +17,6 @@
export let cardWidth export let cardWidth
$: cssVariables = { $: cssVariables = {
linkColor,
linkHoverColor,
imageHeight, imageHeight,
cardWidth, cardWidth,
} }
@ -29,12 +27,13 @@
<div <div
use:cssVars={cssVariables} use:cssVars={cssVariables}
class="container" class="container"
use:styleable={$component.styles}> use:styleable={$component.styles}
{#if showImage}<img class="image" src={imageUrl} alt="" />{/if} style="--cardWidth: {cardWidth}">
{#if showImage}<img style="--imageWidth: {imageWidth}; --imageHeight: {imageHeight}" class="image" src={imageUrl} alt="" />{/if}
<div class="content"> <div class="content">
<h2 class="heading">{heading}</h2> <h2 class="heading">{heading}</h2>
<h4 class="text">{description}</h4> <h4 class="text">{description}</h4>
<a href={linkUrl}>{linkText}</a> <a style="--linkColor: {linkColor}; --linkHoverColor: {linkHoverColor}" href={linkUrl}>{linkText}</a>
</div> </div>
</div> </div>

13
packages/standard-components/src/CardHorizontal.svelte
View file

@ -1,6 +1,5 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import { cssVars } from "./helpers"
const { styleable } = getContext("sdk") const { styleable } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
@ -18,20 +17,14 @@
export let imageWidth export let imageWidth
export let imageHeight export let imageHeight
$: cssVariables = {
imageWidth,
cardWidth,
imageHeight,
}
$: showImage = !!imageUrl $: showImage = !!imageUrl
</script> </script>
<div <div
use:styleable={$component.styles} use:styleable={$component.styles}
use:cssVars={cssVariables} class="container"
class="container"> style="--cardWidth: {cardWidth}">
{#if showImage}<img class="image" src={imageUrl} alt="" />{/if} {#if showImage}<img style="--imageWidth: {imageWidth}; --imageHeight: {imageHeight}" class="image" src={imageUrl} alt="" />{/if}
<div class="content"> <div class="content">
<main> <main>
<h2 class="heading">{heading}</h2> <h2 class="heading">{heading}</h2>