CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-11 23:16:00 +12:00
Code Issues Projects Releases Wiki Activity

Add configuration options for table cell customisation to the table component

Browse source
This commit is contained in:
Andrew Kingston 2022-02-18 20:15:47 +00:00
parent db9c1b2b05
commit f63db2fb4f
1 changed files with 43 additions and 3 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

@ -8,10 +8,12 @@
Select, Select,
Label, Label,
Body, Body,
ColorPicker,
} 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"
import { generate } from "shortid" import { generate } from "shortid"
import { store } from "builderStore"
export let columns = [] export let columns = []
export let options = [] export let options = []
@ -91,6 +93,14 @@
<Label size="L">Column</Label> <Label size="L">Column</Label>
<Label size="L">Label</Label> <Label size="L">Label</Label>
<Label size="L">Width</Label> <Label size="L">Width</Label>
<Label size="L">Alignment</Label>
<Label size="L">Format</Label>
<div class="center">
<Label size="L">Background</Label>
</div>
<div class="center">
<Label size="L">Text color</Label>
</div>
<div /> <div />
</div> </div>
<div <div
@ -122,6 +132,32 @@
/> />
<Input bind:value={column.displayName} placeholder="Label" /> <Input bind:value={column.displayName} placeholder="Label" />
<Input bind:value={column.width} placeholder="Auto" /> <Input bind:value={column.width} placeholder="Auto" />
<Select
bind:value={column.align}
options={["Left", "Center", "Right"]}
placeholder="Default"
/>
<Select
bind:value={column.format}
options={["Left"]}
placeholder="Default"
/>
<div class="center">
<ColorPicker
value={column.background}
on:change={e => (column.background = e.detail)}
alignRight
spectrumTheme={$store.theme}
/>
</div>
<div class="center">
<ColorPicker
value={column.color}
on:change={e => (column.color = e.detail)}
alignRight
spectrumTheme={$store.theme}
/>
</div>
<Icon <Icon
name="Close" name="Close"
hoverable hoverable
@ -140,7 +176,7 @@
By default, all table columns will automatically be shown. By default, all table columns will automatically be shown.
<br /> <br />
You can manually control which columns are included in your table, You can manually control which columns are included in your table,
and their widths, by adding them below. and their appearance, by adding them below.
</Body> </Body>
</div> </div>
</div> </div>
@ -163,7 +199,7 @@
<style> <style>
.container { .container {
width: 100%; width: 100%;
max-width: 800px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.columns { .columns {
@ -176,7 +212,7 @@
.column { .column {
gap: var(--spacing-l); gap: var(--spacing-l);
display: grid; display: grid;
grid-template-columns: 20px 1fr 1fr 1fr 20px; grid-template-columns: 20px 1fr 1fr 1fr 1fr 1fr 72px 72px 20px;
align-items: center; align-items: center;
border-radius: var(--border-radius-s); border-radius: var(--border-radius-s);
transition: background-color ease-in-out 130ms; transition: background-color ease-in-out 130ms;
@ -191,6 +227,10 @@
.wide { .wide {
grid-column: 2 / -1; grid-column: 2 / -1;
} }
.center {
display: grid;
place-items: center;
}
.buttons { .buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;