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

Update styles of modal bindable input

This commit is contained in:
Andrew Kingston 2021-07-14 15:46:47 +01:00
parent bddb6591d6
commit 65acfe21f3
1 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>