1
0
Fork 0
mirror of synced 2024-06-17 18:04:42 +12:00

Improve empty states and placeholders

This commit is contained in:
Andrew Kingston 2021-06-11 11:37:05 +01:00
parent 4ad9253e42
commit 4cf9a7827b
7 changed files with 45 additions and 71 deletions

View file

@ -31,7 +31,7 @@
},
{
"type": "select",
"label": "Horizontal",
"label": "Horiz. Align",
"key": "hAlign",
"showInBar": true,
"options": [
@ -64,7 +64,7 @@
},
{
"type": "select",
"label": "Vertical",
"label": "Vert. Align",
"key": "vAlign",
"showInBar": "true",
"options": [

View file

@ -1,25 +1,30 @@
<script>
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let type
export let text = ""
export let text
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || "Placeholder text"
: text || ""
</script>
{#if type === "h1"}
<h1 use:styleable={$component.styles}>{text}</h1>
<h1 class:placeholder use:styleable={$component.styles}>{componentText}</h1>
{:else if type === "h2"}
<h2 use:styleable={$component.styles}>{text}</h2>
<h2 class:placeholder use:styleable={$component.styles}>{componentText}</h2>
{:else if type === "h3"}
<h3 use:styleable={$component.styles}>{text}</h3>
<h3 class:placeholder use:styleable={$component.styles}>{componentText}</h3>
{:else if type === "h4"}
<h4 use:styleable={$component.styles}>{text}</h4>
<h4 class:placeholder use:styleable={$component.styles}>{componentText}</h4>
{:else if type === "h5"}
<h5 use:styleable={$component.styles}>{text}</h5>
<h5 class:placeholder use:styleable={$component.styles}>{componentText}</h5>
{:else if type === "h6"}
<h6 use:styleable={$component.styles}>{text}</h6>
<h6 class:placeholder use:styleable={$component.styles}>{componentText}</h6>
{/if}
<style>
@ -31,4 +36,9 @@
h6 {
white-space: pre-wrap;
}
.placeholder {
font-style: italic;
color: var(--grey-6);
}
</style>

View file

@ -10,7 +10,7 @@
const context = getContext("context")
$: rows = dataProvider?.rows ?? []
$: loaded = dataProvider?.loaded ?? false
$: loaded = dataProvider?.loaded ?? true
</script>
<div use:styleable={$component.styles}>

View file

@ -1,25 +1,19 @@
<script>
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let text = ""
export let bold = false
export let italic = false
export let underline = false
export let text
let element
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || "Placeholder text"
: text || ""
</script>
<p
bind:this={element}
use:styleable={$component.styles}
class:bold
class:italic
class:underline
>
{text}
<p use:styleable={$component.styles} class:placeholder>
{componentText}
</p>
<style>
@ -27,13 +21,9 @@
display: inline-block;
white-space: pre-wrap;
}
.bold {
font-weight: bold;
}
.italic {
.placeholder {
font-style: italic;
}
.underline {
text-decoration: underline;
color: var(--grey-6);
}
</style>

View file

@ -12,7 +12,7 @@
{#if options}
<div use:chart={options} use:styleable={$component.styles} />
{:else if $builderStore.inBuilder}
<div use:styleable={{ ...$component.styles, empty: true }}>
<div use:styleable={$component.styles}>
<Placeholder text="Use the settings panel to build your chart" />
</div>
{/if}

View file

@ -1,5 +1,5 @@
<script>
import Placeholder from "./Placeholder.svelte"
import Placeholder from "../Placeholder.svelte"
import FieldGroupFallback from "./FieldGroupFallback.svelte"
import { getContext } from "svelte"
@ -36,6 +36,7 @@
<FieldGroupFallback>
<div class="spectrum-Form-item" use:styleable={$component.styles}>
<label
class:hidden={!label}
for={$fieldState?.fieldId}
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}
>
@ -43,15 +44,15 @@
</label>
<div class="spectrum-Form-itemField">
{#if !formContext}
<Placeholder>Form components need to be wrapped in a Form</Placeholder>
<Placeholder text="Form components need to be wrapped in a form" />
{:else if !fieldState}
<Placeholder>
Add the Field setting to start using your component
</Placeholder>
<Placeholder
text="Add the Field setting to start using your component"
/>
{:else if fieldSchema?.type && fieldSchema?.type !== type}
<Placeholder>
This Field setting is the wrong data type for this component
</Placeholder>
<Placeholder
text="This Field setting is the wrong data type for this component"
/>
{:else}
<slot />
{#if $fieldState.error}
@ -66,6 +67,9 @@
label {
white-space: nowrap;
}
label.hidden {
padding: 0;
}
.spectrum-Form-itemField {
position: relative;

View file

@ -1,30 +0,0 @@
<script>
import { getContext } from "svelte"
const { builderStore } = getContext("sdk")
</script>
{#if $builderStore.inBuilder}
<div>
<slot />
</div>
{/if}
<style>
div {
height: var(
--spectrum-alias-item-height-m,
var(--spectrum-global-dimension-size-400)
);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
color: var(--spectrum-global-color-gray-600);
font-size: var(
--spectrum-alias-item-text-size-m,
var(--spectrum-global-dimension-font-size-100)
);
font-style: var(--spectrum-global-font-style-italic, italic);
font-weight: var(--spectrum-global-font-weight-regular, 400);
}
</style>