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

fixes layout issues in email templates

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-20 15:03:34 +02:00
parent f730900ed5
commit 8f6205a4db
4 changed files with 94 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
packages/builder/src/pages/builder/portal/manage/_layout.svelte → packages/builder/src/pages/builder/portal/manage/auth/_layout.svelte
View File

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

@ -1,11 +1,12 @@
<script> <script>
import { import {
Button,
Detail, Detail,
Heading, Heading,
notifications, ActionButton,
Icon, Body,
Page, Page,
Layout,
notifications,
Tabs, Tabs,
Tab, Tab,
} from "@budibase/bbui" } from "@budibase/bbui"
@ -46,8 +47,7 @@
} }
</script> </script>
<Page wide gap="L"> <!-- <div class="backbutton" on:click={() => $goto("./")}>
<div class="backbutton" on:click={() => $goto("./")}>
<Icon name="BackAndroid" /> <Icon name="BackAndroid" />
<span>Back</span> <span>Back</span>
</div> </div>
@ -56,7 +56,25 @@
Email Template: {template} Email Template: {template}
</Heading> </Heading>
<Button cta on:click={saveTemplate}>Save</Button> <Button cta on:click={saveTemplate}>Save</Button>
</header> </header> -->
<Page wide>
<Layout gap="XS" noPadding>
<div class="back">
<ActionButton
on:click={() => $goto("./")}
quiet
size="S"
icon="BackAndroid"
>
Back to email settings
</ActionButton>
</div>
<Heading>Email Template: {template}</Heading>
<Body
>Change the email template here. you can insert bindings (email, logo url,
etc.) from the list on the right</Body
>
</Layout>
<Tabs {selected}> <Tabs {selected}>
<Tab title="Edit"> <Tab title="Edit">
<div class="template-editor"> <div class="template-editor">

123
packages/builder/src/pages/builder/portal/manage/email/index.svelte
View File

@ -5,6 +5,7 @@
Heading, Heading,
Divider, Divider,
Label, Label,
Page,
notifications, notifications,
Layout, Layout,
Input, Input,
@ -91,69 +92,71 @@
}) })
</script> </script>
<Layout> <Page>
<Layout noPadding gap="XS"> <Layout>
<Heading size="M">Email</Heading> <Layout noPadding gap="XS">
<Body> <Heading size="M">Email</Heading>
Sending email is not required, but highly recommended for processes such <Body>
as password recovery. To setup automated auth emails, simply add the Sending email is not required, but highly recommended for processes such
values below and click activate. as password recovery. To setup automated auth emails, simply add the
</Body> values below and click activate.
</Layout>
<Divider />
{#if smtpConfig}
<Layout gap="XS" noPadding>
<Heading size="S">SMTP</Heading>
<Body size="S">
To allow your app to benefit from automated auth emails, add your SMTP
details below.
</Body> </Body>
</Layout> </Layout>
<Layout gap="XS" noPadding>
<div class="form-row">
<Label size="L">Host</Label>
<Input bind:value={smtpConfig.config.host} />
</div>
<div class="form-row">
<Label size="L">Port</Label>
<Input type="number" bind:value={smtpConfig.config.port} />
</div>
<div class="form-row">
<Label size="L">User</Label>
<Input bind:value={smtpConfig.config.auth.user} />
</div>
<div class="form-row">
<Label size="L">Password</Label>
<Input type="password" bind:value={smtpConfig.config.auth.pass} />
</div>
<div class="form-row">
<Label size="L">From email address</Label>
<Input type="email" bind:value={smtpConfig.config.from} />
</div>
</Layout>
<div>
<Button cta on:click={saveSmtp}>Save</Button>
</div>
<Divider /> <Divider />
<Layout gap="XS" noPadding> {#if smtpConfig}
<Heading size="S">Templates</Heading> <Layout gap="XS" noPadding>
<Body size="S"> <Heading size="S">SMTP</Heading>
Budibase comes out of the box with ready-made email templates to help <Body size="S">
with user onboarding. Please refrain from changing the links. To allow your app to benefit from automated auth emails, add your SMTP
</Body> details below.
</Layout> </Body>
<Table </Layout>
{customRenderers} <Layout gap="XS" noPadding>
data={$email.templates} <div class="form-row">
schema={templateSchema} <Label size="L">Host</Label>
{loading} <Input bind:value={smtpConfig.config.host} />
on:click={({ detail }) => $goto(`./${detail.purpose}`)} </div>
allowEditRows={false} <div class="form-row">
allowSelectRows={false} <Label size="L">Port</Label>
allowEditColumns={false} <Input type="number" bind:value={smtpConfig.config.port} />
/> </div>
{/if} <div class="form-row">
</Layout> <Label size="L">User</Label>
<Input bind:value={smtpConfig.config.auth.user} />
</div>
<div class="form-row">
<Label size="L">Password</Label>
<Input type="password" bind:value={smtpConfig.config.auth.pass} />
</div>
<div class="form-row">
<Label size="L">From email address</Label>
<Input type="email" bind:value={smtpConfig.config.from} />
</div>
</Layout>
<div>
<Button cta on:click={saveSmtp}>Save</Button>
</div>
<Divider />
<Layout gap="XS" noPadding>
<Heading size="S">Templates</Heading>
<Body size="S">
Budibase comes out of the box with ready-made email templates to help
with user onboarding. Please refrain from changing the links.
</Body>
</Layout>
<Table
{customRenderers}
data={$email.templates}
schema={templateSchema}
{loading}
on:click={({ detail }) => $goto(`./${detail.purpose}`)}
allowEditRows={false}
allowSelectRows={false}
allowEditColumns={false}
/>
{/if}
</Layout>
</Page>
<style> <style>
.form-row { .form-row {

7
packages/builder/src/pages/builder/portal/manage/users/_layout.svelte Normal file
View File

@ -0,0 +1,7 @@
<script>
import { Page } from "@budibase/bbui"
</script>
<Page>
<slot />
</Page>