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

Fix placeholder styles, add typography settings to link

This commit is contained in:
Andrew Kingston 2021-06-25 15:56:22 +01:00
parent f3024c5644
commit d0d38387ad
4 changed files with 171 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
packages/standard-components/manifest.json
View File

@ -867,6 +867,7 @@
"name": "Link",
"description": "A basic link component for internal and external links",
"icon": "Link",
"showSettingsBar": true,
"illegalChildren": ["section"],
"settings": [
{
@ -885,10 +886,85 @@
"label": "New Tab",
"key": "openInNewTab"
},
{
"type": "select",
"label": "Size",
"key": "size",
"defaultValue": "M",
"showInBar": true,
"barStyle": "picker",
"options": [{
"label": "Small",
"value": "S"
}, {
"label": "Medium",
"value": "M"
}, {
"label": "Large",
"value": "L"
}]
},
{
"type": "color",
"label": "Color",
"key": "color",
"showInBar": true,
"barSeparator": false
},
{
"type": "boolean",
"label": "External",
"key": "external"
"label": "Bold",
"key": "bold",
"showInBar": true,
"barIcon": "TagBold",
"barTitle": "Bold text",
"barSeparator": false
},
{
"type": "boolean",
"label": "Italic",
"key": "italic",
"showInBar": true,
"barIcon": "TagItalic",
"barTitle": "Italic text",
"barSeparator": false
},
{
"type": "boolean",
"label": "Underline",
"key": "underline",
"showInBar": true,
"barIcon": "TagUnderline",
"barTitle": "Underline text"
},
{
"type": "select",
"label": "Alignment",
"key": "align",
"defaultValue": "left",
"showInBar": true,
"barStyle": "buttons",
"options": [{
"label": "Left",
"value": "left",
"barIcon": "TextAlignLeft",
"barTitle": "Align left"
}, {
"label": "Center",
"value": "center",
"barIcon": "TextAlignCenter",
"barTitle": "Align center"
}, {
"label": "Right",
"value": "right",
"barIcon": "TextAlignRight",
"barTitle": "Align right"
}, {
"label": "Justify",
"value": "justify",
"barIcon": "TextAlignJustify",
"barTitle": "Justify text"
}]
}
]
},

4
packages/standard-components/src/BackgroundImage.svelte
View File

@ -2,7 +2,7 @@
import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let url
@ -23,7 +23,7 @@
<div class="outer" use:styleable={$component.styles}>
<div class="inner" {style} />
</div>
{:else}
{:else if $builderStore.inBuilder}
<div
class="placeholder"
use:styleable={{ ...$component.styles, empty: true }}

4
packages/standard-components/src/Image.svelte
View File

@ -2,7 +2,7 @@
import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let url
@ -10,7 +10,7 @@
{#if url}
<img src={url} alt={$component.name} use:styleable={$component.styles} />
{:else}
{:else if $builderStore.inBuilder}
<div
class="placeholder"
use:styleable={{ ...$component.styles, empty: true }}

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

@ -1,31 +1,105 @@
<script>
import { getContext } from "svelte"
const { linkable, styleable } = getContext("sdk")
const { linkable, styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let url = ""
export let text = ""
export let openInNewTab = false
export let external = false
export let url
export let text
export let openInNewTab
export let color
export let align
export let bold
export let italic
export let underline
export let size
$: external = url && !url.startsWith("/")
$: target = openInNewTab ? "_blank" : "_self"
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || "Placeholder link"
: text || ""
// Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style.
$: styles = {
...$component.styles,
normal: {
...$component.styles?.normal,
color,
},
}
</script>
{#if external}
<a href={url || "/"} {target} use:styleable={$component.styles}>
{text}
<slot />
</a>
{:else}
<a href={url || "/"} use:linkable {target} use:styleable={$component.styles}>
{text}
<slot />
</a>
{#if $builderStore.inBuilder || componentText}
{#if external}
<a
{target}
href={url || "/"}
use:styleable={styles}
class:placeholder
class:bold
class:italic
class:underline
class="align--{align || 'left'} size--{size || 'M'}"
>
{componentText}
</a>
{:else}
<a
use:linkable
href={url || "/"}
use:styleable={styles}
class:placeholder
class:bold
class:italic
class:underline
class="align--{align || 'left'} size--{size || 'M'}"
>
{componentText}
</a>
{/if}
{/if}
<style>
a {
color: var(--spectrum-alias-text-color);
display: inline-block;
white-space: pre-wrap;
}
.placeholder {
font-style: italic;
color: var(--grey-6);
}
.bold {
font-weight: 600;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.size--S {
font-size: 14px;
}
.size--M {
font-size: 16px;
}
.size--L {
font-size: 18px;
}
.align--left {
text-align: left;
}
.align--center {
text-align: center;
}
.align--right {
text-align: right;
}
.align-justify {
text-align: justify;
}
</style>