Update email details page to match new designs
This commit is contained in:
parent
531fe63b4b
commit
b6e237874a
|
@ -3,11 +3,11 @@
|
||||||
import { Page } from "@budibase/bbui"
|
import { Page } from "@budibase/bbui"
|
||||||
import { Content, SideNav, SideNavItem } from "components/portal/page"
|
import { Content, SideNav, SideNavItem } from "components/portal/page"
|
||||||
|
|
||||||
$: narrow = !$isActive("./users/index") && !$isActive("./groups/index")
|
$: wide = $isActive("./email/:template")
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Page narrow>
|
<Page>
|
||||||
<Content>
|
<Content narrow={!wide}>
|
||||||
<div slot="side-nav">
|
<div slot="side-nav">
|
||||||
<SideNav>
|
<SideNav>
|
||||||
<SideNavItem
|
<SideNavItem
|
||||||
|
|
|
@ -11,10 +11,11 @@
|
||||||
Tabs,
|
Tabs,
|
||||||
Tab,
|
Tab,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { goto } from "@roxi/routify"
|
import { goto, url } from "@roxi/routify"
|
||||||
import { email } from "stores/portal"
|
import { email } from "stores/portal"
|
||||||
import Editor from "components/integration/QueryEditor.svelte"
|
import Editor from "components/integration/QueryEditor.svelte"
|
||||||
import TemplateBindings from "./_components/TemplateBindings.svelte"
|
import TemplateBindings from "./_components/TemplateBindings.svelte"
|
||||||
|
import { Breadcrumbs, Breadcrumb } from "components/portal/page"
|
||||||
|
|
||||||
// this is the email purpose
|
// this is the email purpose
|
||||||
export let template
|
export let template
|
||||||
|
@ -71,24 +72,14 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout noPadding>
|
<Layout gap="L" noPadding>
|
||||||
|
<Breadcrumbs>
|
||||||
|
<Breadcrumb url={$url("./")} text="Email" />
|
||||||
|
<Breadcrumb text={name} />
|
||||||
|
</Breadcrumbs>
|
||||||
|
|
||||||
<Layout gap="XS" noPadding>
|
<Layout gap="XS" noPadding>
|
||||||
<div>
|
<Heading size="M">{name}</Heading>
|
||||||
<ActionButton
|
|
||||||
on:click={() => $goto("./")}
|
|
||||||
quiet
|
|
||||||
size="S"
|
|
||||||
icon="BackAndroid"
|
|
||||||
>
|
|
||||||
Back to email settings
|
|
||||||
</ActionButton>
|
|
||||||
</div>
|
|
||||||
<header>
|
|
||||||
<Heading>
|
|
||||||
Email Template: {name}
|
|
||||||
</Heading>
|
|
||||||
<Button cta on:click={saveTemplate}>Save</Button>
|
|
||||||
</header>
|
|
||||||
<Body>
|
<Body>
|
||||||
{description}
|
{description}
|
||||||
<br />
|
<br />
|
||||||
|
@ -96,8 +87,9 @@
|
||||||
on the right.
|
on the right.
|
||||||
</Body>
|
</Body>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Tabs selected="Edit" on:select={fixMountBug}>
|
<Tabs noHorizPadding selected="Edit" on:select={fixMountBug}>
|
||||||
<Tab title="Edit">
|
<Tab title="Edit">
|
||||||
<div class="template-editor">
|
<div class="template-editor">
|
||||||
<div class="template-text-editor">
|
<div class="template-text-editor">
|
||||||
|
@ -112,9 +104,9 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="bindings-editor">
|
<div class="bindings-editor">
|
||||||
<Detail size="L">Bindings</Detail>
|
<Heading size="XS">Bindings</Heading>
|
||||||
{#if mounted}
|
{#if mounted}
|
||||||
<Tabs selected="Template">
|
<Tabs noHorizPadding selected="Template">
|
||||||
<Tab title="Template">
|
<Tab title="Template">
|
||||||
<TemplateBindings
|
<TemplateBindings
|
||||||
title="Template Bindings"
|
title="Template Bindings"
|
||||||
|
@ -141,6 +133,10 @@
|
||||||
</Tab>
|
</Tab>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Button cta on:click={saveTemplate}>Save</Button>
|
||||||
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -152,29 +148,24 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
grid-gap: var(--spacing-xl);
|
grid-gap: var(--spacing-xl);
|
||||||
margin-top: var(--spacing-xl);
|
margin-top: var(--spacing-xl);
|
||||||
|
overflow: hidden;
|
||||||
|
height: 640px;
|
||||||
}
|
}
|
||||||
.template-text-editor {
|
.template-text-editor {
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
min-width: 250px;
|
min-width: 250px;
|
||||||
|
margin-top: calc(-1 * var(--spacing-s));
|
||||||
}
|
}
|
||||||
.bindings-editor {
|
.bindings-editor {
|
||||||
margin-top: var(--spacing-s);
|
|
||||||
max-height: 640px;
|
|
||||||
overflow: auto;
|
|
||||||
flex: 0 0 300px;
|
flex: 0 0 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview {
|
.preview {
|
||||||
height: 640px;
|
height: 640px;
|
||||||
margin-top: calc(var(--spacing-xl) + var(--spacing-s));
|
margin-top: var(--spacing-xl);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
iframe {
|
iframe {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -1,15 +1,38 @@
|
||||||
<script>
|
<script>
|
||||||
import { Body, Menu, MenuItem, Detail } from "@budibase/bbui"
|
import { Body, Detail } from "@budibase/bbui"
|
||||||
|
|
||||||
export let bindings
|
export let bindings
|
||||||
export let onBindingClick = () => {}
|
export let onBindingClick = () => {}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Menu>
|
<div class="bindings">
|
||||||
{#each bindings as binding}
|
{#each bindings as binding}
|
||||||
<MenuItem on:click={() => onBindingClick(binding)}>
|
<div class="binding" on:click={() => onBindingClick(binding)}>
|
||||||
<Detail size="M">{binding.name}</Detail>
|
<Detail size="M">{binding.name}</Detail>
|
||||||
<Body size="XS">{binding.description}</Body>
|
<Body size="XS">{binding.description}</Body>
|
||||||
</MenuItem>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</Menu>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bindings {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: var(--spacing-s);
|
||||||
|
padding-right: var(--spacing-m);
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 556px;
|
||||||
|
}
|
||||||
|
.binding {
|
||||||
|
padding: var(--spacing-m);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--spectrum-global-color-gray-200);
|
||||||
|
transition: background 130ms ease-out;
|
||||||
|
}
|
||||||
|
.binding:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--spectrum-global-color-gray-300);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -4,11 +4,11 @@
|
||||||
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
|
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
|
||||||
import { isActive, url } from "@roxi/routify"
|
import { isActive, url } from "@roxi/routify"
|
||||||
|
|
||||||
$: narrow = !$isActive("./users/index") && !$isActive("./groups/index")
|
$: wide = $isActive("./users/index") || $isActive("./groups/index")
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Page>
|
<Page>
|
||||||
<Content {narrow}>
|
<Content narrow={!wide}>
|
||||||
<div slot="side-nav">
|
<div slot="side-nav">
|
||||||
<SideNav>
|
<SideNav>
|
||||||
<SideNavItem
|
<SideNavItem
|
||||||
|
|
Loading…
Reference in New Issue