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

Prevent flashing CTA buttons when initially loading table data

This commit is contained in:
Andrew Kingston 2022-04-07 15:48:35 +01:00
parent e75df5afd3
commit cd3bcdb41a
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/Table/Table.svelte
View File

@ -588,7 +588,7 @@
border-top: none; border-top: none;
grid-column: 1 / -1; grid-column: 1 / -1;
background-color: var(--table-bg); background-color: var(--table-bg);
padding: 60px 40px; padding: 40px;
} }
.placeholder--no-fields { .placeholder--no-fields {
border-top: var(--table-border); border-top: var(--table-border);

19
packages/builder/src/components/backend/DataTable/DataTable.svelte
View File

@ -28,7 +28,7 @@
$: id = $tables.selected?._id $: id = $tables.selected?._id
$: fetch = createFetch(id) $: fetch = createFetch(id)
$: hasCols = checkHasCols(schema) $: hasCols = checkHasCols(schema)
$: hasRows = !!$fetch.data?.length $: hasRows = !!$fetch.rows?.length
const enrichSchema = schema => { const enrichSchema = schema => {
let tempSchema = { ...schema } let tempSchema = { ...schema }
@ -124,14 +124,17 @@
> >
<div class="buttons"> <div class="buttons">
<div class="left-buttons"> <div class="left-buttons">
<CreateColumnButton highlighted on:updatecolumns={onUpdateColumns} /> <CreateColumnButton
highlighted={$fetch.loaded && (!hasCols || !hasRows)}
on:updatecolumns={onUpdateColumns}
/>
{#if !isUsersTable} {#if !isUsersTable}
<CreateRowButton <CreateRowButton
on:updaterows={onUpdateRows} on:updaterows={onUpdateRows}
title={"Create row"} title={"Create row"}
modalContentComponent={CreateEditRow} modalContentComponent={CreateEditRow}
disabled={!hasCols} disabled={!hasCols}
highlighted={hasCols && !hasRows} highlighted={$fetch.loaded && hasCols && !hasRows}
/> />
{/if} {/if}
{#if isInternal} {#if isInternal}
@ -169,11 +172,19 @@
</div> </div>
<div slot="placeholder"> <div slot="placeholder">
<Layout gap="S"> <Layout gap="S">
<Heading>Let's create some columns!</Heading> {#if !hasCols}
<Heading>Let's create some columns</Heading>
<Body> <Body>
Start building out your table structure<br /> Start building out your table structure<br />
by adding some columns by adding some columns
</Body> </Body>
{:else}
<Heading>Now let's add a row</Heading>
<Body>
Add some data to your table<br />
by adding some rows
</Body>
{/if}
</Layout> </Layout>
</div> </div>
</Table> </Table>