Update styles of server binding panel used for formula fields and automation bindings
This commit is contained in:
Andrew Kingston
parent
120994e2c4
commit
d8ad23ddb8
|
|
@ -1,12 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import groupBy from "lodash/fp/groupBy"
|
import groupBy from "lodash/fp/groupBy"
|
||||||
import {
|
import { Search, TextArea, DrawerContent } from "@budibase/bbui"
|
||||||
Input,
|
|
||||||
TextArea,
|
|
||||||
Heading,
|
|
||||||
Layout,
|
|
||||||
DrawerContent,
|
|
||||||
} 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"
|
||||||
|
|
@ -16,83 +10,91 @@
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
export let bindableProperties = []
|
export let bindableProperties = []
|
||||||
export let validity = true
|
export let valid = true
|
||||||
export let value = ""
|
export let value = ""
|
||||||
|
|
||||||
let hasReadable = bindableProperties[0].readableBinding != null
|
|
||||||
let helpers = handlebarsCompletions()
|
let helpers = handlebarsCompletions()
|
||||||
let getCaretPosition
|
let getCaretPosition
|
||||||
let search = ""
|
let search = ""
|
||||||
|
|
||||||
$: categories = Object.entries(groupBy("category", bindableProperties))
|
$: categories = Object.entries(groupBy("category", bindableProperties))
|
||||||
$: value && checkValid()
|
$: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
|
||||||
$: dispatch("update", value)
|
$: dispatch("change", value)
|
||||||
$: searchRgx = new RegExp(search, "ig")
|
$: searchRgx = new RegExp(search, "ig")
|
||||||
|
$: filteredCategories = categories.map(([categoryName, bindings]) => {
|
||||||
function checkValid() {
|
const filteredBindings = bindings.filter(binding => {
|
||||||
if (hasReadable) {
|
return binding.label.match(searchRgx)
|
||||||
const runtime = readableToRuntimeBinding(bindableProperties, value)
|
})
|
||||||
validity = isValid(runtime)
|
return [categoryName, filteredBindings]
|
||||||
} else {
|
})
|
||||||
validity = isValid(value)
|
$: filteredHelpers = helpers?.filter(helper => {
|
||||||
}
|
return helper.label.match(searchRgx) || helper.description.match(searchRgx)
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DrawerContent>
|
<DrawerContent>
|
||||||
<div slot="sidebar" class="list">
|
<svelte:fragment slot="sidebar">
|
||||||
<Layout>
|
<div class="container">
|
||||||
<div class="section">
|
<section>
|
||||||
<Heading size="S">Available bindings</Heading>
|
<div class="heading">Search</div>
|
||||||
<Input extraThin placeholder="Search" bind:value={search} />
|
<Search placeholder="Search" bind:value={search} />
|
||||||
</div>
|
</section>
|
||||||
<div class="section">
|
{#each filteredCategories as [categoryName, bindings]}
|
||||||
{#each categories as [categoryName, bindings]}
|
{#if bindings.length}
|
||||||
<Heading size="XS">{categoryName}</Heading>
|
<section>
|
||||||
{#each bindings.filter( binding => binding.label.match(searchRgx) ) as binding}
|
<div class="heading">{categoryName}</div>
|
||||||
<div
|
<ul>
|
||||||
class="binding"
|
{#each bindings as binding}
|
||||||
on:click={() => {
|
<li
|
||||||
value = addToText(value, getCaretPosition(), binding)
|
on:click={() => {
|
||||||
}}
|
value = addToText(value, getCaretPosition(), binding)
|
||||||
>
|
}}
|
||||||
<span class="binding__label">{binding.label}</span>
|
>
|
||||||
<span class="binding__type">{binding.type}</span>
|
<span class="binding__label">{binding.label}</span>
|
||||||
<br />
|
<span class="binding__type">{binding.type}</span>
|
||||||
<div class="binding__description">
|
{#if binding.description}
|
||||||
{binding.description || ""}
|
<br />
|
||||||
</div>
|
<div class="binding__description">
|
||||||
</div>
|
{binding.description || ""}
|
||||||
{/each}
|
</div>
|
||||||
{/each}
|
{/if}
|
||||||
</div>
|
</li>
|
||||||
<div class="section">
|
{/each}
|
||||||
<Heading size="XS">Helpers</Heading>
|
</ul>
|
||||||
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
</section>
|
||||||
<div
|
{/if}
|
||||||
class="binding"
|
{/each}
|
||||||
on:click={() => {
|
{#if filteredHelpers?.length}
|
||||||
value = addToText(value, getCaretPosition(), helper.text)
|
<section>
|
||||||
}}
|
<div class="heading">Helpers</div>
|
||||||
>
|
<ul>
|
||||||
<span class="binding__label">{helper.label}</span>
|
{#each filteredHelpers as helper}
|
||||||
<br />
|
<li
|
||||||
<div class="binding__description">
|
on:click={() => {
|
||||||
{@html helper.description || ""}
|
value = addToText(value, getCaretPosition(), helper.text)
|
||||||
</div>
|
}}
|
||||||
<pre>{helper.example || ""}</pre>
|
>
|
||||||
</div>
|
<div class="helper">
|
||||||
{/each}
|
<div class="helper__name">{helper.displayText}</div>
|
||||||
</div>
|
<div class="helper__description">
|
||||||
</Layout>
|
{@html helper.description}
|
||||||
</div>
|
</div>
|
||||||
<div class="text">
|
<pre class="helper__example">{helper.example || ''}</pre>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</svelte:fragment>
|
||||||
|
<div class="main">
|
||||||
<TextArea
|
<TextArea
|
||||||
bind:getCaretPosition
|
bind:getCaretPosition
|
||||||
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 !valid}
|
||||||
<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
|
||||||
<a href="https://handlebarsjs.com/guide/">here</a>
|
<a href="https://handlebarsjs.com/guide/">here</a>
|
||||||
|
|
@ -103,70 +105,105 @@
|
||||||
</DrawerContent>
|
</DrawerContent>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.list {
|
.main :global(textarea) {
|
||||||
grid-gap: var(--spacing-s);
|
|
||||||
border-right: var(--border-light);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.section {
|
|
||||||
display: grid;
|
|
||||||
grid-gap: var(--spacing-s);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
padding: var(--spacing-l);
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
}
|
|
||||||
.text :global(textarea) {
|
|
||||||
min-height: 150px !important;
|
min-height: 150px !important;
|
||||||
}
|
}
|
||||||
.text :global(p) {
|
|
||||||
|
.container {
|
||||||
|
margin: calc(-1 * var(--spacing-xl));
|
||||||
|
}
|
||||||
|
.heading {
|
||||||
|
font-size: var(--font-size-s);
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--spectrum-global-color-gray-600);
|
||||||
|
padding: var(--spacing-xl) 0 var(--spacing-m) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
|
||||||
|
}
|
||||||
|
section:not(:first-child) {
|
||||||
|
border-top: var(--border-light);
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.binding {
|
li {
|
||||||
font-size: 12px;
|
font-size: var(--font-size-s);
|
||||||
|
padding: var(--spacing-m);
|
||||||
|
border-radius: 4px;
|
||||||
border: var(--border-light);
|
border: var(--border-light);
|
||||||
border-width: 1px 0 0 0;
|
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
|
||||||
padding: var(--spacing-m) 0;
|
border-color 130ms ease-in-out;
|
||||||
margin: auto 0;
|
}
|
||||||
align-items: center;
|
li:not(:last-of-type) {
|
||||||
|
margin-bottom: var(--spacing-s);
|
||||||
|
}
|
||||||
|
li :global(*) {
|
||||||
|
transition: color 130ms ease-in-out;
|
||||||
|
}
|
||||||
|
li:hover {
|
||||||
|
color: var(--spectrum-global-color-gray-900);
|
||||||
|
background-color: var(--spectrum-global-color-gray-50);
|
||||||
|
border-color: var(--spectrum-global-color-gray-500);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.binding:hover {
|
li:hover :global(*) {
|
||||||
background-color: var(--grey-2);
|
color: var(--spectrum-global-color-gray-900) !important;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.helper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
.helper__name {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.helper__description,
|
||||||
|
.helper__description :global(*) {
|
||||||
|
color: var(--spectrum-global-color-gray-700);
|
||||||
|
}
|
||||||
|
.helper__example {
|
||||||
|
white-space: normal;
|
||||||
|
margin: 0.5rem 0 0 0;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.helper__description :global(p) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.syntax-error {
|
||||||
|
padding-top: var(--spacing-m);
|
||||||
|
color: var(--red);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.syntax-error a {
|
||||||
|
color: var(--red);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
.binding__label {
|
.binding__label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
.binding__description {
|
.binding__description {
|
||||||
color: var(--grey-8);
|
color: var(--spectrum-global-color-gray-700);
|
||||||
margin-top: 2px;
|
margin: 0.5rem 0 0 0;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.binding__type {
|
.binding__type {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
background-color: var(--grey-2);
|
background-color: var(--spectrum-global-color-gray-200);
|
||||||
border-radius: var(--border-radius-m);
|
border-radius: var(--border-radius-s);
|
||||||
padding: 2px;
|
padding: 2px 4px;
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.syntax-error {
|
|
||||||
color: var(--red);
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.syntax-error a {
|
|
||||||
color: var(--red);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue