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

Make icon component slightly more presentable

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

23
packages/standard-components/src/Icon.svelte
View File

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