Fix field margin issues

This commit is contained in:
Matthias Metelka 2022-09-06 22:53:45 +02:00
parent a26f7ee86b
commit 4d59d04187
2 changed files with 34 additions and 26 deletions

View file

@ -85,34 +85,36 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
onDestroy(() => api?.destroy()); onDestroy(() => api?.destroy());
</script> </script>
<slot name="field-label" /> <div class="field-container">
<slot name="field-label" />
<Collapsible collapse={collapsed} let:collapsed={hidden}> <Collapsible collapse={collapsed} let:collapsed={hidden}>
<div <div
use:elementResolve use:elementResolve
class="editor-field" class="editor-field"
on:focusin on:focusin
on:focusout on:focusout
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
{hidden} {hidden}
>
<EditingArea
{content}
fontFamily={field.fontFamily}
fontSize={field.fontSize}
api={editingArea}
> >
{#if flipInputs} <EditingArea
<slot name="plain-text-input" /> {content}
<slot name="rich-text-input" /> fontFamily={field.fontFamily}
{:else} fontSize={field.fontSize}
<slot name="rich-text-input" /> api={editingArea}
<slot name="plain-text-input" /> >
{/if} {#if flipInputs}
</EditingArea> <slot name="plain-text-input" />
</div> <slot name="rich-text-input" />
</Collapsible> {:else}
<slot name="rich-text-input" />
<slot name="plain-text-input" />
{/if}
</EditingArea>
</div>
</Collapsible>
</div>
<style lang="scss"> <style lang="scss">
.editor-field { .editor-field {

View file

@ -12,5 +12,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
/* replace with "gap: 5px" once it's available
- required: Chromium 84 (Qt6 only) and iOS 14.1 */
> :global(*) {
margin: 5px 0;
}
} }
</style> </style>