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

Fix component empty state and invalid state styling

This commit is contained in:
Andrew Kingston 2022-09-12 08:50:22 +01:00
parent 450b1d96e2
commit 1bc6f30b6c
3 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/components/Component.svelte
View File

@ -127,7 +127,9 @@
// Empty components are those which accept children but do not have any. // Empty components are those which accept children but do not have any.
// Empty states can be shown for these components, but can be disabled // Empty states can be shown for these components, but can be disabled
// in the component manifest. // in the component manifest.
$: empty = interactive && !children.length && hasChildren $: empty =
(interactive && !children.length && hasChildren) ||
hasMissingRequiredSettings
$: emptyState = empty && showEmptyState $: emptyState = empty && showEmptyState
// Enrich component settings // Enrich component settings

29
packages/client/src/components/app/ComponentPlaceholder.svelte
View File

@ -2,28 +2,25 @@
import { getContext } from "svelte" import { getContext } from "svelte"
import { builderStore } from "stores" import { builderStore } from "stores"
const { styleable } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
$: requiredSetting = $component.missingRequiredSettings?.[0] $: requiredSetting = $component.missingRequiredSettings?.[0]
</script> </script>
{#if $builderStore.inBuilder && requiredSetting} {#if $builderStore.inBuilder && requiredSetting}
<div use:styleable={$component.styles}> <div class="component-placeholder">
<div class="component-placeholder"> <span>
<span> Add the <mark>{requiredSetting.label}</mark> setting to start using your component
Add the <mark>{requiredSetting.label}</mark> setting to start using your -
component - </span>
</span> <span
<span class="spectrum-Link"
class="spectrum-Link" on:click={() => {
on:click={() => { builderStore.actions.highlightSetting(requiredSetting.key)
builderStore.actions.highlightSetting(requiredSetting.key) }}
}} >
> Show me
Show me </span>
</span>
</div>
</div> </div>
{/if} {/if}

6
packages/client/src/components/app/DataProvider.svelte
View File

@ -133,11 +133,7 @@
<ProgressCircle /> <ProgressCircle />
</div> </div>
{:else} {:else}
{#if $component.emptyState} <slot />
<Placeholder />
{:else}
<slot />
{/if}
{#if paginate && $fetch.supportsPagination} {#if paginate && $fetch.supportsPagination}
<div class="pagination"> <div class="pagination">
<Pagination <Pagination