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:
Joe 2020-09-28 12:19:11 +01:00
parent ff5e0aa8cc
commit d96ea9424c
2 changed files with 9 additions and 6 deletions

View File

@ -28,11 +28,12 @@
<Popover {anchor} {align} bind:this={popover}>
<div class="container">
<div class="bindings">
<Label large>Available bindings</Label>
<Heading small>Available bindings</Heading>
<div class="bindings__wrapper">
<div class="bindings__list">
{#each categories as [categoryName, bindings]}
<Heading extraSmall>{categoryName}</Heading>
<Spacer extraSmall />
{#each bindings as binding}
<div class="binding" on:click={() => onClickBinding(binding)}>
<span class="binding__label">{binding.label}</span>
@ -46,16 +47,17 @@
</div>
</div>
<div class="editor">
<Heading large>Data binding</Heading>
<Spacer small />
<Heading small>Data binding</Heading>
<Body small lh black>
Binding connects one piece of data to another and makes it dynamic.
Click the objects on the left to add them to the textbox.
</Body>
<Spacer medium />
<TextArea thin bind:value placeholder="..." />
<TextArea
thin
bind:value
placeholder="Add options from the left, type text, or do both" />
<div class="controls">
<a href="https://docs.budibase.com">
<a href="https://docs.budibase.com/design/binding">
<Body small>Learn more about binding</Body>
</a>
<Button on:click={popover.hide} primary>Done</Button>

View File

@ -72,6 +72,7 @@
}
.dropdown {
padding: var(--spacing-m) 0;
z-index: 99999999;
}
.title {
padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);