CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 05:20:32 +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> <Heading xs>{title}</Heading>
<Body xxs><slot name="description" /></Body> <Body xxs><slot name="description" /></Body>
</div> </div>
<div class="controls"> <div class="buttons">
<slot name="buttons" /> <slot name="buttons" />
<ActionButton quiet icon="Close" on:click={hide} /> <ActionButton selected quiet icon="Close" on:click={hide} />
</div> </div>
</header> </header>
<slot name="body" /> <slot name="body" />
@ -66,22 +66,17 @@
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: 0 var(--spectrum-alias-item-padding-s) ; padding: var(--spectrum-alias-item-padding-s) 0;
} }
header :global(*) + :global(*) { 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 { .text {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin-left: var(--spectrum-alias-item-padding-s);
} }
</style> </style>

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

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

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

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