CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-02 02:25:17 +12:00
Code Issues Projects Releases Wiki Activity

Make icon component slightly more presentable

Browse source
This commit is contained in:
Andrew Kingston 2021-06-30 08:46:18 +01:00
parent 83474a5c7e
commit d2910ae5c8
2 changed files with 36 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
packages/standard-components/manifest.json
View file

@ -811,30 +811,29 @@
"type": "select",
"label": "Size",
"key": "size",
"defaultValue": "md",
"defaultValue": "ri-1x",
"options": [
{ "value": "ri-xxs", "label": "xxs" },
{ "value": "ri-xs", "label": "xs" },
{ "value": "ri-sm", "label": "sm" },
{ "value": "ri-1x", "label": "md" },
{ "value": "ri-lg", "label": "lg" },
{ "value": "ri-xl", "label": "xl" },
{ "value": "ri-2x", "label": "2x" },
{ "value": "ri-3x", "label": "3x" },
{ "value": "ri-4x", "label": "4x" },
{ "value": "ri-5x", "label": "5x" },
{ "value": "ri-6x", "label": "6x" },
{ "value": "ri-7x", "label": "7x" },
{ "value": "ri-8x", "label": "8x" },
{ "value": "ri-9x", "label": "9x" },
{ "value": "ri-10x", "label": "10x" }
{ "value": "ri-xxs", "label": "XXS" },
{ "value": "ri-xs", "label": "XS" },
{ "value": "ri-sm", "label": "Small" },
{ "value": "ri-1x", "label": "Medium" },
{ "value": "ri-lg", "label": "Large" },
{ "value": "ri-xl", "label": "XL" },
{ "value": "ri-2x", "label": "2XL" },
{ "value": "ri-3x", "label": "3XL" },
{ "value": "ri-4x", "label": "4XL" },
{ "value": "ri-5x", "label": "5XL" },
{ "value": "ri-6x", "label": "6XL" },
{ "value": "ri-7x", "label": "7XL" },
{ "value": "ri-8x", "label": "8XL" },
{ "value": "ri-9x", "label": "9XL" },
{ "value": "ri-10x", "label": "10XL" }
]
},
{
"type": "color",
"label": "Color",
"key": "color",
"defaultValue": "#000"
"key": "color"
},
{
"type": "event",

25
packages/standard-components/src/Icon.svelte
View file

@ -1,21 +1,34 @@
<script>
import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let icon = ""
export let size = "fa-lg"
export let color = "#f00"
export let icon
export let size
export let color
export let onClick
$: styles = {
...$component.styles,
normal: {
...$component.styles.normal,
color,
color: color || "var(--spectrum-global-color-gray-900)",
},
}
</script>
<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
{#if icon}
<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
{:else if $builderStore.inBuilder}
<div use:styleable={styles}>
<Placeholder />
</div>
{/if}
<style>
div {
font-style: italic;
}
</style>