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 f88badd201 616f4c1e45
commit f685d1cd09
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 {

174
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} />
{#if context}
<section> <section>
<Heading size="XS">Columns</Heading> <div class="heading">Search</div>
<Search placeholder="Search" bind:value={search} />
</section>
{#if filteredColumns?.length}
<section>
<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)}>
{readableBinding}
</li>
{/each}
</ul>
</section>
{/if}
<section>
<Heading size="XS">Helpers</Heading>
<ul>
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
<li <li
on:click={() => { on:click={() => {
value = addToText(value, getCaretPosition(), helper.text) value = addToText(value, getCaretPosition(), helper.text)
}} }}
> >
<div> <div class="helper">
<Label extraSmall>{helper.displayText}</Label> <div class="helper__name">{helper.displayText}</div>
<div class="description"> <div class="helper__description">
{@html helper.description} {@html helper.description}
</div> </div>
<pre>{helper.example || ''}</pre> <pre class="helper__example">{helper.example || ''}</pre>
</div> </div>
</li> </li>
{/each} {/each}
</ul> </ul>
</section> </section>
</Layout> {/if}
</div>
</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>

26
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>
<div class="panel-wrapper">
<svelte:component <svelte:component
this={panel} this={panel}
serverSide serverSide
value={readableValue} value={readableValue}
bind:validity bind:valid
on:update={event => (tempValue = event.detail)} on:change={e => (tempValue = e.detail)}
bindableProperties={bindings} 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>

223
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}
<li
on:click={() => { on:click={() => {
value = addToText(value, getCaretPosition(), binding) value = addToText(value, getCaretPosition(), binding)
}} }}
> >
<span class="binding__label">{binding.label}</span> <span class="binding__label">{binding.label}</span>
<span class="binding__type">{binding.type}</span> <span class="binding__type">{binding.type}</span>
{#if binding.description}
<br /> <br />
<div class="binding__description"> <div class="binding__description">
{binding.description || ""} {binding.description || ""}
</div> </div>
</div> {/if}
</li>
{/each} {/each}
</ul>
</section>
{/if}
{/each} {/each}
</div> {#if filteredHelpers?.length}
<div class="section"> <section>
<Heading size="XS">Helpers</Heading> <div class="heading">Helpers</div>
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper} <ul>
<div {#each filteredHelpers as helper}
class="binding" <li
on:click={() => { on:click={() => {
value = addToText(value, getCaretPosition(), helper.text) value = addToText(value, getCaretPosition(), helper.text)
}} }}
> >
<span class="binding__label">{helper.label}</span> <div class="helper">
<br /> <div class="helper__name">{helper.displayText}</div>
<div class="binding__description"> <div class="helper__description">
{@html helper.description || ""} {@html helper.description}
</div> </div>
<pre>{helper.example || ""}</pre> <pre class="helper__example">{helper.example || ''}</pre>
</div> </div>
</li>
{/each} {/each}
</ul>
</section>
{/if}
</div> </div>
</Layout> </svelte:fragment>
</div> <div class="main">
<div class="text">
<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}

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

@ -73,20 +73,10 @@
</script> </script>
<DrawerContent> <DrawerContent>
<div class="actions-list" slot="sidebar"> <Layout noPadding gap="S" slot="sidebar">
<Layout>
<ActionMenu>
<Button slot="control" secondary>Add Action</Button>
{#each actionTypes as actionType}
<MenuItem on:click={addAction(actionType)}>
{actionType.name}
</MenuItem>
{/each}
</ActionMenu>
{#if actions && actions.length > 0} {#if actions && actions.length > 0}
<div <div
class="action-dnd-container" class="actions"
use:dndzone={{ use:dndzone={{
items: actions, items: actions,
flipDurationMs, flipDurationMs,
@ -99,28 +89,33 @@
<div <div
class="action-container" class="action-container"
animate:flip={{ duration: flipDurationMs }} animate:flip={{ duration: flipDurationMs }}
>
<div
class="action-header"
class:selected={action === selectedAction} class:selected={action === selectedAction}
on:click={selectAction(action)} on:click={selectAction(action)}
> >
{index + 1}. <Icon name="DragHandle" size="XL" />
{action[EVENT_TYPE_KEY]} <div class="action-header">
{index + 1}.&nbsp;{action[EVENT_TYPE_KEY]}
</div> </div>
<div <Icon
name="Close"
hoverable
size="S"
on:click={() => deleteAction(index)} on:click={() => deleteAction(index)}
style="margin-left: auto;" />
>
<Icon size="S" hoverable name="Close" />
</div>
</div> </div>
{/each} {/each}
</div> </div>
{/if} {/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>
</div> <Layout noPadding>
<Layout>
{#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>