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

Improve layout and edge cases around using column editor drawer

This commit is contained in:
Andrew Kingston 2022-02-14 13:06:32 +00:00
parent 4f00e7a3b1
commit 6c1701830f
1 changed files with 68 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
View File

@ -7,6 +7,7 @@
Input, Input,
Select, Select,
Label, Label,
Body,
} from "@budibase/bbui" } from "@budibase/bbui"
import { flip } from "svelte/animate" import { flip } from "svelte/animate"
import { dndzone } from "svelte-dnd-action" import { dndzone } from "svelte-dnd-action"
@ -59,12 +60,26 @@
updateColumnOrder(e) updateColumnOrder(e)
dragDisabled = true dragDisabled = true
} }
const reset = () => {
columns = options.map(col => ({
name: col,
displayName: col,
}))
}
</script> </script>
<DrawerContent> <DrawerContent>
<div class="container"> <div class="container">
<Layout noPadding gap="S"> <Layout noPadding gap="S">
{#if columns?.length} {#if columns?.length}
<Layout noPadding gap="XS">
<div class="column">
<div />
<Label size="L">Column</Label>
<Label size="L">Label</Label>
<div />
</div>
<div <div
class="columns" class="columns"
use:dndzone={{ use:dndzone={{
@ -76,12 +91,6 @@
on:finalize={handleFinalize} on:finalize={handleFinalize}
on:consider={updateColumnOrder} on:consider={updateColumnOrder}
> >
<div class="column">
<div />
<Label size="L">Column</Label>
<Label size="L">Label</Label>
<div />
</div>
{#each columns as column (column.id)} {#each columns as column (column.id)}
<div class="column" animate:flip={{ duration: flipDurationMs }}> <div class="column" animate:flip={{ duration: flipDurationMs }}>
<div <div
@ -104,14 +113,28 @@
hoverable hoverable
size="S" size="S"
on:click={() => removeColumn(column.id)} on:click={() => removeColumn(column.id)}
disabled={columns.length === 1}
/> />
</div> </div>
{/each} {/each}
</div> </div>
{/if} </Layout>
{:else}
<div class="column"> <div class="column">
<div /> <div />
<Button secondary icon="Add" on:click={addColumn}>Add Column</Button> <Body size="S">Add the first column to your table.</Body>
</div>
{/if}
<div class="columns">
<div class="column">
<div />
<div class="buttons">
<Button secondary icon="Add" on:click={addColumn}>
Add column
</Button>
<Button secondary quiet on:click={reset}>Reset columns</Button>
</div>
</div>
</div> </div>
</Layout> </Layout>
</div> </div>
@ -145,4 +168,11 @@
display: grid; display: grid;
place-items: center; place-items: center;
} }
.buttons {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-m);
}
</style> </style>