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

Improve email template screen layout

This commit is contained in:
Andrew Kingston 2021-09-14 12:36:29 +01:00
parent 1ecfd93c96
commit fd20e733a8
1 changed files with 69 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
packages/builder/src/pages/builder/portal/manage/email/[template].svelte
View File

@ -71,73 +71,77 @@
} }
</script> </script>
<Layout gap="XS" noPadding> <Layout noPadding>
<div class="back"> <Layout gap="XS" noPadding>
<ActionButton <div>
on:click={() => $goto("./")} <ActionButton
quiet on:click={() => $goto("./")}
size="S" quiet
icon="BackAndroid" size="S"
> icon="BackAndroid"
Back to email settings >
</ActionButton> Back to email settings
</ActionButton>
</div>
<header>
<Heading>
Email Template: {name}
</Heading>
<Button cta on:click={saveTemplate}>Save</Button>
</header>
<Body>
{description}
<br />
Change the email template here. Add dynamic content by using the bindings menu
on the right.
</Body>
</Layout>
<div>
<Tabs selected="Edit" on:select={fixMountBug}>
<Tab title="Edit">
<div class="template-editor">
<div class="template-text-editor">
<Editor
editorHeight={640}
bind:this={htmlEditor}
mode="handlebars"
on:change={e => {
selectedTemplate.contents = e.detail.value
}}
value={selectedTemplate?.contents}
/>
</div>
<div class="bindings-editor">
<Detail size="L">Bindings</Detail>
{#if mounted}
<Tabs selected="Template">
<Tab title="Template">
<TemplateBindings
title="Template Bindings"
bindings={templateBindings}
onBindingClick={setTemplateBinding}
/>
</Tab>
<Tab title="Common">
<TemplateBindings
title="Common Bindings"
bindings={$email?.definitions?.bindings?.common}
onBindingClick={setTemplateBinding}
/>
</Tab>
</Tabs>
{/if}
</div>
</div>
</Tab>
<Tab title="Preview">
<div class="preview">
<iframe title="preview" srcdoc={previewContent} />
</div>
</Tab>
</Tabs>
</div> </div>
<header>
<Heading>
Email Template: {name}
</Heading>
<Button cta on:click={saveTemplate}>Save</Button>
</header>
<Detail>Description</Detail>
<Body>{description}</Body>
<Body>
Change the email template here. Add dynamic content by using the bindings
menu on the right.
</Body>
</Layout> </Layout>
<Tabs selected="Edit" on:select={fixMountBug}>
<Tab title="Edit">
<div class="template-editor">
<div class="template-text-editor">
<Editor
editorHeight={640}
bind:this={htmlEditor}
mode="handlebars"
on:change={e => {
selectedTemplate.contents = e.detail.value
}}
value={selectedTemplate?.contents}
/>
</div>
<div class="bindings-editor">
<Detail size="L">Bindings</Detail>
{#if mounted}
<Tabs selected="Template">
<Tab title="Template">
<TemplateBindings
title="Template Bindings"
bindings={templateBindings}
onBindingClick={setTemplateBinding}
/>
</Tab>
<Tab title="Common">
<TemplateBindings
title="Common Bindings"
bindings={$email?.definitions?.bindings?.common}
onBindingClick={setTemplateBinding}
/>
</Tab>
</Tabs>
{/if}
</div>
</div>
</Tab>
<Tab title="Preview">
<div class="preview">
<iframe title="preview" srcdoc={previewContent} />
</div>
</Tab>
</Tabs>
<style> <style>
.template-editor { .template-editor {