CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-09 08:16:34 +12:00
Code Issues Projects Releases Wiki Activity

Update drawer styles, drawer bindable inputs and settings bindable inputs

Browse source
This commit is contained in:
Andrew Kingston 2021-07-14 14:21:11 +01:00
parent e692223661
commit 38014a76be
5 changed files with 108 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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;

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>

9
packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
View file

@ -17,10 +17,10 @@
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
let bindingDrawer let bindingDrawer
$: tempValue = Array.isArray(value) ? value : []
$: readableValue = runtimeToReadableBinding(bindings, value) $: readableValue = runtimeToReadableBinding(bindings, value)
$: tempValue = readableValue
const handleClose = () => { const saveBinding = () => {
onChange(tempValue) onChange(tempValue)
bindingDrawer.hide() bindingDrawer.hide()
} }
@ -48,13 +48,12 @@
<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" on:click={saveBinding}>Save</Button>
<svelte:component <svelte:component
this={panel} this={panel}
slot="body" slot="body"
value={readableValue} value={readableValue}
close={handleClose} on:change={event => (tempValue = event.detail)}
on:update={event => (tempValue = event.detail)}
bindableProperties={bindings} bindableProperties={bindings}
/> />
</Drawer> </Drawer>

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>