Fix screen slot placeholder component display
This commit is contained in:
parent
b01ec8da0f
commit
b70de4938f
|
@ -65,10 +65,7 @@
|
||||||
_id: "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
|
_id: "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
|
||||||
_component: "@budibase/standard-components/heading",
|
_component: "@budibase/standard-components/heading",
|
||||||
_styles: {
|
_styles: {
|
||||||
normal: {
|
normal: {},
|
||||||
width: "500px",
|
|
||||||
padding: "8px",
|
|
||||||
},
|
|
||||||
hover: {},
|
hover: {},
|
||||||
active: {},
|
active: {},
|
||||||
selected: {},
|
selected: {},
|
||||||
|
@ -86,10 +83,7 @@
|
||||||
_component: "@budibase/standard-components/text",
|
_component: "@budibase/standard-components/text",
|
||||||
_styles: {
|
_styles: {
|
||||||
normal: {
|
normal: {
|
||||||
"max-width": "",
|
|
||||||
"text-align": "left",
|
"text-align": "left",
|
||||||
width: "500px",
|
|
||||||
padding: "8px",
|
|
||||||
},
|
},
|
||||||
hover: {},
|
hover: {},
|
||||||
active: {},
|
active: {},
|
||||||
|
@ -107,10 +101,7 @@
|
||||||
_component: "@budibase/standard-components/text",
|
_component: "@budibase/standard-components/text",
|
||||||
_styles: {
|
_styles: {
|
||||||
normal: {
|
normal: {
|
||||||
"max-width": "",
|
|
||||||
"text-align": "left",
|
"text-align": "left",
|
||||||
width: "500px",
|
|
||||||
padding: "8px",
|
|
||||||
},
|
},
|
||||||
hover: {},
|
hover: {},
|
||||||
active: {},
|
active: {},
|
||||||
|
|
|
@ -11,7 +11,7 @@ export default `<html>
|
||||||
*, *:before, *:after {
|
*, *:before, *:after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.container-screenslot-placeholder {
|
[data-bb-id="container-screenslot-placeholder"] {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -23,7 +23,7 @@ export default `<html>
|
||||||
background-color: rgba(0, 0, 0, 0.05);
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
.container-screenslot-placeholder span {
|
[data-bb-id="container-screenslot-placeholder"] span {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,35 +1,37 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { styleable } from "@budibase/component-sdk"
|
||||||
|
|
||||||
export let text = ""
|
export let text = ""
|
||||||
export let className = ""
|
export let className = ""
|
||||||
export let type = ""
|
export let type = ""
|
||||||
export let _bb
|
export let styles
|
||||||
|
|
||||||
const isTag = tag => type === tag
|
const isTag = tag => type === tag
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if isTag('none')}
|
{#if isTag('none')}
|
||||||
<span>{text}</span>
|
<span use:styleable={styles}>{text}</span>
|
||||||
{:else if isTag('bold')}
|
{:else if isTag('bold')}
|
||||||
<b class={className}>{text}</b>
|
<b class={className} use:styleable={styles}>{text}</b>
|
||||||
{:else if isTag('strong')}
|
{:else if isTag('strong')}
|
||||||
<strong class={className}>{text}</strong>
|
<strong class={className} use:styleable={styles}>{text}</strong>
|
||||||
{:else if isTag('italic')}
|
{:else if isTag('italic')}
|
||||||
<i class={className}>{text}</i>
|
<i class={className} use:styleable={styles}>{text}</i>
|
||||||
{:else if isTag('emphasis')}
|
{:else if isTag('emphasis')}
|
||||||
<em class={className}>{text}</em>
|
<em class={className} use:styleable={styles}>{text}</em>
|
||||||
{:else if isTag('mark')}
|
{:else if isTag('mark')}
|
||||||
<mark class={className}>{text}</mark>
|
<mark class={className} use:styleable={styles}>{text}</mark>
|
||||||
{:else if isTag('small')}
|
{:else if isTag('small')}
|
||||||
<small class={className}>{text}</small>
|
<small class={className} use:styleable={styles}>{text}</small>
|
||||||
{:else if isTag('del')}
|
{:else if isTag('del')}
|
||||||
<del class={className}>{text}</del>
|
<del class={className} use:styleable={styles}>{text}</del>
|
||||||
{:else if isTag('ins')}
|
{:else if isTag('ins')}
|
||||||
<ins class={className}>{text}</ins>
|
<ins class={className} use:styleable={styles}>{text}</ins>
|
||||||
{:else if isTag('sub')}
|
{:else if isTag('sub')}
|
||||||
<sub class={className}>{text}</sub>
|
<sub class={className} use:styleable={styles}>{text}</sub>
|
||||||
{:else if isTag('sup')}
|
{:else if isTag('sup')}
|
||||||
<sup class={className}>{text}</sup>
|
<sup class={className} use:styleable={styles}>{text}</sup>
|
||||||
{:else}<span>{text}</span>{/if}
|
{:else}<span use:styleable={styles}>{text}</span>{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
span {
|
span {
|
||||||
|
|
Loading…
Reference in New Issue