From e7af64f625f22a0b166fef298aab306b16b52b14 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 27 Apr 2020 11:26:34 +0100 Subject: [PATCH] Stylable option items and font family property --- .../userInterface/PropControl.svelte | 1 + .../userInterface/StateBindingControl.svelte | 11 ++- .../src/Card/index.js | Bin 364 -> 371 bytes packages/standard-components/components.json | 67 ++++++++++++++++-- .../standard-components/src/Button.svelte | 2 + .../standard-components/src/Heading.svelte | 16 +++-- packages/standard-components/src/Link.svelte | 6 ++ packages/standard-components/src/Text.svelte | 8 +-- 8 files changed, 95 insertions(+), 16 deletions(-) diff --git a/packages/builder/src/components/userInterface/PropControl.svelte b/packages/builder/src/components/userInterface/PropControl.svelte index 62a0ba6103..33eac1f92d 100644 --- a/packages/builder/src/components/userInterface/PropControl.svelte +++ b/packages/builder/src/components/userInterface/PropControl.svelte @@ -22,6 +22,7 @@ value={prop_value} type={prop_definition.type} options={prop_definition.options} + styleBindingProperty={prop_definition.styleBindingProperty} onChanged={v => setProp(prop_name, v)} /> {/if} diff --git a/packages/builder/src/components/userInterface/StateBindingControl.svelte b/packages/builder/src/components/userInterface/StateBindingControl.svelte index 6de53082e2..40f62b51f2 100644 --- a/packages/builder/src/components/userInterface/StateBindingControl.svelte +++ b/packages/builder/src/components/userInterface/StateBindingControl.svelte @@ -8,6 +8,9 @@ export let onChanged = () => {} export let type = "" export let options = [] + export let styleBindingProperty = "" + + $: bindOptionToStyle = !!styleBindingProperty
@@ -24,7 +27,13 @@ {value} on:change={ev => onChanged(ev.target.value)}> {#each options || [] as option} - + {#if bindOptionToStyle} + + {:else} + + {/if} {/each} {:else} diff --git a/packages/materialdesign-components/src/Card/index.js b/packages/materialdesign-components/src/Card/index.js index cc918b935fdf02b10e70dabc9ee4003668d8997e..94674547c2b1b4970a52e96ae7525a1a879e052c 100644 GIT binary patch literal 371 NcmZQz7zK0=0RRDW00961 literal 364 zcmajYK?;O0429wSoFaIDdItwYPa(m^L1>9IaTpQrK2*U)6}!w&KHlgj4hn@SJJH3F z80kfd7yb6Wf~5gxr+@-)3>G#R0{aN!Y2-^z>Hfb$8T$mC?NLTlv0ak2n6j>BRtkwc VV%9c<_F|8iwXMewC9``w + import { buildStyle } from "./buildStyle.js" export let className = "" export let type export let _bb export let text = "" + export let fontFamily = "" + let containerElement $: containerElement && !text && _bb.attachChildren(containerElement) + $: style = buildStyle({ "font-family": fontFamily }) {#if type === 'h1'} -

{text}

+

{text}

{:else if type === 'h2'} -

{text}

+

{text}

{:else if type === 'h3'} -

{text}

+

{text}

{:else if type === 'h4'} -

{text}

+

{text}

{:else if type === 'h5'} -
{text}
+
{text}
{:else if type === 'h6'} -
{text}
+
{text}
{/if} diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte index 81934c09d8..0ac3d9f628 100644 --- a/packages/standard-components/src/Link.svelte +++ b/packages/standard-components/src/Link.svelte @@ -7,6 +7,7 @@ export let color export let hoverColor export let underline = false + export let fontFamily export let fontSize export let _bb @@ -20,6 +21,7 @@ color, textDecoration: underline ? "underline" : "none", fontSize, + fontFamily, } $: classes = createClasses(cssVariables) @@ -49,4 +51,8 @@ .fontSize { font-size: var(--fontSize); } + + .fontFamily { + font-family: var(--fontFamily); + } diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte index 646d9e53a7..b6d3c159e9 100644 --- a/packages/standard-components/src/Text.svelte +++ b/packages/standard-components/src/Text.svelte @@ -6,7 +6,7 @@ export let formattingTag = "" - export let font = "" + export let fontFamily = "" export let fontSize = "1em" export let textAlign = "" export let verticalAlign = "" @@ -17,11 +17,9 @@ const isTag = tag => (formattingTag || "").indexOf(tag) > -1 $: style = buildStyle({ - font: `${fontSize} ${font}`, - verticalAlign, + "font-size": fontSize, + "font-family": fontFamily, color, - "text-align": textAlign, - "vertical-align": verticalAlign, })