ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update styles of server binding panel used for formula fields and automation bindings

master
Andrew Kingston 5 years ago
parent
120994e2c4
commit
d8ad23ddb8
1 changed files with 145 additions and 108 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 253
      packages/builder/src/components/common/bindings/ServerBindingPanel.svelte

253
packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
View File

@ -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); min-height: 150px !important;
border-right: var(--border-light);
overflow-y: auto;
} }
.section {
display: grid; .container {
grid-gap: var(--spacing-s); 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;
} }
.text { section {
padding: var(--spacing-l); padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
font-family: var(--font-sans);
} }
.text :global(textarea) { section:not(:first-child) {
min-height: 150px !important; border-top: var(--border-light);
} }
.text :global(p) { 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;
cursor: pointer;
} }
.binding:hover { li:not(:last-of-type) {
background-color: var(--grey-2); margin-bottom: var(--spacing-s);
cursor: pointer;
} }
.binding__label { li :global(*) {
font-weight: 600; transition: color 130ms ease-in-out;
text-transform: capitalize;
} }
.binding__description { li:hover {
color: var(--grey-8); color: var(--spectrum-global-color-gray-900);
margin-top: 2px; background-color: var(--spectrum-global-color-gray-50);
white-space: normal; border-color: var(--spectrum-global-color-gray-500);
cursor: pointer;
}
li:hover :global(*) {
color: var(--spectrum-global-color-gray-900) !important;
} }
pre { .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; white-space: normal;
margin: 0.5rem 0 0 0;
font-weight: 700;
} }
.helper__description :global(p) {
.binding__type { margin: 0;
font-family: monospace;
background-color: var(--grey-2);
border-radius: var(--border-radius-m);
padding: 2px;
margin-left: 2px;
font-weight: 600;
} }
.syntax-error { .syntax-error {
padding-top: var(--spacing-m);
color: var(--red); color: var(--red);
font-size: 12px; font-size: 12px;
} }
.syntax-error a { .syntax-error a {
color: var(--red); color: var(--red);
text-decoration: underline; text-decoration: underline;
} }
.binding__label {
font-weight: 600;
text-transform: capitalize;
}
.binding__description {
color: var(--spectrum-global-color-gray-700);
margin: 0.5rem 0 0 0;
white-space: normal;
}
.binding__type {
font-family: monospace;
background-color: var(--spectrum-global-color-gray-200);
border-radius: var(--border-radius-s);
padding: 2px 4px;
margin-left: 2px;
font-weight: 600;
}
</style> </style>

Write Preview
Loading…
Cancel
Save