CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-02 01:56:57 +13:00
Code Issues Projects Releases Wiki Activity

Update styles of modal bindable input

Browse source
This commit is contained in:
Andrew Kingston 2021-07-14 15:46:47 +01:00
parent d8ad23ddb8
commit 5e1c0b9417
1 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
packages/builder/src/components/common/bindings/ModalBindableInput.svelte
View file

@ -6,7 +6,6 @@
} from "builderStore/dataBinding"
import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher()
export let panel = ServerBindingPanel
export let value = ""
@ -16,12 +15,11 @@
export let placeholder
export let label
const dispatch = createEventDispatcher()
let bindingModal
let validity = true
let valid = true
$: readableValue = runtimeToReadableBinding(bindings, value)
$: tempValue = readableValue
$: invalid = !validity
const saveBinding = () => {
onChange(tempValue)
@ -38,7 +36,7 @@
{label}
{thin}
value={readableValue}
on:change={event => onChange(event.target.value)}
on:change={event => onChange(event.detail)}
{placeholder}
/>
<div class="icon" on:click={bindingModal.show}>
@ -46,23 +44,20 @@
</div>
</div>
<Modal bind:this={bindingModal}>
<ModalContent
{title}
onConfirm={saveBinding}
bind:disabled={invalid}
size="XL"
>
<ModalContent {title} onConfirm={saveBinding} disabled={!valid} size="XL">
<Body extraSmall grey>
Add the objects on the left to enrich your text.
</Body>
<svelte:component
this={panel}
serverSide
value={readableValue}
bind:validity
on:update={event => (tempValue = event.detail)}
bindableProperties={bindings}
/>
<div class="panel-wrapper">
<svelte:component
this={panel}
serverSide
value={readableValue}
bind:valid
on:change={e => (tempValue = e.detail)}
bindableProperties={bindings}
/>
</div>
</ModalContent>
</Modal>
@ -100,4 +95,9 @@
background-color: var(--spectrum-global-color-gray-50);
border-color: var(--spectrum-alias-border-color-hover);
}
.panel-wrapper {
border: var(--border-light);
border-radius: 4px;
}
</style>