Small UI update to the binding interface with automations
Heading fixed - size reduced. Spacing updating with the list section Placeholder added Link to docs added
This commit is contained in:
parent
ff5e0aa8cc
commit
d96ea9424c
|
@ -28,11 +28,12 @@
|
||||||
<Popover {anchor} {align} bind:this={popover}>
|
<Popover {anchor} {align} bind:this={popover}>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="bindings">
|
<div class="bindings">
|
||||||
<Label large>Available bindings</Label>
|
<Heading small>Available bindings</Heading>
|
||||||
<div class="bindings__wrapper">
|
<div class="bindings__wrapper">
|
||||||
<div class="bindings__list">
|
<div class="bindings__list">
|
||||||
{#each categories as [categoryName, bindings]}
|
{#each categories as [categoryName, bindings]}
|
||||||
<Heading extraSmall>{categoryName}</Heading>
|
<Heading extraSmall>{categoryName}</Heading>
|
||||||
|
<Spacer extraSmall />
|
||||||
{#each bindings as binding}
|
{#each bindings as binding}
|
||||||
<div class="binding" on:click={() => onClickBinding(binding)}>
|
<div class="binding" on:click={() => onClickBinding(binding)}>
|
||||||
<span class="binding__label">{binding.label}</span>
|
<span class="binding__label">{binding.label}</span>
|
||||||
|
@ -46,16 +47,17 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<Heading large>Data binding</Heading>
|
<Heading small>Data binding</Heading>
|
||||||
<Spacer small />
|
|
||||||
<Body small lh black>
|
<Body small lh black>
|
||||||
Binding connects one piece of data to another and makes it dynamic.
|
Binding connects one piece of data to another and makes it dynamic.
|
||||||
Click the objects on the left to add them to the textbox.
|
Click the objects on the left to add them to the textbox.
|
||||||
</Body>
|
</Body>
|
||||||
<Spacer medium />
|
<TextArea
|
||||||
<TextArea thin bind:value placeholder="..." />
|
thin
|
||||||
|
bind:value
|
||||||
|
placeholder="Add options from the left, type text, or do both" />
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<a href="https://docs.budibase.com">
|
<a href="https://docs.budibase.com/design/binding">
|
||||||
<Body small>Learn more about binding</Body>
|
<Body small>Learn more about binding</Body>
|
||||||
</a>
|
</a>
|
||||||
<Button on:click={popover.hide} primary>Done</Button>
|
<Button on:click={popover.hide} primary>Done</Button>
|
||||||
|
|
|
@ -72,6 +72,7 @@
|
||||||
}
|
}
|
||||||
.dropdown {
|
.dropdown {
|
||||||
padding: var(--spacing-m) 0;
|
padding: var(--spacing-m) 0;
|
||||||
|
z-index: 99999999;
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
|
padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
|
||||||
|
|
Loading…
Reference in New Issue