CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-04 05:50:57 +12: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",
key: "linkColor",
control: Colorpicker,
defaultValue: "#000"
defaultValue: "#000",
},
{
label: "Hover Color",
key: "linkHoverColor",
control: Colorpicker,
defaultValue: "#222"
defaultValue: "#222",
},
{
label: "Image Height",
@ -387,13 +387,13 @@ export default {
label: "Link Color",
key: "linkColor",
control: Colorpicker,
defaultValue: "#000"
defaultValue: "#000",
},
{
label: "Hover Color",
key: "linkHoverColor",
control: Colorpicker,
defaultValue: "#222"
defaultValue: "#222",
},
{
label: "Card Width",

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

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

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

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