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

Stylable option items and font family property

This commit is contained in:
Conor_Mack 2020-04-27 11:26:34 +01:00
parent 60f4bfa2b5
commit e7af64f625
8 changed files with 95 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/builder/src/components/userInterface/PropControl.svelte
View File

@ -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}
</div>

9
packages/builder/src/components/userInterface/StateBindingControl.svelte
View File

@ -8,6 +8,9 @@
export let onChanged = () => {}
export let type = ""
export let options = []
export let styleBindingProperty = ""
$: bindOptionToStyle = !!styleBindingProperty
</script>
<div class="unbound-container">
@ -24,7 +27,13 @@
{value}
on:change={ev => onChanged(ev.target.value)}>
{#each options || [] as option}
{#if bindOptionToStyle}
<option style={`${styleBindingProperty}: ${option};`} value={option}>
{option}
</option>
{:else}
<option value={option}>{option}</option>
{/if}
{/each}
</select>
{:else}

BIN
packages/materialdesign-components/src/Card/index.js
View File

Binary file not shown.

65
packages/standard-components/components.json
View File

@ -36,7 +36,22 @@
"padding": "string",
"hoverColor": "string",
"hoverBackground": "string",
"hoverBorder": "string"
"hoverBorder": "string",
"fontFamily": {
"type": "options",
"default": "initial",
"styleBindingProperty": "font-family",
"options": [
"initial",
"Times New Roman",
"Georgia",
"Arial",
"Arial Black",
"Comic Sans MS",
"Impact",
"Lucida Sans Unicode"
]
}
},
"tags": [
"layout"
@ -152,7 +167,21 @@
"children": false,
"props": {
"text": "string",
"font": "string",
"fontFamily": {
"type": "options",
"default": "initial",
"styleBindingProperty": "font-family",
"options": [
"initial",
"Times New Roman",
"Georgia",
"Arial",
"Arial Black",
"Comic Sans MS",
"Impact",
"Lucida Sans Unicode"
]
},
"fontSize": "string",
"color": "string",
"textAlign": {
@ -241,7 +270,22 @@
"color": "string",
"hoverColor": "string",
"underline": "bool",
"fontSize": "string"
"fontSize": "string",
"fontFamily": {
"type": "options",
"default": "initial",
"styleBindingProperty": "font-family",
"options": [
"initial",
"Times New Roman",
"Georgia",
"Arial",
"Arial Black",
"Comic Sans MS",
"Impact",
"Lucida Sans Unicode"
]
}
}
},
"image": {
@ -323,6 +367,21 @@
"h5",
"h6"
]
},
"fontFamily": {
"type": "options",
"default": "initial",
"styleBindingProperty": "font-family",
"options": [
"initial",
"Times New Roman",
"Georgia",
"Arial",
"Arial Black",
"Comic Sans MS",
"Impact",
"Lucida Sans Unicode"
]
}
},
"tags": []

2
packages/standard-components/src/Button.svelte
View File

@ -12,6 +12,7 @@
export let hoverColor
export let hoverBackground
export let hoverBorder
export let fontFamily
export let _bb
let theButton
@ -39,6 +40,7 @@
buttonStyles = buildStyle({
padding,
"font-family": fontFamily,
})
customClasses = createClasses({

16
packages/standard-components/src/Heading.svelte
View File

@ -1,23 +1,27 @@
<script>
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 })
</script>
{#if type === 'h1'}
<h1 class={className} bind:this={containerElement}>{text}</h1>
<h1 class={className} {style} bind:this={containerElement}>{text}</h1>
{:else if type === 'h2'}
<h2 class={className} bind:this={containerElement}>{text}</h2>
<h2 class={className} {style} bind:this={containerElement}>{text}</h2>
{:else if type === 'h3'}
<h3 class={className} bind:this={containerElement}>{text}</h3>
<h3 class={className} {style} bind:this={containerElement}>{text}</h3>
{:else if type === 'h4'}
<h4 class={className} bind:this={containerElement}>{text}</h4>
<h4 class={className} {style} bind:this={containerElement}>{text}</h4>
{:else if type === 'h5'}
<h5 class={className} bind:this={containerElement}>{text}</h5>
<h5 class={className} {style} bind:this={containerElement}>{text}</h5>
{:else if type === 'h6'}
<h6 class={className} bind:this={containerElement}>{text}</h6>
<h6 class={className} {style} bind:this={containerElement}>{text}</h6>
{/if}

6
packages/standard-components/src/Link.svelte
View File

@ -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)
</script>
@ -49,4 +51,8 @@
.fontSize {
font-size: var(--fontSize);
}
.fontFamily {
font-family: var(--fontFamily);
}
</style>

8
packages/standard-components/src/Text.svelte
View File

@ -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,
})
</script>