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

106
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,59 +60,81 @@
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}
<div <Layout noPadding gap="XS">
class="columns"
use:dndzone={{
items: columns,
flipDurationMs,
dropTargetStyle: { outline: "none" },
dragDisabled,
}}
on:finalize={handleFinalize}
on:consider={updateColumnOrder}
>
<div class="column"> <div class="column">
<div /> <div />
<Label size="L">Column</Label> <Label size="L">Column</Label>
<Label size="L">Label</Label> <Label size="L">Label</Label>
<div /> <div />
</div> </div>
{#each columns as column (column.id)} <div
<div class="column" animate:flip={{ duration: flipDurationMs }}> class="columns"
<div use:dndzone={{
class="handle" items: columns,
aria-label="drag-handle" flipDurationMs,
style={dragDisabled ? "cursor: grab" : "cursor: grabbing"} dropTargetStyle: { outline: "none" },
on:mousedown={() => (dragDisabled = false)} dragDisabled,
> }}
<Icon name="DragHandle" size="XL" /> on:finalize={handleFinalize}
on:consider={updateColumnOrder}
>
{#each columns as column (column.id)}
<div class="column" animate:flip={{ duration: flipDurationMs }}>
<div
class="handle"
aria-label="drag-handle"
style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
on:mousedown={() => (dragDisabled = false)}
>
<Icon name="DragHandle" size="XL" />
</div>
<Select
bind:value={column.name}
placeholder="Column"
options={getRemainingColumnOptions(column.name)}
on:change={e => (column.displayName = e.detail)}
/>
<Input bind:value={column.displayName} placeholder="Label" />
<Icon
name="Close"
hoverable
size="S"
on:click={() => removeColumn(column.id)}
disabled={columns.length === 1}
/>
</div> </div>
<Select {/each}
bind:value={column.name} </div>
placeholder="Column" </Layout>
options={getRemainingColumnOptions(column.name)} {:else}
on:change={e => (column.displayName = e.detail)} <div class="column">
/> <div />
<Input bind:value={column.displayName} placeholder="Label" /> <Body size="S">Add the first column to your table.</Body>
<Icon
name="Close"
hoverable
size="S"
on:click={() => removeColumn(column.id)}
/>
</div>
{/each}
</div> </div>
{/if} {/if}
<div class="column"> <div class="columns">
<div /> <div class="column">
<Button secondary icon="Add" on:click={addColumn}>Add Column</Button> <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>