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