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