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}> <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>

View File

@ -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);