Fix screen slot placeholder component display

This commit is contained in:
Andrew Kingston 2020-11-17 14:06:43 +00:00
parent 5fbf3502ce
commit 5aff97deab
3 changed files with 18 additions and 25 deletions

View File

@ -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: {},

View File

@ -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;
} }

View File

@ -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 {