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

Merge pull request #2034 from Budibase/drawer-improvements 

Drawer improvements
This commit is contained in:
Andrew Kingston 2021-07-21 08:37:31 +01:00 committed by GitHub
parent 2b9634ba17 f20ca254a2
commit 4aa1e42c89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 362 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -3,4 +3,5 @@ public
dist dist
packages/server/builder packages/server/builder
packages/server/coverage packages/server/coverage
packages/server/client
packages/builder/.routify packages/builder/.routify

1
.prettierignore
View File

@ -5,4 +5,5 @@ dist
packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
packages/server/builder packages/server/builder
packages/server/coverage packages/server/coverage
packages/server/client
packages/builder/.routify packages/builder/.routify

22
packages/bbui/src/Drawer/Drawer.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { slide } from "svelte/transition" import { slide } from "svelte/transition"
import Portal from "svelte-portal" import Portal from "svelte-portal"
import ActionButton from "../ActionButton/ActionButton.svelte" import Button from "../Button/Button.svelte"
import Body from "../Typography/Body.svelte" import Body from "../Typography/Body.svelte"
import Heading from "../Typography/Heading.svelte" import Heading from "../Typography/Heading.svelte"
@ -38,13 +38,13 @@
<header> <header>
<div class="text"> <div class="text">
<Heading size="XS">{title}</Heading> <Heading size="XS">{title}</Heading>
<Body size="XXS"> <Body size="S">
<slot name="description" /> <slot name="description" />
</Body> </Body>
</div> </div>
<div class="buttons"> <div class="buttons">
<Button secondary quiet on:click={hide}>Cancel</Button>
<slot name="buttons" /> <slot name="buttons" />
<ActionButton quiet icon="Close" on:click={hide} />
</div> </div>
</header> </header>
<slot name="body" /> <slot name="body" />
@ -59,7 +59,7 @@
left: 260px; left: 260px;
width: calc(100% - 520px); width: calc(100% - 520px);
background: var(--background); background: var(--background);
border: var(--border-light); border-top: var(--border-light);
z-index: 2; z-index: 2;
} }
@ -68,17 +68,15 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: var(--border-light); border-bottom: var(--border-light);
padding: var(--spectrum-alias-item-padding-s) 0; padding: var(--spacing-l) var(--spacing-xl);
} gap: var(--spacing-xl);
header :global(*) + :global(*) {
margin: 0 var(--spectrum-alias-grid-baseline);
} }
.text { .text {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: flex-start; justify-content: center;
align-items: center; align-items: flex-start;
margin-left: var(--spectrum-alias-item-padding-s); gap: var(--spacing-xs);
} }
</style> </style>

5
packages/bbui/src/Drawer/DrawerContent.svelte
View File

@ -19,7 +19,7 @@
.container { .container {
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-columns: 290px 1fr; grid-template-columns: 320px 1fr;
} }
.no-sidebar { .no-sidebar {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -27,12 +27,15 @@
.sidebar { .sidebar {
border-right: var(--border-light); border-right: var(--border-light);
overflow: auto; overflow: auto;
padding: var(--spacing-xl);
scrollbar-width: none;
} }
.sidebar::-webkit-scrollbar { .sidebar::-webkit-scrollbar {
display: none; display: none;
} }
.main { .main {
font-family: var(--font-sans); font-family: var(--font-sans);
padding: var(--spacing-xl);
} }
.main :global(textarea) { .main :global(textarea) {
min-height: 200px; min-height: 200px;

5
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View File

@ -69,8 +69,9 @@
<Input type="password" bind:value={block.inputs[key]} /> <Input type="password" bind:value={block.inputs[key]} />
{:else if value.customType === "email"} {:else if value.customType === "email"}
<DrawerBindableInput <DrawerBindableInput
title={value.title}
panel={AutomationBindingPanel} panel={AutomationBindingPanel}
type={"email"} type="email"
value={block.inputs[key]} value={block.inputs[key]}
on:change={e => (block.inputs[key] = e.detail)} on:change={e => (block.inputs[key] = e.detail)}
{bindings} {bindings}
@ -102,6 +103,7 @@
</CodeEditorModal> </CodeEditorModal>
{:else if value.type === "string" || value.type === "number"} {:else if value.type === "string" || value.type === "number"}
<DrawerBindableInput <DrawerBindableInput
title={value.title}
panel={AutomationBindingPanel} panel={AutomationBindingPanel}
type={value.customType} type={value.customType}
value={block.inputs[key]} value={block.inputs[key]}
@ -127,6 +129,7 @@
.block-field { .block-field {
display: grid; display: grid;
grid-gap: 5px;
} }
.block-label { .block-label {

188
packages/builder/src/components/common/bindings/BindingPanel.svelte
View File

@ -1,20 +1,9 @@
<script> <script>
import groupBy from "lodash/fp/groupBy" import groupBy from "lodash/fp/groupBy"
import { import { Search, TextArea, DrawerContent } from "@budibase/bbui"
Search,
TextArea,
Heading,
Label,
DrawerContent,
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 { import { readableToRuntimeBinding } from "builderStore/dataBinding"
getBindableProperties,
readableToRuntimeBinding,
} from "builderStore/dataBinding"
import { currentAsset, store } from "builderStore"
import { handlebarsCompletions } from "constants/completions" import { handlebarsCompletions } from "constants/completions"
import { addToText } from "./utils" import { addToText } from "./utils"
@ -22,44 +11,36 @@
export let bindableProperties export let bindableProperties
export let value = "" export let value = ""
export let bindingDrawer export let valid
export let valid = true
let originalValue = value
let helpers = handlebarsCompletions() let helpers = handlebarsCompletions()
let getCaretPosition let getCaretPosition
let search = "" let search = ""
$: value && checkValid() $: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
$: bindableProperties = getBindableProperties( $: dispatch("change", value)
$currentAsset, $: ({ context } = groupBy("type", bindableProperties))
$store.selectedComponentId
)
$: dispatch("update", value)
$: ({ instance, context } = groupBy("type", bindableProperties))
$: searchRgx = new RegExp(search, "ig") $: searchRgx = new RegExp(search, "ig")
$: filteredColumns = context?.filter(context => {
function checkValid() { return context.readableBinding.match(searchRgx)
// TODO: need to convert the value to the runtime binding })
const runtimeBinding = readableToRuntimeBinding(bindableProperties, value) $: filteredHelpers = helpers?.filter(helper => {
valid = isValid(runtimeBinding) return helper.label.match(searchRgx) || helper.description.match(searchRgx)
} })
export function cancel() {
dispatch("update", originalValue)
bindingDrawer.close()
}
</script> </script>
<DrawerContent> <DrawerContent>
<svelte:fragment slot="sidebar"> <svelte:fragment slot="sidebar">
<Layout> <div class="container">
<Search placeholder="Search" bind:value={search} /> <section>
{#if context} <div class="heading">Search</div>
<Search placeholder="Search" bind:value={search} />
</section>
{#if filteredColumns?.length}
<section> <section>
<Heading size="XS">Columns</Heading> <div class="heading">Columns</div>
<ul> <ul>
{#each context.filter( context => context.readableBinding.match(searchRgx) ) as { readableBinding }} {#each filteredColumns as { readableBinding }}
<li <li
on:click={() => { on:click={() => {
value = addToText(value, getCaretPosition(), readableBinding) value = addToText(value, getCaretPosition(), readableBinding)
@ -71,39 +52,29 @@
</ul> </ul>
</section> </section>
{/if} {/if}
{#if instance} {#if filteredHelpers?.length}
<section> <section>
<Heading size="XS">Components</Heading> <div class="heading">Helpers</div>
<ul> <ul>
{#each instance.filter( instance => instance.readableBinding.match(searchRgx) ) as { readableBinding }} {#each filteredHelpers as helper}
<li on:click={() => addToText(readableBinding)}> <li
{readableBinding} on:click={() => {
value = addToText(value, getCaretPosition(), helper.text)
}}
>
<div class="helper">
<div class="helper__name">{helper.displayText}</div>
<div class="helper__description">
{@html helper.description}
</div>
<pre class="helper__example">{helper.example || ''}</pre>
</div>
</li> </li>
{/each} {/each}
</ul> </ul>
</section> </section>
{/if} {/if}
<section> </div>
<Heading size="XS">Helpers</Heading>
<ul>
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
<li
on:click={() => {
value = addToText(value, getCaretPosition(), helper.text)
}}
>
<div>
<Label extraSmall>{helper.displayText}</Label>
<div class="description">
{@html helper.description}
</div>
<pre>{helper.example || ''}</pre>
</div>
</li>
{/each}
</ul>
</section>
</Layout>
</svelte:fragment> </svelte:fragment>
<div class="main"> <div class="main">
<TextArea <TextArea
@ -122,50 +93,78 @@
</DrawerContent> </DrawerContent>
<style> <style>
.main {
padding: var(--spacing-m);
}
.main :global(textarea) { .main :global(textarea) {
min-height: 150px !important; min-height: 150px !important;
} }
.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 { section {
display: grid; padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
grid-gap: var(--spacing-s); }
section:not(:first-child) {
border-top: var(--border-light);
} }
ul { ul {
list-style: none; list-style: none;
margin: 0;
padding: 0; padding: 0;
margin: 0;
} }
li { li {
display: flex;
font-family: var(--font-sans);
font-size: var(--font-size-s); font-size: var(--font-size-s);
color: var(--grey-7);
padding: var(--spacing-m); padding: var(--spacing-m);
margin: auto 0px;
align-items: center;
cursor: pointer;
border-top: var(--border-light);
border-width: 1px 0 1px 0;
border-radius: 4px; border-radius: 4px;
border: var(--border-light);
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
border-color 130ms ease-in-out;
} }
li:not(:last-of-type) {
pre, margin-bottom: var(--spacing-s);
.description { }
white-space: normal; li :global(*) {
transition: color 130ms ease-in-out;
} }
li:hover { li:hover {
background-color: var(--grey-2); 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;
} }
li:hover :global(*) {
color: var(--spectrum-global-color-gray-900) !important;
}
li:active { .helper {
color: var(--blue); 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 { .syntax-error {
@ -173,21 +172,8 @@
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;
} }
.description :global(p) {
color: var(--grey-7);
}
.description :global(p:hover) {
color: var(--ink);
}
.description :global(p a) {
color: var(--grey-7);
}
</style> </style>

13
packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
View File

@ -17,10 +17,11 @@
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
let bindingDrawer let bindingDrawer
$: tempValue = Array.isArray(value) ? value : [] let valid = true
$: readableValue = runtimeToReadableBinding(bindings, value) $: readableValue = runtimeToReadableBinding(bindings, value)
$: tempValue = readableValue
const handleClose = () => { const saveBinding = () => {
onChange(tempValue) onChange(tempValue)
bindingDrawer.hide() bindingDrawer.hide()
} }
@ -48,13 +49,15 @@
<svelte:fragment slot="description"> <svelte:fragment slot="description">
Add the objects on the left to enrich your text. Add the objects on the left to enrich your text.
</svelte:fragment> </svelte:fragment>
<Button cta slot="buttons" on:click={handleClose}>Save</Button> <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
Save
</Button>
<svelte:component <svelte:component
this={panel} this={panel}
slot="body" slot="body"
bind:valid
value={readableValue} value={readableValue}
close={handleClose} on:change={event => (tempValue = event.detail)}
on:update={event => (tempValue = event.detail)}
bindableProperties={bindings} bindableProperties={bindings}
/> />
</Drawer> </Drawer>

38
packages/builder/src/components/common/bindings/ModalBindableInput.svelte
View File

@ -6,7 +6,6 @@
} from "builderStore/dataBinding" } from "builderStore/dataBinding"
import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte" import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher()
export let panel = ServerBindingPanel export let panel = ServerBindingPanel
export let value = "" export let value = ""
@ -16,12 +15,11 @@
export let placeholder export let placeholder
export let label export let label
const dispatch = createEventDispatcher()
let bindingModal let bindingModal
let validity = true let valid = true
$: readableValue = runtimeToReadableBinding(bindings, value) $: readableValue = runtimeToReadableBinding(bindings, value)
$: tempValue = readableValue $: tempValue = readableValue
$: invalid = !validity
const saveBinding = () => { const saveBinding = () => {
onChange(tempValue) onChange(tempValue)
@ -38,7 +36,7 @@
{label} {label}
{thin} {thin}
value={readableValue} value={readableValue}
on:change={event => onChange(event.target.value)} on:change={event => onChange(event.detail)}
{placeholder} {placeholder}
/> />
<div class="icon" on:click={bindingModal.show}> <div class="icon" on:click={bindingModal.show}>
@ -46,23 +44,20 @@
</div> </div>
</div> </div>
<Modal bind:this={bindingModal}> <Modal bind:this={bindingModal}>
<ModalContent <ModalContent {title} onConfirm={saveBinding} disabled={!valid} size="XL">
{title}
onConfirm={saveBinding}
bind:disabled={invalid}
size="XL"
>
<Body extraSmall grey> <Body extraSmall grey>
Add the objects on the left to enrich your text. Add the objects on the left to enrich your text.
</Body> </Body>
<svelte:component <div class="panel-wrapper">
this={panel} <svelte:component
serverSide this={panel}
value={readableValue} serverSide
bind:validity value={readableValue}
on:update={event => (tempValue = event.detail)} bind:valid
bindableProperties={bindings} on:change={e => (tempValue = e.detail)}
/> bindableProperties={bindings}
/>
</div>
</ModalContent> </ModalContent>
</Modal> </Modal>
@ -100,4 +95,9 @@
background-color: var(--spectrum-global-color-gray-50); background-color: var(--spectrum-global-color-gray-50);
border-color: var(--spectrum-alias-border-color-hover); border-color: var(--spectrum-alias-border-color-hover);
} }
.panel-wrapper {
border: var(--border-light);
border-radius: 4px;
}
</style> </style>

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

2
packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
View File

@ -40,7 +40,7 @@
<Button cta slot="buttons" on:click={save}>Save</Button> <Button cta slot="buttons" on:click={save}>Save</Button>
<DrawerContent slot="body"> <DrawerContent slot="body">
<div class="content"> <div class="content">
<Layout gap="S"> <Layout gap="S" noPadding>
<Body size="S">Custom CSS overrides all other component styles.</Body> <Body size="S">Custom CSS overrides all other component styles.</Body>
<TextArea bind:value={tempValue} placeholder="Enter some CSS..." /> <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
</Layout> </Layout>

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
View File

@ -132,7 +132,7 @@
Save Save
</Button> </Button>
<DrawerContent slot="body"> <DrawerContent slot="body">
<Layout> <Layout noPadding>
{#if value.parameters.length > 0} {#if value.parameters.length > 0}
<ParameterBuilder <ParameterBuilder
bind:customParams={value.queryParams} bind:customParams={value.queryParams}

130
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
View File

@ -73,54 +73,49 @@
</script> </script>
<DrawerContent> <DrawerContent>
<div class="actions-list" slot="sidebar"> <Layout noPadding gap="S" slot="sidebar">
<Layout> {#if actions && actions.length > 0}
<ActionMenu> <div
<Button slot="control" secondary>Add Action</Button> class="actions"
{#each actionTypes as actionType} use:dndzone={{
<MenuItem on:click={addAction(actionType)}> items: actions,
{actionType.name} flipDurationMs,
</MenuItem> dropTargetStyle: { outline: "none" },
{/each} }}
</ActionMenu> on:consider={handleDndConsider}
on:finalize={handleDndFinalize}
{#if actions && actions.length > 0} >
<div {#each actions as action, index (action.id)}
class="action-dnd-container" <div
use:dndzone={{ class="action-container"
items: actions, animate:flip={{ duration: flipDurationMs }}
flipDurationMs, class:selected={action === selectedAction}
dropTargetStyle: { outline: "none" }, on:click={selectAction(action)}
}} >
on:consider={handleDndConsider} <Icon name="DragHandle" size="XL" />
on:finalize={handleDndFinalize} <div class="action-header">
> {index + 1}.&nbsp;{action[EVENT_TYPE_KEY]}
{#each actions as action, index (action.id)}
<div
class="action-container"
animate:flip={{ duration: flipDurationMs }}
>
<div
class="action-header"
class:selected={action === selectedAction}
on:click={selectAction(action)}
>
{index + 1}.
{action[EVENT_TYPE_KEY]}
</div>
<div
on:click={() => deleteAction(index)}
style="margin-left: auto;"
>
<Icon size="S" hoverable name="Close" />
</div>
</div> </div>
{/each} <Icon
</div> name="Close"
{/if} hoverable
</Layout> size="S"
</div> on:click={() => deleteAction(index)}
<Layout> />
</div>
{/each}
</div>
{/if}
<ActionMenu>
<Button slot="control" secondary>Add Action</Button>
{#each actionTypes as actionType}
<MenuItem on:click={addAction(actionType)}>
{actionType.name}
</MenuItem>
{/each}
</ActionMenu>
</Layout>
<Layout noPadding>
{#if selectedAction} {#if selectedAction}
<div class="selected-action-container"> <div class="selected-action-container">
<svelte:component <svelte:component
@ -133,32 +128,41 @@
</DrawerContent> </DrawerContent>
<style> <style>
.action-header { .actions {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; justify-content: flex-start;
margin-top: var(--spacing-s); align-items: stretch;
gap: var(--spacing-s);
} }
.action-header { .action-header {
margin-bottom: var(--spacing-m); color: var(--spectrum-global-color-gray-700);
font-size: var(--font-size-s);
color: var(--grey-7);
font-weight: 600;
}
.action-header:hover, flex: 1 1 auto;
.action-header.selected {
cursor: pointer;
color: var(--ink);
} }
.action-container { .action-container {
border-bottom: 1px solid var(--grey-1); background-color: var(--background);
padding: var(--spacing-s) var(--spacing-m);
border-radius: 4px;
border: var(--border-light);
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
border-color 130ms ease-in-out;
gap: var(--spacing-m);
display: flex; display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center; align-items: center;
} }
.action-container:last-child { .action-container:hover,
border-bottom: none; .action-container.selected {
background-color: var(--spectrum-global-color-gray-50);
border-color: var(--spectrum-global-color-gray-500);
cursor: pointer;
}
.action-container:hover .action-header,
.action-container.selected .action-header {
color: var(--spectrum-global-color-gray-900);
} }
</style> </style>

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
View File

@ -25,7 +25,7 @@
} }
</script> </script>
<Layout gap="XS"> <Layout gap="XS" noPadding>
<Select <Select
label="Datasource" label="Datasource"
bind:value={parameters.datasourceId} bind:value={parameters.datasourceId}

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
View File

@ -42,7 +42,7 @@
<Drawer bind:this={drawer} title="Filtering"> <Drawer bind:this={drawer} title="Filtering">
<Button cta slot="buttons" on:click={saveFilter}>Save</Button> <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<DrawerContent slot="body"> <DrawerContent slot="body">
<Layout> <Layout noPadding>
<Body size="S"> <Body size="S">
{#if !numFilters} {#if !numFilters}
Add your first filter column. Add your first filter column.

11
packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
View File

@ -41,7 +41,7 @@
<DrawerContent> <DrawerContent>
<div class="container"> <div class="container">
<Layout> <Layout noPadding gap="S">
{#if links?.length} {#if links?.length}
<div <div
class="links" class="links"
@ -72,7 +72,7 @@
{/each} {/each}
</div> </div>
{/if} {/if}
<div class="button-container"> <div>
<Button secondary icon="Add" on:click={addLink}>Add Link</Button> <Button secondary icon="Add" on:click={addLink}>Add Link</Button>
</div> </div>
</Layout> </Layout>
@ -83,16 +83,16 @@
.container { .container {
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
margin: var(--spacing-m) auto; margin: 0 auto;
} }
.links { .links {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-s);
} }
.link { .link {
padding: 4px 8px;
gap: var(--spacing-l); gap: var(--spacing-l);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -108,7 +108,4 @@
flex: 1 1 auto; flex: 1 1 auto;
width: 0; width: 0;
} }
.button-container {
margin-left: var(--spacing-l);
}
</style> </style>

7
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View File

@ -20,7 +20,6 @@
export let onChange = () => {} export let onChange = () => {}
let bindingDrawer let bindingDrawer
let temporaryBindableValue = value
let anchor let anchor
let valid let valid
@ -29,10 +28,11 @@
$store.selectedComponentId $store.selectedComponentId
) )
$: safeValue = getSafeValue(value, props.defaultValue, bindableProperties) $: safeValue = getSafeValue(value, props.defaultValue, bindableProperties)
$: tempValue = safeValue
$: replaceBindings = val => readableToRuntimeBinding(bindableProperties, val) $: replaceBindings = val => readableToRuntimeBinding(bindableProperties, val)
const handleClose = () => { const handleClose = () => {
handleChange(temporaryBindableValue) handleChange(tempValue)
bindingDrawer.hide() bindingDrawer.hide()
} }
@ -107,8 +107,7 @@
slot="body" slot="body"
bind:valid bind:valid
value={safeValue} value={safeValue}
close={handleClose} on:change={e => (tempValue = e.detail)}
on:update={e => (temporaryBindableValue = e.detail)}
{bindableProperties} {bindableProperties}
/> />
</Drawer> </Drawer>