fix label not being rendered correctly

This commit is contained in:
Peter Clement 2021-09-16 12:15:32 +01:00
parent cd3beb3b6c
commit a871a3a44f
3 changed files with 25 additions and 12 deletions

View File

@ -6,7 +6,7 @@
import Heading from "../Typography/Heading.svelte" import Heading from "../Typography/Heading.svelte"
export let title export let title
export let fillWidth
let visible = false let visible = false
export function show() { export function show() {
@ -34,7 +34,7 @@
{#if visible} {#if visible}
<Portal> <Portal>
<section class="drawer" transition:slide> <section class:fillWidth class="drawer" transition:slide>
<header> <header>
<div class="text"> <div class="text">
<Heading size="XS">{title}</Heading> <Heading size="XS">{title}</Heading>
@ -63,6 +63,10 @@
z-index: 2; z-index: 2;
} }
.fillWidth {
width: calc(100% - 260px) !important;
}
header { header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View File

@ -76,7 +76,7 @@
<div class="fields"> <div class="fields">
{#each schemaProperties as [key, value]} {#each schemaProperties as [key, value]}
<div class="block-field"> <div class="block-field">
<Label>{value.title || key}</Label> <Label>{value.title || (key === "row" ? "Table" : key)}</Label>
{#if value.type === "string" && value.enum} {#if value.type === "string" && value.enum}
<Select <Select
on:change={e => onChange(e, key)} on:change={e => onChange(e, key)}
@ -102,6 +102,7 @@
/> />
{:else} {:else}
<DrawerBindableInput <DrawerBindableInput
fillWidth
title={value.title} title={value.title}
panel={AutomationBindingPanel} panel={AutomationBindingPanel}
type="email" type="email"
@ -161,7 +162,9 @@
{bindings} {bindings}
/> />
{:else} {:else}
<div class="test">
<DrawerBindableInput <DrawerBindableInput
fillWidth
title={value.title} title={value.title}
panel={AutomationBindingPanel} panel={AutomationBindingPanel}
type={value.customType} type={value.customType}
@ -169,6 +172,7 @@
on:change={e => onChange(e, key)} on:change={e => onChange(e, key)}
{bindings} {bindings}
/> />
</div>
{/if} {/if}
{/if} {/if}
</div> </div>
@ -191,4 +195,8 @@
display: grid; display: grid;
grid-gap: 5px; grid-gap: 5px;
} }
.test :global(.drawer) {
width: 10000px !important;
}
</style> </style>

View File

@ -14,6 +14,7 @@
export let placeholder export let placeholder
export let label export let label
export let disabled = false export let disabled = false
export let fillWidth = false
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
let bindingDrawer let bindingDrawer
@ -45,7 +46,7 @@
</div> </div>
{/if} {/if}
</div> </div>
<Drawer bind:this={bindingDrawer} {title}> <Drawer {fillWidth} bind:this={bindingDrawer} {title}>
<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>