mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-24 06:35:49 +03:00
Updated Admin X newsletter settings design (#17411)
refs https://github.com/TryGhost/Product/issues/3601 - Added static mock newsletter preview component - Updated newsletter settings form design - Fixed background color issue with PreviewModal
This commit is contained in:
Djordje Vlaisavljevic
GitHub
parent
3f0c26534d
commit
abeee56dc4
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px" d="M12.658 2a9.307 9.307 0 0 0-8.15 4.788 9.326 9.326 0 0 0 .23 9.456L2 22l5.75-2.74a9.32 9.32 0 0 0 13.894-5.372 9.341 9.341 0 0 0-1.532-8.185A9.328 9.328 0 0 0 12.658 2Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 352 B |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2 14.429h3.444a1.906 1.906 0 0 1 1.543.794l4.617 7.095a1.622 1.622 0 0 0 1.992.537 1.597 1.597 0 0 0 .894-1.87l-.833-3.142a1.867 1.867 0 0 1 .993-2.164 1.91 1.91 0 0 1 .833-.193h4.63a1.882 1.882 0 0 0 1.806-2.426v-.011l-1.8-6.008v-.016c-.733-2.36-1.992-3.97-4.469-3.97-5.934 0-5.595-.684-12.524 2.818-.377.188-.752.379-1.126.572V16.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 516 B |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.001 10.571h3.443a1.907 1.907 0 0 0 1.543-.794l4.618-7.095a1.62 1.62 0 0 1 1.992-.537 1.598 1.598 0 0 1 .892 1.871l-.832 3.14a1.867 1.867 0 0 0 .993 2.165c.259.127.544.193.832.194h4.63a1.883 1.883 0 0 1 1.807 2.426v.011l-1.8 6.008v.015c-.733 2.36-1.993 3.97-4.47 3.97-5.933 0-5.593.684-12.524-2.818-.375-.188-.75-.38-1.125-.57v-9.89"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 516 B |
@ -0,0 +1,3 @@
|
||||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM11.8326 2.33879C6.37785 2.95189 3.95901 5.20797 3.41126 9.74699C3.34896 10.2632 3.22642 10.7805 3.10443 11.2954C2.93277 12.02 2.76221 12.74 2.76221 13.4458C2.76221 17.9885 6.5856 21.556 11.1283 21.556C12.8959 21.556 14.4433 20.8144 15.8756 20.048C19.0536 18.3478 22.0328 16.2597 22.0328 12.5411C22.0328 9.91512 20.1051 7.56932 18.466 5.5747C18.3834 5.47416 18.3015 5.37451 18.2206 5.27577C17.3866 4.25742 14.4333 2.04643 11.8326 2.33879Z" fill="black" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 723 B |
@ -196,7 +196,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
|
||||
title=''
|
||||
>
|
||||
<div className='flex h-full grow'>
|
||||
<div className='flex grow flex-col'>
|
||||
<div className={`flex grow flex-col ${previewBgColor === 'grey' ? 'bg-grey-50' : 'bg-white'}`}>
|
||||
{preview}
|
||||
</div>
|
||||
{sidebar &&
|
||||
|
||||
BIN
apps/admin-x-settings/src/assets/images/latest-posts-1.png
Normal file
BIN
apps/admin-x-settings/src/assets/images/latest-posts-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
apps/admin-x-settings/src/assets/images/latest-posts-2.png
Normal file
BIN
apps/admin-x-settings/src/assets/images/latest-posts-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
apps/admin-x-settings/src/assets/images/latest-posts-3.png
Normal file
BIN
apps/admin-x-settings/src/assets/images/latest-posts-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
apps/admin-x-settings/src/assets/images/user-cover.png
Normal file
BIN
apps/admin-x-settings/src/assets/images/user-cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
@ -5,6 +5,7 @@ import Heading from '../../../../admin-x-ds/global/Heading';
|
||||
import Hint from '../../../../admin-x-ds/global/Hint';
|
||||
import Icon from '../../../../admin-x-ds/global/Icon';
|
||||
import ImageUpload from '../../../../admin-x-ds/global/form/ImageUpload';
|
||||
import NewsletterPreview from './NewsletterPreview';
|
||||
import React, {useState} from 'react';
|
||||
import Select, {SelectOption} from '../../../../admin-x-ds/global/form/Select';
|
||||
import StickyFooter from '../../../../admin-x-ds/global/StickyFooter';
|
||||
@ -40,7 +41,7 @@ const Sidebar: React.FC = () => {
|
||||
const tabs: Tab[] = [
|
||||
{
|
||||
id: 'generalSettings',
|
||||
title: 'General settings',
|
||||
title: 'General',
|
||||
contents: <Form gap="sm" marginTop>
|
||||
<Heading className="mt-5" level={5}>Name and description</Heading>
|
||||
<TextField placeholder="Weekly Roundup" title="Name"></TextField>
|
||||
@ -88,44 +89,52 @@ const Sidebar: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<Toggle
|
||||
direction="rtl"
|
||||
label='Publication title'
|
||||
labelStyle='value'
|
||||
/>
|
||||
<Toggle
|
||||
direction="rtl"
|
||||
label='Newsletter name'
|
||||
labelStyle='value'
|
||||
/>
|
||||
|
||||
<Heading className="mt-5" level={5}>Body</Heading>
|
||||
<Toggle
|
||||
label='Post title'
|
||||
labelStyle='value'
|
||||
direction="rtl"
|
||||
label='Title'
|
||||
labelStyle='heading'
|
||||
/>
|
||||
<Select options={selectOptions} title="Title style" onSelect={(value: string) => {
|
||||
<Select containerClassName="-mt-[16px]" options={selectOptions} onSelect={(value: string) => {
|
||||
alert(value);
|
||||
}}/>
|
||||
<Toggle
|
||||
label='Feature image'
|
||||
labelStyle='value'
|
||||
/>
|
||||
<Select options={selectOptions} title="Body style" onSelect={(value: string) => {
|
||||
alert(value);
|
||||
}}/>
|
||||
<Toggle
|
||||
direction="rtl"
|
||||
label='Feature image'
|
||||
labelStyle='value'
|
||||
/>
|
||||
|
||||
<Heading className="mt-5" level={5}>Footer</Heading>
|
||||
<Toggle
|
||||
direction="rtl"
|
||||
label='Ask your readers for feedback'
|
||||
labelStyle='value'
|
||||
/>
|
||||
<Toggle
|
||||
direction="rtl"
|
||||
label='Add a link to your comments'
|
||||
labelStyle='value'
|
||||
/>
|
||||
<Toggle
|
||||
direction="rtl"
|
||||
label='Share your latest posts'
|
||||
labelStyle='value'
|
||||
/>
|
||||
<Toggle
|
||||
direction="rtl"
|
||||
label='Show subscription details'
|
||||
labelStyle='value'
|
||||
/>
|
||||
@ -146,7 +155,7 @@ const Sidebar: React.FC = () => {
|
||||
<StickyFooter height={96}>
|
||||
<div className='flex w-full items-start px-7'>
|
||||
<span>
|
||||
<Icon className='mr-2' colorClass='text-red' name='heart'/>
|
||||
<Icon className='-mt-[1px] mr-2' colorClass='text-red' name='heart'/>
|
||||
</span>
|
||||
<Form marginBottom={false}>
|
||||
<Toggle
|
||||
@ -163,38 +172,22 @@ const Sidebar: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const preview = <NewsletterPreview/>;
|
||||
|
||||
const NewsletterDetailModal: React.FC<NewsletterDetailModalProps> = () => {
|
||||
const sidebar = <Sidebar/>;
|
||||
|
||||
return <PreviewModalContent
|
||||
deviceSelector={false}
|
||||
okLabel={'Save & close'}
|
||||
preview={'Newsletter preview goes here TBD'}
|
||||
preview={preview}
|
||||
previewBgColor={'grey'}
|
||||
previewToolbar={false}
|
||||
sidebar={sidebar}
|
||||
sidebarPadding={false}
|
||||
testId='newsletter-modal'
|
||||
title='Newsletter'
|
||||
/>;
|
||||
// return <Modal
|
||||
// afterClose={() => {
|
||||
// updateRoute('tiers');
|
||||
// }}
|
||||
// okLabel='Save & close'
|
||||
// size='lg'
|
||||
// title='Tier'
|
||||
// stickyFooter>
|
||||
// <div className='mt-5 flex items-start'>
|
||||
// <div className='grow'>
|
||||
// <Form>
|
||||
// Tier form
|
||||
// </Form>
|
||||
// </div>
|
||||
// {/* <div className='sticky top-[77px] shrink-0 basis-[380px]'>
|
||||
// <NewsletterDetailPreview />
|
||||
// </div> */}
|
||||
// </div>
|
||||
// </Modal>;
|
||||
};
|
||||
|
||||
export default NiceModal.create(NewsletterDetailModal);
|
||||
@ -0,0 +1,129 @@
|
||||
import Icon from '../../../../admin-x-ds/global/Icon';
|
||||
import React from 'react';
|
||||
import {ReactComponent as GhostOrb} from '../../../../admin-x-ds/assets/images/ghost-orb.svg';
|
||||
|
||||
const NewsletterPreview: React.FC = () => {
|
||||
return (
|
||||
<div className="relative flex grow flex-col">
|
||||
<div className="GIGI absolute inset-0 m-5">
|
||||
<div className="mx-auto my-0 flex h-full w-full max-w-[700px] flex-col overflow-hidden rounded-[4px] text-black shadow-xl">
|
||||
|
||||
{/* Email header */}
|
||||
<div className="flex-column flex min-h-[77px] justify-center rounded-t-sm border-b border-grey-200 bg-grey-100 px-6 text-sm text-grey-700">
|
||||
<p className="leading-normal"><span className="font-semibold text-grey-900">Ghost</span><span> noreply@localhost</span></p>
|
||||
<p className="leading-normal"><span className="font-semibold text-grey-900">To:</span> Jamie Larson jamie@example.com</p>
|
||||
</div>
|
||||
<div className="overflow-y-auto px-20 text-sm">
|
||||
<div>
|
||||
<img alt="" className="mt-6 block" src="https://images.unsplash.com/photo-1681898190846-0a133b5b7fe0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80"/>
|
||||
</div>
|
||||
<div className="border-b border-grey-200 py-12">
|
||||
<h4 className="mb-1 text-center text-[1.6rem] font-bold uppercase leading-tight tracking-tight text-grey-900">My cool publication</h4>
|
||||
<h5 className="mb-1 text-center text-[1.4rem] font-normal leading-tight text-grey-600">My cute newsletter</h5>
|
||||
</div>
|
||||
<div className="flex flex-col items-center pb-10 pt-12">
|
||||
<h2 className="pb-4 text-center text-5xl font-bold leading-supertight text-black">Your email newsletter</h2>
|
||||
<div className="flex w-full flex-col justify-between text-center text-sm leading-none tracking-[0.1px] text-grey-600">
|
||||
<p className="pb-2">By Djordje Vlaisavljevic<span className="before:pl-0.5 before:pr-1 before:content-['•']">17 Jul 2023</span><span className="before:pl-0.5 before:pr-1 before:content-['•']"><Icon className="-mt-[2px] inline-block" colorClass="text-grey-600" name="comment" size="sm"/></span></p>
|
||||
<p className="pb-2 underline"><span>View in browser</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature image */}
|
||||
<div className="mb-2 h-[300px] w-full max-w-[600px] bg-grey-300 bg-cover bg-no-repeat"></div>
|
||||
<div className="w-full max-w-[600px] pb-[30px] text-center text-[1.3rem] text-grey-600">Feature image caption</div>
|
||||
|
||||
<div className="max-w-[600px] border-b border-grey-200 py-5 text-[1.6rem] leading-[1.7] text-black">
|
||||
<p className="mb-5">This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
|
||||
<p className="mb-5">Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
|
||||
<p className="mb-5">So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
|
||||
</div>
|
||||
|
||||
{/* Feedback */}
|
||||
<div className="grid gap-5 border-b border-grey-200 px-6 py-5">
|
||||
<div className="flex justify-center gap-3">
|
||||
<button className="pointer-events-none cursor-default whitespace-nowrap rounded-[2.2rem] bg-transparent font-semibold" type="button">
|
||||
<span className="inline-flex items-center gap-2 px-[18px] py-[7px]">
|
||||
<Icon name="thumbs-up" size="md" />
|
||||
<span>More like this</span>
|
||||
</span>
|
||||
</button>
|
||||
<button className="pointer-events-none cursor-default whitespace-nowrap rounded-[2.2rem] bg-transparent font-semibold" type="button">
|
||||
<span className="inline-flex items-center gap-2 px-[18px] py-[7px]">
|
||||
<Icon name="thumbs-down" />
|
||||
<span>Less like this</span>
|
||||
</span>
|
||||
</button>
|
||||
<button className="pointer-events-none cursor-default whitespace-nowrap rounded-[2.2rem] bg-transparent font-semibold" type="button">
|
||||
<span className="inline-flex items-center gap-2 px-[18px] py-[7px]">
|
||||
<Icon name="comment" />
|
||||
<span>Comment</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Latest posts */}
|
||||
<div className="border-b border-grey-200 py-6">
|
||||
<h3 className="mb-4 mt-2 pb-1 text-[1.4rem] font-semibold uppercase">Keep reading</h3>
|
||||
<div className="flex justify-between gap-4 py-2">
|
||||
<div>
|
||||
<h4 className="mb-1 mt-0.5 text-[1.9rem]">The three latest posts published on your site</h4>
|
||||
<p className="m-0 text-base text-grey-600">Posts sent as an email only will never be shown here.</p>
|
||||
</div>
|
||||
<div className="aspect-square h-auto w-full max-w-[100px] bg-grey-200 bg-cover bg-no-repeat" style={{backgroundImage: 'url(\'/../../../../admin-x-ds/assets/images/latest-posts-1.png'}}></div>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4 py-2">
|
||||
<div>
|
||||
<h4 className="mb-1 mt-0.5 text-[1.9rem]">Displayed at the bottom of each newsletter</h4>
|
||||
<p className="m-0 text-base text-grey-600">Giving your readers one more place to discover your stories.</p>
|
||||
</div>
|
||||
<div className="aspect-square h-auto w-full max-w-[100px] bg-grey-200 bg-cover bg-no-repeat"></div>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4 py-2">
|
||||
<div>
|
||||
<h4 className="mb-1 mt-0.5 text-[1.9rem]">To keep your work front and center</h4>
|
||||
<p className="m-0 text-base text-grey-600">Making sure that your audience stays engaged.</p>
|
||||
</div>
|
||||
<div className="aspect-square h-auto w-full max-w-[100px] bg-grey-200 bg-cover bg-no-repeat"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subscription details */}
|
||||
<div className="border-b border-grey-200 py-8">
|
||||
<h4 className="mb-3 text-[1.4rem] uppercase">Subscription details</h4>
|
||||
<p className="m-0 mb-4 text-base">You are receiving this because you are a paid subscriber to The Local Host. Your subscription will renew on 17 Jul 2024.</p>
|
||||
<div className="flex">
|
||||
<div className="shrink-0 text-base">
|
||||
<p>Name: Jamie Larson</p>
|
||||
<p>Email: jamie@example.com</p>
|
||||
<p>Member since: 17 July 2023</p>
|
||||
</div>
|
||||
<span className="w-full self-end whitespace-nowrap text-right text-base font-semibold text-pink">Manage subscription →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex flex-col items-center pt-10">
|
||||
<div className="text break-words px-8 py-3 text-center text-[1.3rem] leading-base text-grey-600">This is custom email footer text.</div>
|
||||
|
||||
<div className="px-8 pb-14 pt-3 text-center text-[1.3rem] text-grey-600">
|
||||
<span>Ghosty © 2023 – </span>
|
||||
<span className="pointer-events-none cursor-auto underline">Unsubscribe</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center pb-[40px] pt-[10px]">
|
||||
<a className="pointer-events-none inline-flex cursor-auto items-center px-2 py-1 text-[1.25rem] font-semibold tracking-tight text-grey-900" href="#">
|
||||
<GhostOrb className="mr-[6px] h-4 w-4"/>
|
||||
<span>Powered by Ghost</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsletterPreview;
|
||||
Loading…
Reference in New Issue
Block a user