CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-10 14:35:47 +12:00
Code Issues Projects Releases Wiki Activity

Add labels to column config drawer

Browse source
This commit is contained in:
Andrew Kingston 2022-02-14 11:47:48 +00:00
parent 0f2d41c342
commit 4f00e7a3b1
1 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
View file

@ -6,6 +6,7 @@
Layout, Layout,
Input, Input,
Select, Select,
Label,
} 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"
@ -75,6 +76,12 @@
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
@ -102,7 +109,8 @@
{/each} {/each}
</div> </div>
{/if} {/if}
<div> <div class="column">
<div />
<Button secondary icon="Add" on:click={addColumn}>Add Column</Button> <Button secondary icon="Add" on:click={addColumn}>Add Column</Button>
</div> </div>
</Layout> </Layout>
@ -124,9 +132,8 @@
} }
.column { .column {
gap: var(--spacing-l); gap: var(--spacing-l);
display: flex; display: grid;
flex-direction: row; grid-template-columns: 20px 1fr 1fr 20px;
justify-content: space-between;
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;
@ -134,10 +141,6 @@
.column:hover { .column:hover {
background-color: var(--spectrum-global-color-gray-100); background-color: var(--spectrum-global-color-gray-100);
} }
.column > :global(.spectrum-Form-item) {
flex: 1 1 auto;
width: 0;
}
.handle { .handle {
display: grid; display: grid;
place-items: center; place-items: center;