MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

colorpicker for links in card component now works correctly

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>