MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

rework AutomationBindingPanel to use Layout component

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-27 17:10:25 +02:00
parent c4c8a281c2
commit 3ebfa3615b
1 changed files with 44 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import groupBy from "lodash/fp/groupBy" import groupBy from "lodash/fp/groupBy"
import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui" import { Input, TextArea, Heading, Layout } from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { isValid } from "@budibase/string-templates" import { isValid } from "@budibase/string-templates"
import { handlebarsCompletions } from "constants/completions" import { handlebarsCompletions } from "constants/completions"
@ -46,43 +46,50 @@
<div class="container"> <div class="container">
<div class="list"> <div class="list">
<Heading s h3>Available bindings</Heading> <Layout>
<Spacer medium /> <div class="section">
<Input extraThin placeholder="Search" bind:value={search} /> <Heading s h3>Available bindings</Heading>
<Spacer medium /> <Input extraThin placeholder="Search" bind:value={search} />
{#each categories as [categoryName, bindings]}
<Heading xs h4>{categoryName}</Heading>
<Spacer extraSmall />
{#each bindableProperties.filter(binding =>
binding.label.match(searchRgx)
) as binding}
<div class="binding" on:click={() => addToText(binding)}>
<span class="binding__label">{binding.label}</span>
<span class="binding__type">{binding.type}</span>
<br />
<div class="binding__description">{binding.description || ''}</div>
</div>
{/each}
{/each}
<Heading xs h3>Helpers</Heading>
<Spacer extraSmall />
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
<div class="binding" on:click={() => addToText(helper)}>
<span class="binding__label">{helper.label}</span>
<br />
<div class="binding__description">
{@html helper.description || ''}
</div>
<pre>{helper.example || ''}</pre>
</div> </div>
{/each} <div class="section">
{#each categories as [categoryName, bindings]}
<Heading xs h4>{categoryName}</Heading>
{#each bindableProperties.filter((binding) =>
binding.label.match(searchRgx)
) as binding}
<div class="binding" on:click={() => addToText(binding)}>
<span class="binding__label">{binding.label}</span>
<span class="binding__type">{binding.type}</span>
<br />
<div class="binding__description">
{binding.description || ""}
</div>
</div>
{/each}
{/each}
</div>
<div class="section">
<Heading xs h3>Helpers</Heading>
{#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
<div class="binding" on:click={() => addToText(helper)}>
<span class="binding__label">{helper.label}</span>
<br />
<div class="binding__description">
{@html helper.description || ""}
</div>
<pre>{helper.example || ''}</pre>
</div>
{/each}
</div>
</Layout>
</div> </div>
<div class="text"> <div class="text">
<TextArea <TextArea
bind:getCaretPosition bind:getCaretPosition
thin thin
bind:value bind:value
placeholder="Add text, or click the objects on the left to add them to the textbox." /> placeholder="Add text, or click the objects on the left to add them to the textbox."
/>
{#if !validity} {#if !validity}
<p class="syntax-error"> <p class="syntax-error">
Current Handlebars syntax is invalid, please check the guide Current Handlebars syntax is invalid, please check the guide
@ -98,22 +105,17 @@
height: 40vh; height: 40vh;
overflow-y: auto; overflow-y: auto;
display: grid; display: grid;
grid-template-columns: 280px 1fr; grid-template-columns: 290px 1fr;
} }
.list { .list {
grid-gap: var(--spacing-s);
border-right: var(--border-light); border-right: var(--border-light);
padding: var(--spacing-l); overflow-y: auto;
overflow: auto;
} }
.list { .section {
border-right: var(--border-light); display: grid;
padding: var(--spacing-l); grid-gap: var(--spacing-s);
overflow: auto;
}
.list::-webkit-scrollbar {
display: none;
} }
.text { .text {
@ -159,21 +161,6 @@
font-weight: 500; font-weight: 500;
} }
.editor {
padding-left: var(--spacing-l);
}
.editor :global(textarea) {
min-height: 60px;
}
.controls {
display: grid;
grid-template-columns: 1fr auto;
grid-gap: var(--spacing-l);
align-items: center;
margin-top: var(--spacing-m);
}
.syntax-error { .syntax-error {
color: var(--red); color: var(--red);
font-size: 12px; font-size: 12px;