CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-01 12:30:41 +12:00
Code Issues Projects Releases Wiki Activity

wip: fixes a couple of drawers

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-22 16:34:18 +02:00
parent 9b295f89ba
commit 9f5393a7ac
3 changed files with 27 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
packages/bbui/src/Drawer/Drawer.svelte
View file

@ -40,9 +40,9 @@
<Heading xs>{title}</Heading>
<Body xxs><slot name="description" /></Body>
</div>
<div class="controls">
<div class="buttons">
<slot name="buttons" />
<ActionButton quiet icon="Close" on:click={hide} />
<ActionButton selected quiet icon="Close" on:click={hide} />
</div>
</header>
<slot name="body" />
@ -66,22 +66,17 @@
justify-content: space-between;
align-items: center;
border-bottom: var(--border-light);
padding: 0 var(--spectrum-alias-item-padding-s) ;
padding: var(--spectrum-alias-item-padding-s) 0;
}
header :global(*) + :global(*) {
margin: var(--spectrum-alias-grid-baseline);
margin: 0 var(--spectrum-alias-grid-baseline);
}
.controls {
display: grid;
grid-auto-flow: column;
grid-gap: var(--spectrum-alias-item-padding-s);
align-items: center;
}
.text {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-left: var(--spectrum-alias-item-padding-s);
}
</style>

30
packages/builder/src/components/common/DrawerBindableInput.svelte
View file

@ -1,5 +1,5 @@
<script>
import { Icon, Input, Drawer, Body, Button } from "@budibase/bbui"
import { Icon, Input, Drawer, Button } from "@budibase/bbui"
import {
readableToRuntimeBinding,
runtimeToReadableBinding,
@ -10,7 +10,6 @@
export let panel = BindingPanel
export let value = ""
export let bindings = []
export let thin = true
export let title = "Bindings"
export let placeholder
export let label
@ -41,22 +40,17 @@
</div>
</div>
<Drawer bind:this={bindingDrawer} {title}>
<div slot="description">
<Body extraSmall grey>
Add the objects on the left to enrich your text.
</Body>
</div>
<heading slot="buttons">
<Button thin blue on:click={handleClose}>Save</Button>
</heading>
<div slot="body">
<svelte:component
this={panel}
value={readableValue}
close={handleClose}
on:update={event => (tempValue = event.detail)}
bindableProperties={bindings} />
</div>
<svelte:fragment slot="description">
Add the objects on the left to enrich your text.
</svelte:fragment>
<Button cta slot="buttons" on:click={handleClose}>Save</Button>
<svelte:component
slot="body"
this={panel}
value={readableValue}
close={handleClose}
on:update={event => (tempValue = event.detail)}
bindableProperties={bindings} />
</Drawer>
<style>

25
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View file

@ -90,22 +90,17 @@
<Icon s name="FlashOn" />
</div>
<Drawer bind:this={bindingDrawer} title={capitalise(key)}>
<div slot="description">
<Body extraSmall grey>
<svelte:fragment slot="description">
Add the objects on the left to enrich your text.
</Body>
</div>
<heading slot="buttons">
<Button thin blue disabled={!valid} on:click={handleClose}>Save</Button>
</heading>
<div slot="body">
<BindingPanel
bind:valid
value={safeValue}
close={handleClose}
on:update={e => (temporaryBindableValue = e.detail)}
{bindableProperties} />
</div>
</svelte:fragment>
<Button cta slot="buttons" disabled={!valid} on:click={handleClose}>Save</Button>
<BindingPanel
slot="body"
bind:valid
value={safeValue}
close={handleClose}
on:update={e => (temporaryBindableValue = e.detail)}
{bindableProperties} />
</Drawer>
{/if}
</div>